/* =========================================================================
   原则工作台 · 设计 Token + 全局样式
   ========================================================================= */

:root {
  /* ---- 背景 ---- */
  --bg-primary: #FFFFFF;
  --bg-secondary: #FAFBFC;
  --bg-tertiary: #F4F6F8;
  --bg-canvas: #F7F8FA;
  --bg-elevated: #FFFFFF;

  /* ---- 墨字 ---- */
  --ink-primary: #0F1419;
  --ink-secondary: #4A5260;
  --ink-tertiary: #8F959E;
  --ink-disabled: #BBBFC4;
  --ink-inverse: #FFFFFF;

  /* ---- 边线 ---- */
  --line-strong: #C9CED4;
  --line-standard: #E4E8ED;
  --line-weak: #EFF0F1;
  --line-faint: #F4F5F7;

  /* ---- 飞书主色（蓝） ---- */
  --brand-blue: #3370FF;
  --brand-blue-hover: #245BDB;
  --brand-blue-soft: #E8F0FE;
  --brand-blue-faint: #F2F6FF;

  /* ---- Focus ring：暗沉灰烟色（取代刺眼蓝紫，整站统一） ---- */
  --focus-ring: #4a4a4a;
  --focus-ring-soft: rgba(60, 60, 60, 0.12);

  /* ---- 语义色 ---- */
  --success: #00B8A3;
  --success-soft: #E1F7F3;
  --warning: #FFB400;
  --warning-soft: #FFF6E0;
  --danger: #F76964;
  --danger-soft: #FDECEB;

  /* ---- 唯一例外：致敬达利奥的朱砂红 ---- */
  --vermilion: #C43E3E;
  --vermilion-deep: #A53232;
  --vermilion-soft: #FBE9E9;
  --vermilion-faint: #FDF4F4;

  /* ---- 字体 ---- */
  --font-display: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --font-body: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --font-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
  --font-cn: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;

  /* ---- 尺寸（全局 sharp-corner 设计：4 个 token 都为 0） ---- */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* ---- 阴影（极淡，不悬浮） ---- */
  --shadow-faint: 0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-subtle: 0 2px 4px rgba(15, 20, 25, 0.05);

  /* ---- 动效 ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0.2, 0.2, 1);
  --dur-fast: 160ms;
  --dur-normal: 240ms;
  --dur-slow: 400ms;

  /* ---- 布局 ---- */
  --content-max: 1280px;
  --header-height: 64px;
}

/* =========================================================================
   Reset
   ========================================================================= */

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

html, body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv02";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--brand-blue-hover);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-tertiary);
}

/* =========================================================================
   App Shell
   ========================================================================= */

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-blue);
  animation: bounce 1.4s var(--ease-in-out) infinite both;
}

.loading-dot:nth-child(2) { animation-delay: 0.16s; }
.loading-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* =========================================================================
   Header / 面包屑导航
   ========================================================================= */

.app-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid var(--line-standard);
  background: var(--bg-primary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-header__brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.app-header__brand-mark {
  width: 8px;
  height: 8px;
  background: var(--ink-primary);
  border-radius: 0;
}

.app-header__brand-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
}

.app-header__brand-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.app-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-secondary);
}

.crumb-sep {
  color: var(--ink-disabled);
}

.crumb-link {
  color: var(--ink-secondary);
  font-weight: 400;
  transition: color var(--dur-fast) var(--ease-out);
}

.crumb-link:hover {
  color: var(--ink-primary);
}

.crumb-current {
  color: var(--ink-primary);
  font-weight: 500;
}

.app-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.save-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 8px;
}

.save-status.idle {
  color: var(--ink-tertiary);
  opacity: 0.6;
}

.save-status.saving {
  color: var(--brand-blue);
}

.save-status.saved {
  color: var(--success);
}

.save-status.local-only {
  color: #c97a00;        /* 警告橙 */
  font-weight: 600;
}

.save-status.rejected,
.save-status.disabled,
.save-status.error {
  color: #c0392b;         /* 错误红 */
  font-weight: 700;
  cursor: help;
}
.save-status.rejected::before,
.save-status.disabled::before,
.save-status.error::before {
  content: '⚠ ';
}

.license-badge {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-standard);
  background: transparent;
  color: var(--ink-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.license-badge:hover {
  border-color: var(--line-strong);
  color: var(--ink-primary);
  background: var(--bg-secondary);
}

.license-badge[data-license-mode="licensed"] {
  border-color: rgba(74, 157, 111, 0.42);
  color: #3f805a;
  background: rgba(74, 157, 111, 0.07);
}

.license-badge[data-license-mode="invalid"] {
  border-color: rgba(192, 57, 43, 0.38);
  color: #a83a30;
  background: rgba(192, 57, 43, 0.06);
}

.license-badge[data-license-mode="trial"],
.license-badge[data-license-mode="loading"],
.license-badge[data-license-mode="unknown"] {
  border-color: #d9dee5;
}

.is-trial-readonly .trial-readonly-field,
.is-trial-readonly .trial-readonly-button,
.trial-readonly-field:disabled,
.trial-readonly-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.is-trial-readonly [contenteditable="false"].trial-readonly-field {
  user-select: text;
  cursor: default;
}

.is-trial-readonly .trial-readonly-button:hover {
  border-color: var(--line-standard);
  background: inherit;
}

/* =========================================================================
   保存状态全屏 banner（离线 / 拒写 / quota 满）
   ========================================================================= */

#saveBanner.save-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;   /* 在所有 UI 之上 */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-family: var(--font-body, system-ui);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  animation: saveBannerSlide 0.25s ease-out;
}
@keyframes saveBannerSlide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
#saveBanner.save-banner--offline    { background: #c97a00; }
#saveBanner.save-banner--quota      { background: #c0392b; }
#saveBanner.save-banner--disabled   { background: #c0392b; }
#saveBanner.save-banner--rejected   { background: #c0392b; }
#saveBanner.save-banner--multitab   { background: #8e6dc9; }

#saveBanner .save-banner__icon {
  font-size: 18px;
  flex-shrink: 0;
}
#saveBanner .save-banner__msg {
  flex: 1;
}
#saveBanner .save-banner__hint {
  font-weight: 400;
  opacity: 0.85;
  font-size: 12px;
  font-style: italic;
}
#saveBanner .save-banner__close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s;
}
#saveBanner .save-banner__close:hover {
  background: rgba(255,255,255,0.35);
}

/* =========================================================================
   备份恢复对话框
   ========================================================================= */

.restore-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 35, 0.55);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: restoreOverlayFade 0.2s ease-out;
}
@keyframes restoreOverlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.restore-dialog {
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  background: #fff;
  border: 1px solid #d8d4cc;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  font-family: var(--font-cn, system-ui);
}

.restore-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #ececea;
}
.restore-dialog__head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.restore-dialog__close {
  background: transparent;
  border: none;
  font-size: 22px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: #888;
  line-height: 1;
}
.restore-dialog__close:hover {
  color: #111;
}

.restore-dialog__hint {
  margin: 0;
  padding: 12px 22px;
  font-size: 12px;
  color: #777;
  background: #faf8f3;
  border-bottom: 1px solid #ececea;
  line-height: 1.5;
}

.restore-dialog__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.restore-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-bottom: 1px solid #f0eeea;
}
.restore-item:hover {
  background: #faf8f3;
  border-color: #e8e4dc;
}
.restore-item__main {
  flex: 1;
  min-width: 0;
}
.restore-item__time {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 600;
  color: #222;
}
.restore-item__meta {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: #999;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.restore-item__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* =========================================================================
   数据安全中心
   ========================================================================= */

.data-safety {
  min-height: calc(100vh - 56px);
  background: #f6f7f8;
  padding: 40px clamp(28px, 5vw, 72px) 72px;
  color: #171a1f;
}

.data-safety__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 28px;
  align-items: end;
  max-width: 1240px;
  margin: 0 auto 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid #dfe4ea;
}

.data-safety__eyebrow {
  margin-bottom: 10px;
  color: #7b8490;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.data-safety h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: 0;
}

.data-safety__hero p {
  max-width: 620px;
  margin: 12px 0 0;
  color: #66707e;
  font-size: 14px;
  line-height: 1.75;
}

.data-safety__status {
  justify-self: end;
  min-width: 132px;
  padding: 12px 14px;
  border: 1px solid #dfe4ea;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(24, 29, 38, 0.06);
}

.data-safety__status span {
  display: block;
  color: #7b8490;
  font-size: 12px;
}

.data-safety__status strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.data-safety__grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
  gap: 18px;
}

.data-panel {
  background: #ffffff;
  border: 1px solid #dfe4ea;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(24, 29, 38, 0.04);
}

.data-panel--wide {
  grid-column: span 1;
}

.data-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.data-panel__head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 650;
}

.data-panel__head p {
  margin: 6px 0 0;
  color: #7b8490;
  font-size: 12px;
  line-height: 1.6;
}

.data-paths {
  display: grid;
  gap: 8px;
}

.data-path {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #e7ebef;
  background: #fbfcfd;
}

.data-path span {
  color: #717b88;
  font-size: 12px;
}

.data-path code {
  min-width: 0;
  overflow: hidden;
  color: #252a31;
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-path__open {
  height: 26px;
  border: 1px solid #d9dee5;
  background: #ffffff;
  color: #252a31;
  font-size: 12px;
  cursor: pointer;
}

.data-path__open:hover {
  border-color: #8f98a5;
  background: #f6f7f8;
}

.data-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.data-metric {
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid #e7ebef;
  background: #fbfcfd;
}

.data-metric span {
  display: block;
  color: #717b88;
  font-size: 12px;
}

.data-metric strong {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

.data-actions {
  display: grid;
  gap: 8px;
}

.data-action {
  width: 100%;
  padding: 12px 13px;
  text-align: left;
  border: 1px solid #e1e5eb;
  background: #ffffff;
  color: #171a1f;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.08s ease;
}

.data-action:hover {
  border-color: #8f98a5;
  background: #f8f9fa;
}

.data-action:active {
  transform: translateY(1px);
}

.data-action strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
}

.data-action span {
  display: block;
  margin-top: 4px;
  color: #7b8490;
  font-size: 12px;
  line-height: 1.5;
}

.data-backups {
  display: grid;
  gap: 8px;
}

.data-backup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e7ebef;
  background: #fbfcfd;
}

.data-backup__main {
  min-width: 0;
}

.data-backup__main strong {
  display: block;
  color: #252a31;
  font-family: var(--font-mono);
  font-size: 12px;
}

.data-backup__main span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #7b8490;
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-backup__actions {
  display: flex;
  gap: 6px;
}

.data-empty {
  padding: 22px;
  border: 1px dashed #d6dce4;
  color: #7b8490;
  background: #fbfcfd;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}

.data-skeleton {
  height: 38px;
  border: 1px solid #edf0f3;
  background: linear-gradient(90deg, #f3f5f7 0%, #fbfcfd 48%, #f3f5f7 100%);
  background-size: 220% 100%;
  animation: dataSkeleton 1.2s ease-in-out infinite;
}

@keyframes dataSkeleton {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (max-width: 900px) {
  .data-safety {
    padding: 28px 16px 56px;
  }
  .data-safety__hero,
  .data-safety__grid {
    grid-template-columns: 1fr;
  }
  .data-safety__status {
    justify-self: stretch;
  }
  .data-backup {
    grid-template-columns: 1fr;
  }
  .data-backup__actions {
    justify-content: flex-start;
  }
}

/* =========================================================================
   授权中心
   ========================================================================= */

.license-page {
  min-height: calc(100vh - 56px);
  background: #f6f7f8;
  padding: 40px clamp(28px, 5vw, 72px) 72px;
  color: #171a1f;
}

.license-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 28px;
  align-items: end;
  max-width: 1040px;
  margin: 0 auto 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid #dfe4ea;
}

.license-hero__eyebrow {
  margin-bottom: 10px;
  color: #7b8490;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.license-hero h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: 0;
}

.license-hero p {
  max-width: 660px;
  margin: 12px 0 0;
  color: #66707e;
  font-size: 14px;
  line-height: 1.75;
}

.license-card {
  justify-self: end;
  min-width: 150px;
  padding: 13px 14px;
  border: 1px solid #dfe4ea;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(24, 29, 38, 0.06);
}

.license-card span {
  display: block;
  color: #7b8490;
  font-size: 12px;
}

.license-card strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  line-height: 1;
}

.license-card[data-license-mode="licensed"] strong {
  color: #3f805a;
}

.license-card[data-license-mode="invalid"] strong {
  color: #a83a30;
}

.license-layout {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 18px;
}

.license-panel {
  background: #ffffff;
  border: 1px solid #dfe4ea;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(24, 29, 38, 0.04);
}

.license-panel--wide {
  grid-column: 1 / -1;
}

.license-panel__head {
  margin-bottom: 14px;
}

.license-panel__head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 650;
}

.license-panel__head p {
  margin: 6px 0 0;
  color: #7b8490;
  font-size: 12px;
  line-height: 1.6;
}

.license-input {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #dfe4ea;
  outline: none;
  background: #fbfcfd;
  color: #171a1f;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
}

.license-input:focus {
  border-color: #8f98a5;
  background: #ffffff;
}

.license-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.license-message {
  min-height: 20px;
  margin-top: 10px;
  color: #66707e;
  font-size: 12px;
  line-height: 1.5;
}

.license-detail {
  display: grid;
  gap: 8px;
}

.license-state {
  padding: 12px;
  border: 1px solid #e7ebef;
  background: #fbfcfd;
}

.license-state span {
  display: block;
  color: #717b88;
  font-size: 12px;
}

.license-state strong {
  display: block;
  margin-top: 5px;
  color: #252a31;
  font-size: 14px;
  line-height: 1.45;
}

.license-state--licensed {
  border-color: rgba(74, 157, 111, 0.36);
  background: rgba(74, 157, 111, 0.06);
}

.license-state--trial {
  border-color: #e7ebef;
}

.license-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #e7ebef;
  background: #fbfcfd;
}

.license-row span {
  color: #717b88;
  font-size: 12px;
}

.license-row code {
  min-width: 0;
  overflow: hidden;
  color: #252a31;
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.license-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.license-notes div {
  min-height: 76px;
  padding: 13px;
  border: 1px solid #e7ebef;
  background: #fbfcfd;
}

.license-notes strong {
  display: block;
  color: #171a1f;
  font-family: var(--font-mono);
  font-size: 15px;
}

.license-notes span {
  display: block;
  margin-top: 7px;
  color: #66707e;
  font-size: 12px;
  line-height: 1.6;
}

.license-admin-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #e7ebef;
  background: #fbfcfd;
}

.license-admin-entry span {
  color: #66707e;
  font-size: 12px;
}

.license-admin-page {
  min-height: calc(100vh - 56px);
  background: #f6f7f8;
  padding: 40px clamp(28px, 5vw, 72px) 72px;
  color: #171a1f;
}

.license-admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 28px;
  align-items: end;
  max-width: 1180px;
  margin: 0 auto 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid #dfe4ea;
}

.license-admin-hero h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 650;
}

.license-admin-hero p {
  max-width: 680px;
  margin: 12px 0 0;
  color: #66707e;
  font-size: 14px;
  line-height: 1.75;
}

.license-admin-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
}

.issuer-setup,
.issuer-overview {
  max-width: 1180px;
  margin: 0 auto 18px;
}

.issuer-setup__panel {
  padding: 18px;
  border: 1px solid #dfe4ea;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(34, 39, 46, 0.05);
}

.issuer-setup__panel.is-ready {
  border-left: 3px solid #668c36;
}

.issuer-setup__panel.is-missing {
  border-left: 3px solid #9b3d32;
}

.issuer-setup__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.issuer-setup__head span {
  display: block;
  margin-bottom: 6px;
  color: #8d96a4;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.issuer-setup__head h2 {
  margin: 0;
  color: #171a1f;
  font-size: 18px;
  line-height: 1.2;
}

.issuer-setup__head p,
.issuer-setup__note {
  margin: 8px 0 0;
  color: #687280;
  font-size: 13px;
  line-height: 1.7;
}

.issuer-setup__badge {
  padding: 6px 10px;
  border: 1px solid #dfe4ea;
  background: #f8fafb;
  color: #363d47;
  font-family: var(--font-mono);
  font-size: 12px;
}

.issuer-setup__paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.issuer-setup__paths div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #edf0f3;
  background: #fbfcfd;
}

.issuer-setup__paths span {
  display: block;
  margin-bottom: 6px;
  color: #87909d;
  font-size: 11px;
}

.issuer-setup__paths code {
  display: block;
  overflow: hidden;
  color: #343b45;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issuer-setup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.issuer-key-import {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #edf0f3;
}

.issuer-key-import label {
  display: grid;
  gap: 6px;
  color: #717b88;
  font-size: 12px;
}

.issuer-key-import textarea {
  width: 100%;
  min-height: 118px;
  padding: 10px;
  border: 1px solid #dfe4ea;
  outline: none;
  background: #fbfcfd;
  color: #171a1f;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  resize: vertical;
}

.issuer-key-import textarea:focus {
  border-color: #8f98a5;
  background: #ffffff;
}

.issuer-overview__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dfe4ea;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(34, 39, 46, 0.04);
}

.issuer-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.issuer-metrics div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #edf0f3;
  background: #fbfcfd;
}

.issuer-metrics span {
  display: block;
  color: #7d8794;
  font-size: 11px;
}

.issuer-metrics strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #171a1f;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issuer-queue {
  min-width: 0;
  border: 1px solid #edf0f3;
  background: #fbfcfd;
}

.issuer-queue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #edf0f3;
}

.issuer-queue__head span {
  color: #252a31;
  font-size: 12px;
  font-weight: 650;
}

.issuer-queue-row,
.issuer-queue-empty {
  padding: 8px 10px;
  border-bottom: 1px solid #edf0f3;
}

.issuer-queue-row:last-child,
.issuer-queue-empty:last-child {
  border-bottom: 0;
}

.issuer-queue-row strong {
  display: block;
  overflow: hidden;
  color: #252a31;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issuer-queue-row span,
.issuer-queue-empty {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #7b8490;
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issuer-form {
  display: grid;
  gap: 10px;
}

.issuer-form label {
  display: grid;
  gap: 5px;
}

.issuer-form label span {
  color: #717b88;
  font-size: 12px;
}

.issuer-form input,
.issuer-form select,
.issuer-form textarea {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid #dfe4ea;
  outline: none;
  background: #fbfcfd;
  color: #171a1f;
  font-family: var(--font-body);
  font-size: 13px;
}

.issuer-form textarea {
  resize: vertical;
  line-height: 1.55;
}

.issuer-form input:focus,
.issuer-form select:focus,
.issuer-form textarea:focus {
  border-color: #8f98a5;
  background: #ffffff;
}

.issuer-form__row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 10px;
}

.issuer-output,
.issuer-ledger {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}

.issuer-ledger {
  max-height: 620px;
}

.issuer-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e7ebef;
  background: #fbfcfd;
}

.issuer-record[data-delivery-status="pending"] {
  border-left: 3px solid #a56a35;
}

.issuer-record[data-delivery-status="delivered"] {
  border-left: 3px solid #668c36;
}

.issuer-record[data-delivery-status="after_sale"] {
  border-left: 3px solid #2e5a8f;
}

.issuer-record[data-delivery-status="void"] {
  border-left: 3px solid #8f98a5;
  opacity: 0.72;
}

.issuer-ledger-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.issuer-record__main {
  min-width: 0;
}

.issuer-record__main strong {
  display: block;
  color: #252a31;
  font-size: 13px;
  font-weight: 650;
}

.issuer-record__main span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #7b8490;
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issuer-record__main code {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #39414d;
  font-family: var(--font-mono);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issuer-record__actions {
  display: flex;
  gap: 6px;
}

@media (max-width: 900px) {
  .license-page {
    padding: 28px 16px 56px;
  }
  .license-hero,
  .license-admin-hero,
  .license-admin-grid,
  .license-layout,
  .license-notes {
    grid-template-columns: 1fr;
  }
  .license-card {
    justify-self: stretch;
  }
  .issuer-form__row,
  .issuer-record {
    grid-template-columns: 1fr;
  }
  .issuer-setup__head,
  .issuer-setup__paths,
  .issuer-overview__panel,
  .issuer-metrics {
    grid-template-columns: 1fr;
  }
  .issuer-ledger-actions {
    justify-content: flex-start;
  }
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.btn--primary {
  background: var(--brand-blue);
  color: var(--ink-inverse);
}

.btn--primary:hover {
  background: var(--brand-blue-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-secondary);
  border-color: var(--line-standard);
}

.btn--ghost:hover {
  border-color: var(--line-strong);
  color: var(--ink-primary);
  background: var(--bg-secondary);
}

.btn--text {
  background: transparent;
  color: var(--ink-secondary);
  padding: 0 8px;
}

.btn--text:hover {
  color: var(--ink-primary);
  background: var(--bg-tertiary);
}

.btn--vermilion {
  background: var(--vermilion);
  color: var(--ink-inverse);
}

.btn--vermilion:hover {
  background: var(--vermilion-deep);
}

.btn--lg {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
}

.btn--sm {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.btn--danger {
  background: transparent;
  color: var(--vermilion);
  border-color: rgba(160, 50, 50, 0.4);
}

.btn--danger:hover {
  background: rgba(196, 78, 78, 0.08);
  color: var(--vermilion-deep);
  border-color: var(--vermilion);
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-secondary);
  font-weight: 400;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease-out);
}

.btn-back:hover {
  color: var(--ink-primary);
  background: var(--bg-tertiary);
}

.btn-back::before {
  content: "←";
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
}

/* =========================================================================
   Inputs
   ========================================================================= */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
}

.field-helper {
  font-size: 12px;
  color: var(--ink-tertiary);
}

.input,
.textarea {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-primary);
  background: var(--bg-primary);
  border: 1px solid var(--line-standard);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.input:hover,
.textarea:hover {
  border-color: var(--line-strong);
}

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.textarea {
  resize: vertical;
  height: 88px;             /* 默认约 3 行高，紧凑 */
  min-height: 64px;         /* resize 下限：约 2 行 */
  max-height: 50vh;         /* resize 上限：避免拖到屏外 */
  font-family: var(--font-body);
}

.textarea--large {
  height: 360px;            /* 默认约 16 行高，长文舒适 */
  min-height: 240px;        /* resize 下限 */
  max-height: 60vh;
}

/* 字段标签后缀 hint（小灰字提示，如"可输入自定义关系"） */
.field-hint {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-tertiary);
  letter-spacing: 0;
}

::placeholder {
  color: var(--ink-disabled);
}

/* =========================================================================
   Tags / Badges
   ========================================================================= */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
  color: var(--ink-secondary);
}

.tag--blue {
  background: var(--brand-blue-soft);
  color: var(--brand-blue);
}

.tag--vermilion {
  background: var(--vermilion-soft);
  color: var(--vermilion);
}

.tag--success {
  background: var(--success-soft);
  color: var(--success);
}

.tag--warning {
  background: var(--warning-soft);
  color: #B07A00;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-tertiary);
}

.status-dot--active {
  background: var(--vermilion);
  box-shadow: 0 0 0 3px var(--vermilion-soft);
}

.status-dot--done {
  background: var(--success);
}

/* =========================================================================
   Home · 首页 (2x2 嵌入式网格)
   ========================================================================= */

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home__hero {
  padding: 80px 32px 48px;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  border-bottom: 1px solid var(--line-standard);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 56px;
  align-items: stretch;
}

.home__hero-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home__hero-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home__mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--ink-primary);
  vertical-align: middle;
  margin-right: 22px;
  margin-bottom: 16px;
}

/* 财务系统入口：红色矢量菱形 + 标签（紧邻 ■ mark） */
.home__finance-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  vertical-align: middle;
  margin-bottom: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease-out;
}

.home__finance-diamond {
  width: 56px;
  height: 34px;
  display: block;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.08));
  transition: filter .18s ease-out, transform .18s ease-out;
}

.home__finance-diamond polygon {
  fill: #b84a55;
  transition: fill .18s ease-out;
}

.home__finance-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s ease-out, transform .22s ease-out, color .18s ease-out;
}

.home__finance-btn:hover .home__finance-diamond {
  transform: translate(-1px, -1px);
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.12));
}

.home__finance-btn:hover .home__finance-diamond polygon {
  fill: #a03c47;
}

.home__finance-btn:hover .home__finance-label {
  opacity: 1;
  transform: translateX(0);
  color: #b84a55;
}

/* 任务计时入口：灰色矢量菱形 + 标签（紧跟红色菱形下方） */
.home__tasks-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .18s ease-out;
}

.home__tasks-diamond {
  width: 44px;
  height: 28px;
  display: block;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.06));
  transition: filter .18s ease-out, transform .18s ease-out;
}

.home__tasks-diamond polygon {
  fill: #888;
  transition: fill .18s ease-out;
}

.home__tasks-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ink-tertiary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s ease-out, transform .22s ease-out, color .18s ease-out;
}

.home__tasks-btn:hover .home__tasks-diamond {
  transform: translate(-1px, -1px);
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.12));
}

.home__tasks-btn:hover .home__tasks-diamond polygon {
  fill: #555;
}

.home__tasks-btn:hover .home__tasks-label {
  opacity: 1;
  transform: translateX(0);
  color: #555;
}

/* 观点择优入口：黑色矢量菱形 + 标签（紧跟灰色菱形下方） */
.home__opinions-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .18s ease-out;
}

.home__opinions-diamond {
  width: 50px;
  height: 32px;
  display: block;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.16)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.10));
  transition: filter .18s ease-out, transform .18s ease-out;
}

.home__opinions-diamond polygon {
  fill: #1a1a1a;
  transition: fill .18s ease-out;
}

.home__opinions-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s ease-out, transform .22s ease-out, color .18s ease-out;
}

.home__opinions-btn:hover .home__opinions-diamond {
  transform: translate(-1px, -1px);
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.24)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.10));
}

.home__opinions-btn:hover .home__opinions-diamond polygon {
  fill: #000;
}

.home__opinions-btn:hover .home__opinions-label {
  opacity: 1;
  transform: translateX(0);
  color: #1a1a1a;
}

/* =========================================================================
   07 看板 · 周计划（home hero 右侧浮动面板）
   ========================================================================= */

.weekly-planner {
  position: relative;
  flex: 1;
  padding: 22px 24px 26px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;          /* 卡片超出 widget 边界时硬截断 */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 30px -16px rgba(0, 0, 0, 0.10),
    0 2px 6px -2px rgba(0, 0, 0, 0.04);
}

.weekly-planner__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.weekly-planner__title {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: 0.02em;
}

.weekly-planner__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.weekly-planner__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

/* 空态：创建第 1 周大按钮 */
.weekly-planner__create-first {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 220px;
  padding: 24px;
  background: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 8px,
    rgba(139, 92, 246, 0.04) 8px,
    rgba(139, 92, 246, 0.04) 16px
  );
  border: 1.5px dashed rgba(139, 92, 246, 0.5);
  border-radius: 0;
  cursor: pointer;
  color: #6d28d9;
  transition: all .18s ease-out;
}

.weekly-planner__create-first:hover {
  border-color: #8b5cf6;
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 8px,
      rgba(139, 92, 246, 0.08) 8px, rgba(139, 92, 246, 0.08) 16px),
    rgba(139, 92, 246, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -8px rgba(139, 92, 246, 0.35);
}

.weekly-planner__create-first-plus {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  color: #8b5cf6;
}

.weekly-planner__create-first-text {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.weekly-planner__create-first-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(109, 40, 217, 0.65);
  letter-spacing: 0.04em;
}

/* 卡片横向滚动容器：硬截断 + 隐形滚动条 + 键盘左右方向键控制 */
.weekly-planner__cards {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 0 14px 0;
  margin: 0;
  scrollbar-width: none;        /* Firefox：完全隐藏 */
  -ms-overflow-style: none;     /* IE/legacy Edge */
  scroll-behavior: smooth;
}

.weekly-planner__cards::-webkit-scrollbar {
  display: none;                /* Chrome / Safari / Edge：完全隐藏 */
  width: 0;
  height: 0;
}

/* 单个周卡片 */
.week-card {
  position: relative;
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    4px 4px 0 0 rgba(0, 0, 0, 0.04),
    0 4px 14px -8px rgba(0, 0, 0, 0.10);
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}

.week-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 10px 24px -12px rgba(0, 0, 0, 0.18),
    0 2px 6px -2px rgba(0, 0, 0, 0.06);
}

.week-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-weak);
}

.week-card__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #8b5cf6;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 0;
}

.week-card__date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
}

.week-card__del {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all .14s ease-out;
}

.week-card:hover .week-card__del { opacity: 1; }

.week-card__del:hover {
  color: var(--vermilion, #c44e4e);
  background: rgba(196, 78, 78, 0.08);
}

/* 待办列表 */
.week-card__todos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.week-todo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 2px;
  border-radius: 0;
  transition: background .12s ease-out;
}

.week-todo:hover {
  background: rgba(0, 0, 0, 0.025);
}

.week-todo__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-primary);
  line-height: 1.45;
}

.week-todo__chk {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #8b5cf6;
  cursor: pointer;
}

.week-todo__text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  transition: color .14s ease-out, text-decoration-color .14s ease-out;
}

.week-todo.is-done .week-todo__text {
  color: var(--ink-tertiary);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(139, 92, 246, 0.7);
}

.week-todo__del {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  opacity: 0;
  transition: all .12s ease-out;
}

.week-todo:hover .week-todo__del { opacity: 0.7; }
.week-todo__del:hover {
  opacity: 1 !important;
  color: var(--vermilion, #c44e4e);
  background: rgba(196, 78, 78, 0.08);
}

/* 添加待办输入框 */
.week-card__add {
  margin-top: 2px;
}

.week-card__add-input {
  width: 100%;
  padding: 7px 10px;
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-primary);
  background: rgba(0, 0, 0, 0.025);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 0;
  outline: none;
  transition: all .14s ease-out;
}

.week-card__add-input::placeholder {
  color: var(--ink-tertiary);
  font-size: 12px;
}

.week-card__add-input:focus {
  background: #ffffff;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.week-card__foot {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 4px;
  border-top: 1px dashed var(--line-weak);
}

/* 紫色"下一周"悬浮按钮：浮在最后卡片右侧（直角方块） */
.week-card__next {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%) scale(0.6);
  width: 32px;
  height: 40px;
  border-radius: 0;
  border: 1px solid #5b21b6;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    3px 3px 0 0 rgba(91, 33, 182, 0.35),
    0 4px 12px -4px rgba(124, 58, 237, 0.50);
  transition: opacity .18s ease-out, transform .18s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.week-card:hover .week-card__next {
  opacity: 1;
  pointer-events: all;
  transform: translateY(-50%) scale(1);
}

.week-card__next:hover {
  transform: translateY(-50%) scale(1.08);
  box-shadow:
    0 6px 16px -4px rgba(124, 58, 237, 0.65),
    0 2px 5px rgba(124, 58, 237, 0.40);
}

/* === 周计划入口菱形（首页 widget head 左侧） === */
.weekly-planner__expand {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  align-self: center;
  position: relative;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}

.weekly-planner__expand:hover {
  transform: rotate(90deg) scale(1.18);
}

.weekly-planner__expand-diamond {
  display: block;
  width: 14px;
  height: 14px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0%, transparent 32%),
    linear-gradient(135deg, #1e3a8a 0%, #0c1f4f 100%);
  transform: rotate(45deg);
  box-shadow:
    0 2px 6px rgba(15, 30, 90, 0.4),
    inset -1px -1px 2px rgba(0, 0, 0, 0.3),
    inset 1px 1px 2px rgba(255, 255, 255, 0.25);
  transition: box-shadow .25s;
}

.weekly-planner__expand:hover .weekly-planner__expand-diamond {
  box-shadow:
    0 4px 12px rgba(15, 30, 90, 0.55),
    inset -1px -1px 2px rgba(0, 0, 0, 0.3),
    inset 1px 1px 3px rgba(255, 255, 255, 0.45);
}

/* =========================================================================
   完整周计划页 · #/weekly（米黄背景 + 大日期卡 + 蓝宝石 + 支线笔记）
   ========================================================================= */

.page--weekly-full {
  position: relative;
  min-height: calc(100vh - 60px);
  padding: 0;
  overflow-x: hidden;
}

/* 米黄背景 + 微弱点状纹理 */
.weekly-full__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(180, 140, 70, 0.05) 1px, transparent 1.5px) 0 0 / 26px 26px,
    radial-gradient(circle at 75% 60%, rgba(180, 140, 70, 0.05) 1px, transparent 1.5px) 13px 13px / 26px 26px,
    linear-gradient(180deg, #faf4dc 0%, #f5edcb 100%);
  pointer-events: none;
  z-index: 0;
}

/* 顶部导航 */
.weekly-full__nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px 8px;
}

.weekly-full__hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(26, 32, 44, 0.5);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* === 横向画布：隐形滚动条 + 键盘左右方向键控制 === */
.weekly-full__canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 12px 0 60px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.weekly-full__canvas::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.weekly-full__track {
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
  padding: 24px 64px;
  min-height: 480px;
}

/* 单个周节点（卡片 + 下挂支线） */
.wf-node {
  flex-shrink: 0;
  width: 360px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 卡片之间的水平箭头连接线 */
.wf-connector {
  flex-shrink: 0;
  width: 60px;
  margin-top: 80px;        /* 对齐卡片大致中部 */
  height: 2px;
  background: rgba(120, 90, 40, 0.32);
  position: relative;
  font-size: 0;
}

.wf-connector::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid rgba(120, 90, 40, 0.55);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.wf-connector--dashed {
  background: repeating-linear-gradient(90deg,
    rgba(120, 90, 40, 0.4) 0,
    rgba(120, 90, 40, 0.4) 4px,
    transparent 4px,
    transparent 9px);
}

.wf-connector--dashed::after {
  border-left-color: rgba(120, 90, 40, 0.45);
}

/* === 末尾"添加下一周"虚框 === */
.wf-add-week {
  flex-shrink: 0;
  width: 360px;
  min-height: 360px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 38px;
  background: transparent;
  border: 2px dashed rgba(120, 90, 40, 0.32);
  transition: all .22s ease-out;
  align-self: flex-start;
}

.wf-add-week:hover {
  border-color: #1e3a8a;
  border-style: dashed;
  background: rgba(30, 58, 138, 0.04);
  transform: translateY(-2px);
}

.wf-add-week__plus {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 200;
  color: rgba(26, 32, 44, 0.35);
  line-height: 1;
  margin-bottom: 10px;
  transition: color .22s;
}

.wf-add-week:hover .wf-add-week__plus {
  color: #1e3a8a;
}

.wf-add-week__cn {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 600;
  color: rgba(26, 32, 44, 0.6);
  letter-spacing: 0.04em;
}

.wf-add-week:hover .wf-add-week__cn {
  color: #1e3a8a;
}

.wf-add-week__en {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(26, 32, 44, 0.4);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* === 主日期卡 === */
.wf-card {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #fefcf3 100%);
  border: 1px solid rgba(180, 140, 70, 0.18);
  padding: 32px 34px 56px;
  box-shadow:
    0 14px 40px -10px rgba(120, 90, 40, 0.20),
    0 3px 8px -2px rgba(120, 90, 40, 0.08);
}

.wf-card__date {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 300;
  color: #1a202c;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}

.wf-card__date-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: rgba(26, 32, 44, 0.5);
  letter-spacing: 0.32em;
  margin-bottom: 24px;
}

/* todo 列表 */
.wf-todos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-todo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  margin: 0 -6px;
  font-family: var(--font-cn);
  font-size: 14px;
  color: #1a202c;
  transition: background .15s;
  position: relative;
  line-height: 1.45;
}

.wf-todo:hover {
  background: rgba(180, 140, 70, 0.05);
}

.wf-todo__chk {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(26, 32, 44, 0.4);
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  padding: 0;
  position: relative;
  transition: all .15s;
}

.wf-todo__chk:hover {
  border-color: #1e3a8a;
}

.wf-todo.is-done .wf-todo__chk {
  background: #1e3a8a;
  border-color: #1e3a8a;
}

.wf-todo.is-done .wf-todo__chk::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.wf-todo__text {
  flex: 1;
  outline: none;
  word-break: break-word;
  transition: color .15s, text-decoration-color .15s;
}

.wf-todo__text:focus {
  background: rgba(180, 140, 70, 0.1);
  padding: 0 4px;
  margin: 0 -4px;
}

.wf-todo.is-done .wf-todo__text {
  color: rgba(26, 32, 44, 0.4);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(30, 58, 138, 0.5);
}

.wf-todo__del {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: rgba(26, 32, 44, 0.3);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: all .15s;
  border-radius: 0;
  line-height: 1;
}

.wf-todo:hover .wf-todo__del { opacity: 1; }
.wf-todo__del:hover {
  color: #c44e4e;
  background: rgba(196, 78, 78, 0.08);
}

/* 新增任务行（虚线占位） */
.wf-todo--add {
  cursor: pointer;
}

.wf-todo--add .wf-todo__chk--add {
  border-style: dashed;
  border-color: rgba(26, 32, 44, 0.25);
  background: transparent;
}

.wf-todo__add-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #1a202c;
  outline: none;
  padding: 0;
  margin: 0;
}

.wf-todo__add-input::placeholder {
  color: rgba(26, 32, 44, 0.4);
  font-style: italic;
}

.wf-todo__add-input:focus::placeholder {
  color: rgba(26, 32, 44, 0.25);
}

.wf-todo__add-text {
  flex: 1;
  color: rgba(26, 32, 44, 0.4);
  cursor: pointer;
  font-style: italic;
  font-size: 15px;
}

.wf-todo--add:hover .wf-todo__chk--add,
.wf-todo--add:focus-within .wf-todo__chk--add {
  border-color: var(--focus-ring);
  border-style: dashed;
}

.wf-todo--add:hover .wf-todo__add-text {
  color: rgba(26, 32, 44, 0.65);
}

/* 添加支线笔记按钮 */
.wf-add-branch {
  margin-top: 24px;
  width: 100%;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1.5px dashed rgba(26, 32, 44, 0.2);
  border-radius: 0;
  font-family: var(--font-cn);
  font-size: 14px;
  color: rgba(26, 32, 44, 0.6);
  cursor: pointer;
  transition: all .18s;
}

.wf-add-branch:hover {
  border-color: #1e3a8a;
  color: #1e3a8a;
  background: rgba(30, 58, 138, 0.04);
}

.wf-add-branch__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #1e3a8a;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

/* === 左下角蓝宝石球 === */
.wf-gem {
  position: absolute;
  left: 30px;
  bottom: -22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(200, 220, 255, 0.5) 7%,
      transparent 22%),
    radial-gradient(circle at 50% 52%,
      #4a78d8 0%,
      #2554af 28%,
      #102a6e 68%,
      #050f33 100%);
  box-shadow:
    inset -6px -8px 14px rgba(0, 0, 0, 0.55),
    inset 4px 4px 10px rgba(120, 170, 255, 0.4),
    0 8px 18px rgba(20, 35, 90, 0.55),
    0 3px 7px rgba(0, 0, 0, 0.3);
  animation: wfGemPulse 4.5s ease-in-out infinite;
  z-index: 2;
  transition: transform .18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wf-gem:hover {
  transform: scale(1.08);
}

.wf-gem:active {
  transform: scale(0.95);
}

.wf-gem__shine {
  position: absolute;
  top: 18%;
  left: 24%;
  width: 22%;
  height: 16%;
  background: radial-gradient(ellipse,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.4) 35%,
    transparent 70%);
  border-radius: 50%;
  filter: blur(0.5px);
  pointer-events: none;
}

.wf-gem::after {
  content: '';
  position: absolute;
  bottom: 11%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 14%;
  background: radial-gradient(ellipse,
    rgba(190, 210, 255, 0.55) 0%,
    rgba(180, 200, 255, 0.2) 50%,
    transparent 75%);
  border-radius: 50%;
  filter: blur(2.5px);
  pointer-events: none;
}

.wf-gem__arrow {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 1;
}

@keyframes wfGemPulse {
  0%, 100% {
    box-shadow:
      inset -6px -8px 14px rgba(0, 0, 0, 0.55),
      inset 4px 4px 10px rgba(120, 170, 255, 0.4),
      0 8px 18px rgba(20, 35, 90, 0.55),
      0 3px 7px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      inset -6px -8px 14px rgba(0, 0, 0, 0.55),
      inset 4px 4px 10px rgba(120, 170, 255, 0.4),
      0 12px 26px rgba(60, 110, 230, 0.65),
      0 4px 10px rgba(0, 0, 0, 0.35);
  }
}

/* === 支线笔记区 === */
.wf-branches {
  margin-top: 42px;
  padding-left: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: wfBranchesIn .35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wfBranchesIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 连接线：从宝石位置向下延伸 */
.wf-branches__connector {
  position: absolute;
  left: 52px;
  top: -42px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(30, 58, 138, 0.5) 0%,
    rgba(180, 140, 70, 0.3) 20%,
    rgba(180, 140, 70, 0.3) 100%);
}

.wf-branches__empty {
  font-family: var(--font-cn);
  font-size: 13px;
  color: rgba(26, 32, 44, 0.4);
  padding: 22px 18px;
  text-align: center;
  font-style: italic;
  background: rgba(255, 255, 255, 0.4);
  border: 1px dashed rgba(180, 140, 70, 0.3);
  margin-left: 28px;
}

/* 支线卡：白色直角矩形（参考思维导图 .mind-node--rect 风格） */
.wf-branch {
  position: relative;
  margin-left: 28px;
  background: #ffffff;
  border: 1px solid rgba(31, 45, 61, 0.10);
  padding: 16px 22px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  filter: drop-shadow(0 2px 4px rgba(31, 45, 61, 0.06));
  transition: all .2s;
}

.wf-branch:hover {
  filter: drop-shadow(0 5px 12px rgba(31, 45, 61, 0.14));
  border-color: rgba(31, 45, 61, 0.18);
}

/* 与连接线的横向短线 */
.wf-branch::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 22px;
  width: 16px;
  height: 2px;
  background: rgba(180, 140, 70, 0.35);
}

.wf-branch__icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.4;
}

.wf-branch__text {
  flex: 1;
  font-family: var(--font-cn);
  font-size: 14px;
  color: #1a202c;
  line-height: 1.7;
  word-break: break-word;
  outline: none;
  min-height: 22px;
}

.wf-branch__text:focus {
  background: rgba(255, 244, 200, 0.5);
  padding: 0 4px;
  margin: 0 -4px;
}

.wf-branch__del {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: rgba(26, 32, 44, 0.3);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: all .15s;
  border-radius: 0;
  line-height: 1;
}

.wf-branch:hover .wf-branch__del { opacity: 1; }
.wf-branch__del:hover {
  color: #c44e4e;
  background: rgba(196, 78, 78, 0.08);
}

/* 空态 */
.weekly-full__empty {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 40px;
  text-align: center;
  gap: 6px;
}

.weekly-full__empty-diamond {
  width: 28px;
  height: 28px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6) 0%, transparent 35%),
    linear-gradient(135deg, #1e3a8a 0%, #0c1f4f 100%);
  transform: rotate(45deg);
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(15, 30, 90, 0.35);
}

.weekly-full__empty-title {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
}

.weekly-full__empty-hint {
  font-family: var(--font-cn);
  font-size: 13px;
  color: rgba(26, 32, 44, 0.55);
  margin-bottom: 20px;
}

.weekly-full__empty-back {
  font-family: var(--font-cn);
  font-size: 13px;
  color: #1e3a8a;
  text-decoration: none;
  padding: 8px 18px;
  border: 1px solid #1e3a8a;
  transition: all .15s;
}

.weekly-full__empty-back:hover {
  background: #1e3a8a;
  color: #fff;
}

.home__title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink-primary);
  margin-bottom: 12px;
}

.home__title-em {
  font-weight: 600;
}

.home__subtitle {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-cn);
  font-size: 15px;
  color: var(--ink-secondary);
  font-weight: 400;
}

.home__subtitle-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* hero 左下方的引言小框（直角 · 紧凑） */
.home__quote {
  margin-top: auto;
  padding: 14px 18px;
  width: fit-content;
  max-width: 280px;
  font-family: var(--font-cn);
  font-size: 14px;
  color: var(--ink-secondary);
  font-weight: 300;
  letter-spacing: 0.02em;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.04);
}

.home__quote-attr {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.home__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.board-entry {
  position: relative;
  padding: 56px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-primary);
  border-right: 1px solid var(--line-standard);
  border-bottom: 1px solid var(--line-standard);
  cursor: pointer;
  transition: background var(--dur-normal) var(--ease-out);
  text-decoration: none;
  color: inherit;
  min-height: 280px;
}

.board-entry:nth-child(2n) {
  border-right: none;
}

.board-entry:nth-last-child(-n+2) {
  border-bottom: none;
}

.board-entry:hover {
  background: var(--bg-secondary);
}

.board-entry__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
  transition: color var(--dur-fast) var(--ease-out);
}

.board-entry:hover .board-entry__num {
  color: var(--brand-blue);
}

.board-entry__divider {
  width: 24px;
  height: 1px;
  background: var(--line-strong);
  transition: all var(--dur-fast) var(--ease-out);
}

.board-entry:hover .board-entry__divider {
  background: var(--brand-blue);
  width: 40px;
}

.board-entry__title-cn {
  font-family: var(--font-cn);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 8px;
}

.board-entry__title-en {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-tertiary);
  letter-spacing: 0.02em;
}

.board-entry__subtitle {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-secondary);
  margin-top: 8px;
}

.board-entry__footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.board-entry__chevron {
  display: inline-block;
  margin-left: 4px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.board-entry:hover .board-entry__chevron {
  transform: translateX(4px);
  color: var(--brand-blue);
}

.home__footer {
  padding: 32px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid var(--line-standard);
}

/* =========================================================================
   通用 Page Wrapper (4 个看板的外壳)
   ========================================================================= */

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.page__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--line-standard);
}

.page__toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page__toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page__title {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-primary);
}

.page__title-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brand-blue);
  margin-right: 8px;
  letter-spacing: 0.04em;
}

.page__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: 32px;
}

.page__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-standard);
}

.section-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
}

/* =========================================================================
   Empty State
   ========================================================================= */

.empty {
  padding: 64px 32px;
  text-align: center;
  color: var(--ink-tertiary);
}

.empty__title {
  font-family: var(--font-cn);
  font-size: 15px;
  color: var(--ink-secondary);
  margin-bottom: 8px;
}

.empty__hint {
  font-size: 13px;
  color: var(--ink-tertiary);
}

/* =========================================================================
   List (通用，01 / 02 / 04 都用)
   ========================================================================= */

.entity-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--line-standard);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.entity-list__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-weak);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.entity-list__item:last-child {
  border-bottom: none;
}

.entity-list__item:hover {
  background: var(--bg-secondary);
}

.entity-list__item.is-active {
  background: var(--brand-blue-faint);
}

.entity-list__item-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-tertiary);
}

.entity-list__item-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-primary);
}

.entity-list__item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

.entity-list__item-meta span + span::before {
  content: "·";
  margin-right: 12px;
  color: var(--ink-disabled);
}

/* 删除按钮：默认隐藏，hover 整行时淡入 */
.entity-list__item-del {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-left: 4px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.entity-list__item:hover .entity-list__item-del { opacity: 1; }
.entity-list__item-del:hover {
  background: rgba(184, 80, 61, 0.08);  /* 朱砂淡底 */
  color: #b8503d;
  border-color: rgba(184, 80, 61, 0.22);
}

/* =========================================================================
   01 看板 · 五步螺旋 Detail
   ========================================================================= */

.spiral-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

.spiral-stage {
  position: relative;
  height: 62vh;
  min-height: 480px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--line-standard);
  overflow: hidden;
}

/* === 全屏极简视图：书页米白 + 黑色手绘 === */
.spiral-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  /* 基底色：淡米白书页色（对标达利奥《原则》中文版纸张）+ 中心柔光 + 四角微暗 */
  background-color: #F2EBDA;
  background-image:
    radial-gradient(ellipse at 50% 42%, rgba(255, 250, 235, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 70%, rgba(100, 80, 50, 0.08) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
}

.spiral-fullscreen__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: auto;              /* 保留 scrollLeft/Top 给 pan 用，下面隐藏视觉 scrollbar */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge legacy */
}
.spiral-fullscreen__stage::-webkit-scrollbar {
  display: none;               /* Chrome / Safari / Edge */
}

.spiral-fullscreen__title {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 110;
  font: 500 14px/1.6 var(--font-zh, "Noto Sans SC"), system-ui;
  color: rgba(26, 26, 26, 0.55);
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* 当前 active step 箭头：朱红 pulse 闪烁，吸引点击 */
@keyframes spiralActivePulse {
  0%, 100% { fill: #DCD5C2; }
  50%      { fill: #C73852; }
}

.spiral-arrow--active {
  animation: spiralActivePulse 1.4s ease-in-out infinite;
  cursor: pointer;
}

.spiral-arrow--active:hover {
  animation: none;
  fill: #C73852;
}

.spiral-fullscreen__back {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 101;
  padding: 8px 16px;
  background: rgba(255, 252, 245, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(60, 50, 35, 0.22);
  border-radius: var(--radius-sm);
  font-family: var(--font-cn);
  font-size: 13px;
  color: #3C3225;
  text-decoration: none;
  transition: all var(--dur-fast);
}

.spiral-fullscreen__back:hover {
  color: #1A1A1A;
  border-color: rgba(26, 26, 26, 0.50);
  background: rgba(255, 254, 250, 0.96);
}

/* =========================================================================
   Spiral · 箭头 hover 虚影标签（跟随鼠标）
   ========================================================================= */
.spiral-tip {
  position: fixed;
  z-index: 200;
  padding: 5px 10px;
  background: rgba(255, 253, 245, 0.92);
  border: 1px solid rgba(199, 56, 82, 0.35);
  color: #1A1A1A;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .14s ease-out, transform .14s ease-out;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px -6px rgba(199, 56, 82, 0.45);
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spiral-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   Spiral · toolbar 分隔线（在 spiral.js 内 toolbar 已用 .spiral-toolbar 样式）
   横排版本：竖线分隔
   ========================================================================= */
.spiral-toolbar__sep {
  width: 1px;
  height: auto;
  align-self: stretch;
  background: #1A1A1A;
  margin: 0;
}

/* =========================================================================
   Spiral · 左侧迭代档案抽屉（米白手绘风 · 与 spiral 黑红主题统一）
   ========================================================================= */
.spiral-ledger-backdrop {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(20, 16, 12, 0.14);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease-out;
}
.spiral-ledger-backdrop.is-visible {
  opacity: 1;
  pointer-events: all;
}

.spiral-ledger {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  z-index: 106;
  /* 跟 spiral-fullscreen 同款米白纸张底色 */
  background:
    radial-gradient(ellipse at 50% -10%, rgba(199, 56, 82, 0.06), transparent 70%),
    linear-gradient(180deg, #fffefa 0%, #faf6ec 100%);
  border-right: 1.5px solid var(--ink-primary, #1A1A1A);
  box-shadow: 4px 0 24px -12px rgba(15, 20, 25, 0.45);
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
}
.spiral-ledger.is-open { transform: translateX(0); }

.spiral-ledger__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px 22px 14px;
  border-bottom: 1.5px solid var(--ink-primary, #1A1A1A);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent);
}
.spiral-ledger__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spiral-ledger__cn {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-primary, #1A1A1A);
  line-height: 1;
}
.spiral-ledger__en {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--vermilion, #C73852);
  text-transform: uppercase;
}
.spiral-ledger__close {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ink-primary, #1A1A1A);
  color: var(--ink-primary, #1A1A1A);
  font-size: 18px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.spiral-ledger__close:hover {
  background: var(--ink-primary, #1A1A1A);
  color: #fffefa;
}

.spiral-ledger__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 80px;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 20, 25, 0.35) transparent;
}
.spiral-ledger__body::-webkit-scrollbar { width: 6px; }
.spiral-ledger__body::-webkit-scrollbar-thumb { background: rgba(15, 20, 25, 0.35); }

.spiral-ledger__empty {
  padding: 40px 12px;
  text-align: center;
  font-size: 13px;
  color: rgba(15, 20, 25, 0.5);
  letter-spacing: 0.06em;
}

/* === Cycle 卡片 === */
.ledger-cycle {
  margin-bottom: 18px;
  border: 1px solid var(--ink-primary, #1A1A1A);
  background: rgba(255, 254, 250, 0.7);
}
.ledger-cycle.is-current {
  border-color: var(--vermilion, #C73852);
  box-shadow: 3px 3px 0 0 rgba(199, 56, 82, 0.18);
}
.ledger-cycle__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(15, 20, 25, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent);
}
.ledger-cycle.is-current .ledger-cycle__meta {
  background: linear-gradient(180deg, rgba(199, 56, 82, 0.08), transparent);
  border-bottom-color: rgba(199, 56, 82, 0.32);
}
.ledger-cycle__num {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-primary, #1A1A1A);
}
.ledger-cycle.is-current .ledger-cycle__num { color: var(--vermilion, #C73852); }
.ledger-cycle__progress {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(15, 20, 25, 0.6);
}
.ledger-cycle__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(15, 20, 25, 0.45);
}

/* === Step 列表 === */
.ledger-cycle__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ledger-step {
  position: relative;
  padding: 10px 14px 10px 38px;
  border-bottom: 1px dashed rgba(15, 20, 25, 0.14);
  cursor: pointer;
  transition: background .15s;
}
.ledger-step:last-child { border-bottom: 0; }
.ledger-step:hover { background: rgba(199, 56, 82, 0.06); }

.ledger-step__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.ledger-step__roman {
  position: absolute;
  left: 14px;
  top: 11px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--vermilion, #C73852);
  letter-spacing: 0.04em;
  line-height: 1;
  min-width: 18px;
}
.ledger-step__label {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-primary, #1A1A1A);
}
.ledger-step__title {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 12px;
  color: rgba(15, 20, 25, 0.7);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger-step__content {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(15, 20, 25, 0.85);
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ledger-step__empty {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(15, 20, 25, 0.35);
}

.spiral-stage__canvas,
.spiral-stage__svg-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.spiral-svg {
  display: block;
  font-family: var(--font-cn), sans-serif;
}

.spiral-svg__cycle {
  transition: stroke 600ms var(--ease-out), stroke-width 600ms var(--ease-out);
}

.spiral-svg__node {
  transition: transform 240ms var(--ease-out);
}

.spiral-svg__node:hover {
  transform-origin: center;
}

.spiral-svg__node:hover .spiral-svg__node-dot {
  transform: scale(1.2);
  transform-origin: center;
}

.spiral-stage__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spiral-label {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  font-family: var(--font-cn);
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.spiral-label:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.spiral-label__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--vermilion);
  letter-spacing: 0.1em;
}

.spiral-label__text {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-primary);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-weak);
}

.spiral-label.is-current .spiral-label__text {
  background: var(--ink-primary);
  color: var(--ink-inverse);
  border-color: var(--ink-primary);
}

.spiral-label.is-current .spiral-label__num {
  color: var(--ink-primary);
  font-weight: 700;
}

.spiral-label.is-done .spiral-label__num {
  color: var(--ink-tertiary);
}

.spiral-label.is-done .spiral-label__text {
  color: var(--ink-tertiary);
  background: var(--bg-tertiary);
}

.spiral-stage__hint {
  position: absolute;
  left: 24px;
  bottom: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

.spiral-stage__cycle {
  position: absolute;
  right: 24px;
  top: 20px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  pointer-events: none;
}

.spiral-stage__cycle-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spiral-stage__cycle-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  color: var(--vermilion);
  letter-spacing: -0.02em;
}

/* 当前步骤录入区 */

.step-input {
  padding: 32px;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

.step-input__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-standard);
}

.step-input__num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--vermilion);
  letter-spacing: 0.06em;
}

.step-input__step-name {
  font-family: var(--font-cn);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-primary);
}

.step-input__question {
  font-family: var(--font-cn);
  font-size: 15px;
  color: var(--ink-secondary);
  font-weight: 400;
}

.step-input__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.step-input__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =========================================================================
   02 看板 · 工作流档案
   ========================================================================= */

.playbook-doc {
  padding: 40px;
  background: var(--bg-primary);
  border: 1px solid var(--line-standard);
  border-radius: var(--radius-md);
}

.playbook-doc__title {
  font-family: var(--font-cn);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-primary);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.playbook-doc__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.playbook-doc__lede {
  font-family: var(--font-cn);
  font-size: 15px;
  color: var(--ink-secondary);
  line-height: 1.7;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border-left: 2px solid var(--brand-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 32px;
}

/* === 档案标题输入框 === */
.playbook-doc__title-input {
  display: block;
  width: 100%;
  font-family: var(--font-cn);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-primary);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  border: none;
  background: transparent;
  outline: none;
  padding: 4px 0;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s ease-out;
}

.playbook-doc__title-input:hover {
  border-bottom-color: var(--line-standard);
}

.playbook-doc__title-input:focus {
  border-bottom-color: var(--vermilion);
}

/* === 详情页全屏布局：左 sidebar + 右主编辑区 紧贴 === */
.playbook-detail-page .playbook-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
  overflow: hidden;
  /* 极淡点阵背景纹理 */
  background:
    radial-gradient(rgba(80, 80, 80, 0.06) 1px, transparent 1px) 0 0 / 14px 14px,
    #f5f5f5;
}

.playbook-tree--vertical {
  background:
    radial-gradient(rgba(80, 80, 80, 0.05) 1px, transparent 1px) 0 0 / 14px 14px,
    #ededed;
  border-right: 1px solid #d8d8d8;
  padding: 18px 12px;
  overflow-y: auto;
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.025);
}

.playbook-main {
  overflow-y: auto;
  padding: 28px 32px 60px;
  background:
    radial-gradient(rgba(80, 80, 80, 0.045) 1px, transparent 1px) 0 0 / 14px 14px,
    #f5f5f5;
}

.playbook-main .playbook-doc {
  max-width: none;          /* 撑满 main，不再居中 */
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* === 树状流程图基础样式 === */
.playbook-tree__header {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 14px;
  padding: 0 4px;
}

/* === 竖向 tree：节点 + 竖线 connector === */
.playbook-tree--vertical .playbook-tree__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.playbook-tree--vertical .playbook-tree__node {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;                /* 撑满 sidebar 内容区 */
  padding: 10px 12px;
  background: linear-gradient(135deg, #ffffff, #ededec);
  border: 1px solid #d8d8d8;
  cursor: pointer;
  transition: all .15s ease-out;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.04);
  position: relative;
  margin-bottom: 14px;        /* 节点间空出竖线位置 */
}

/* 竖线 connector：除最后一个节点外 */
.playbook-tree--vertical .playbook-tree__node:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 100%;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, #b8b8b8, #d8d8d8);
}

.playbook-tree--vertical .playbook-tree__node:hover {
  border-color: var(--vermilion);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 2px 8px rgba(165, 50, 50, 0.2);
  transform: translateX(3px);
}

.playbook-tree__node-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.playbook-tree__node-name {
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-primary);
  line-height: 1.35;
  word-break: break-word;
}

.playbook-tree__empty {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-disabled);
  text-align: center;
  padding: 24px 8px;
}

/* === 步骤瓷砖：大理石质感 === */
.playbook-step--tile {
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 55%, #f1f1f0 100%);
  border: 1px solid #e6e6e6;
  border-radius: 0;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    inset -1px -1px 2px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow .25s ease-out;
}

.playbook-step--tile.is-flash {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 0 0 2px var(--vermilion),
    0 6px 20px rgba(165, 50, 50, 0.22);
}

.playbook-step__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.playbook-step__num-box {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #ffffff, #ededec);
  border: 1px solid #d8d8d8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
  transition: all .15s ease-out;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.05);
}

.playbook-step__num-box:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  background: linear-gradient(135deg, #fff, #fdf0f0);
}

.playbook-step__title-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d8d8d8;
  padding: 7px 12px;
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
  background: #ffffff;
  outline: none;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 1);
  transition: border-color .15s ease-out;
}

.playbook-step__title-input::placeholder {
  color: var(--ink-disabled);
  font-weight: 400;
}

.playbook-step__title-input:focus {
  border-color: var(--vermilion);
}

/* === step head 控制按钮组：↑ ↓ × === */
.playbook-step__ctrls {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
}

.playbook-step__btn {
  width: 28px;
  height: 28px;
  border: 1px solid #d8d8d8;
  background: linear-gradient(135deg, #ffffff, #ededec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 1);
  transition: all .15s ease-out;
}

.playbook-step__btn:hover:not(:disabled) {
  border-color: var(--ink-primary);
  color: var(--ink-primary);
  background: linear-gradient(135deg, #fff, #e6e6e6);
}

.playbook-step__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.playbook-step__btn--del {
  font-size: 18px;
}

.playbook-step__btn--del:hover:not(:disabled) {
  border-color: var(--vermilion);
  color: var(--vermilion);
  background: linear-gradient(135deg, #fff, #fdf0f0);
}

.playbook-step__body {
  display: block;
  width: 100%;
  min-height: 110px;
  border: 1px solid #e0e0e0;
  padding: 12px 14px;
  font-family: var(--font-cn);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-primary);
  background: #fefefe;
  resize: none;               /* 去掉右下角小手柄 */
  outline: none;
  border-radius: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color .15s ease-out, min-height .2s ease-out;
}

/* focus 时自动放大可见区域 */
.playbook-step__body:focus {
  min-height: 200px;
}

.playbook-step__body::placeholder {
  color: var(--ink-disabled);
}

.playbook-step__body:focus {
  border-color: var(--vermilion);
}

/* =========================================================================
   03 看板 · 原则层级网络 (Canvas)
   ========================================================================= */

.graph-page {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.graph-canvas {
  flex: 1;
  position: relative;
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg-secondary);
  overflow: hidden;
  cursor: grab;
}

.graph-canvas.is-panning {
  cursor: grabbing;
}

.graph-canvas__world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.graph-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.graph-edge {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  fill: none;
  transition: stroke var(--dur-fast) var(--ease-out);
}

.graph-edge.is-highlight {
  stroke: var(--brand-blue);
}

.graph-node {
  position: absolute;
  min-width: 140px;
  padding: 12px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--line-standard);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  font-family: var(--font-cn);
}

.graph-node:hover {
  border-color: var(--brand-blue);
}

.graph-node.is-selected {
  border-color: var(--brand-blue);
  border-width: 2px;
  background: var(--brand-blue-faint);
  padding: 11px 15px;
}

.graph-node.is-root {
  background: var(--ink-primary);
  color: var(--ink-inverse);
  border-color: var(--ink-primary);
}

.graph-node__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: inherit;
}

.graph-node__tag {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.graph-node.is-root .graph-node__tag {
  color: rgba(255, 255, 255, 0.5);
}

.graph-toolbar {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  gap: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--line-standard);
  border-radius: var(--radius-md);
  padding: 4px;
  z-index: 5;
}

.graph-zoom-info {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  background: var(--bg-primary);
  padding: 4px 10px;
  border: 1px solid var(--line-standard);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.graph-detail {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 360px;
  max-height: calc(100% - 32px);
  background: var(--bg-primary);
  border: 1px solid var(--line-standard);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.graph-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-standard);
}

.graph-detail__title {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-primary);
}

.graph-detail__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.graph-detail__content {
  font-family: var(--font-cn);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-secondary);
}

.graph-detail__content h1,
.graph-detail__content h2,
.graph-detail__content h3 {
  color: var(--ink-primary);
  margin: 16px 0 8px;
  font-weight: 500;
}

.graph-detail__content h2 {
  font-size: 15px;
}

.graph-detail__content h3 {
  font-size: 13px;
  color: var(--ink-secondary);
}

.graph-detail__content p {
  margin: 8px 0;
}

.graph-detail__content ul,
.graph-detail__content ol {
  padding-left: 20px;
  margin: 8px 0;
}

.graph-detail__content code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--vermilion);
}

.graph-detail__content blockquote {
  border-left: 2px solid var(--brand-blue);
  padding: 4px 0 4px 12px;
  margin: 8px 0;
  color: var(--ink-secondary);
}

/* =========================================================================
   04 看板 · 可信度加权决策
   ========================================================================= */

/* === 加权汇总卡：按分级变色（绿/黄/红/灰）=== */
.decision-summary {
  display: grid;
  grid-template-columns: 6px 1fr;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 55%, #f1f1f0 100%);
  border: 1px solid #e0e0e0;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 2px 6px rgba(0, 0, 0, 0.05);
}

.decision-summary--go      { --sum-accent: #4a9d6f; }
.decision-summary--wait    { --sum-accent: #d49c3d; }
.decision-summary--stop    { --sum-accent: #c44e4e; }
.decision-summary--neutral { --sum-accent: #999;    }

.decision-summary__indicator {
  background: var(--sum-accent, #999);
  box-shadow: inset -1px 0 2px rgba(0, 0, 0, 0.15);
}

.decision-summary__body {
  padding: 20px 28px;
}

.decision-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebebeb;
}

.decision-summary__title {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-primary);
}

.decision-summary__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

.decision-summary__main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.decision-summary__score {
  text-align: center;
  padding-right: 24px;
  border-right: 1px solid #ebebeb;
}

.decision-summary__score-num {
  font-family: var(--font-mono);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--sum-accent);
  letter-spacing: -0.02em;
}

.decision-summary__score-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
}

.decision-summary__verdict {
  /* 重置原有样式 */
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.decision-summary__verdict-label {
  font-family: var(--font-cn);
  font-size: 20px;
  font-weight: 700;
  color: var(--sum-accent);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.decision-summary__verdict-hint {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-tertiary);
}

.decision-summary__split {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-secondary);
}

.decision-summary__split-item b {
  font-weight: 500;
  color: var(--ink-tertiary);
  margin-right: 4px;
}

/* === 意见卡（瓷砖 + 左色条 + 删除） === */
.opinion-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.opinion-card {
  padding: 14px 18px 14px 14px;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 55%, #f1f1f0 100%);
  border: 1px solid #e0e0e0;
  border-left: 4px solid var(--op-accent, #999);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(0, 0, 0, 0.03);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}

.opinion-card--accept { --op-accent: #4a9d6f; }
.opinion-card--reject { --op-accent: #c44e4e; }

.opinion-card:hover {
  transform: translateX(2px);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 3px 10px rgba(0, 0, 0, 0.06);
}

.opinion-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.opinion-card__stance {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 0;
  border: 1px solid var(--op-accent);
  color: var(--op-accent);
  background: rgba(255, 255, 255, 0.6);
}

.opinion-card__scores {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
}

.opinion-card__scores b {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-primary);
}

.opinion-card__pct {
  color: var(--ink-tertiary);
  font-size: 11px;
}

.opinion-card__del {
  width: 24px;
  height: 24px;
  border: 1px solid #d8d8d8;
  background: linear-gradient(135deg, #fff, #ededec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  border-radius: 0;
  margin-left: 8px;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 1);
  transition: all .15s ease-out;
}

.opinion-card__del:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  background: linear-gradient(135deg, #fff, #fdf0f0);
}

.opinion-card__text {
  font-family: var(--font-cn);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-secondary);
  margin: 0;
  padding-left: 0;
}

/* === 录入意见表单（瓷砖底） === */
.opinion-form {
  padding: 18px 22px;
  background: linear-gradient(135deg, #ffffff, #f4f4f3);
  border: 1px solid #d8d8d8;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    inset -1px -1px 2px rgba(0, 0, 0, 0.03);
}

.opinion-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr 100px 100px;
  gap: 12px;
}

/* 新版 row：分数 / 权重 / stance toggle */
.opinion-form__row--new {
  grid-template-columns: 1fr 1fr 1.4fr;
}

.opinion-form__row--stance {
  display: flex;
  gap: 8px;
}

/* === stance toggle：未选灰白，选中绿/红实色 === */
.stance-toggle {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #d0d0d0;
  background: linear-gradient(135deg, #ffffff, #ededec);
  border-radius: 0;
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all .15s ease-out;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 1);
}

.stance-toggle--accept:hover { border-color: #4a9d6f; color: #4a9d6f; }
.stance-toggle--reject:hover { border-color: #c44e4e; color: #c44e4e; }

.stance-toggle.is-active.stance-toggle--accept {
  border-color: #3d8a5e;
  background: linear-gradient(135deg, #5db884, #3d8a5e);
  color: #fff;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(74, 157, 111, 0.35);
}

.stance-toggle.is-active.stance-toggle--reject {
  border-color: #a83a3a;
  background: linear-gradient(135deg, #d65c5c, #a83a3a);
  color: #fff;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(196, 78, 78, 0.35);
}

/* =========================================================================
   Opinion Form v2 · segmented control（坚决度 1-5星 + 可信度 6 档 %）
   ========================================================================= */

.opinion-form__title {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.opinion-form__seg-group {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 14px;
}

.opinion-form__seg-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.opinion-form__seg {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.opinion-form__seg--cred {
  grid-template-columns: repeat(6, 1fr);
}

.seg-btn {
  padding: 8px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
  background: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all .12s ease-out;
  user-select: none;
  letter-spacing: 0.02em;
  line-height: 1;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.seg-btn:hover {
  border-color: var(--ink-primary);
  color: var(--ink-primary);
  background: #fafafa;
}

.seg-btn--conv {
  color: #d0d0d0;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.seg-btn--conv:hover { color: #d4a017; }

.seg-btn--conv.is-active {
  background: linear-gradient(180deg, #fff7e0, #f5dc8e);
  border-color: #c89a1a;
  color: #8a6210;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 5px rgba(200, 154, 26, 0.25);
}

.seg-btn--cred.is-active {
  background: linear-gradient(180deg, #e9f1ff, #b8d4ff);
  border-color: #3870c4;
  color: #1d4889;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 5px rgba(56, 112, 196, 0.25);
}

/* =========================================================================
   Opinion Card v2 · 显示 stance / stars / cred% / power
   ========================================================================= */

.op-stars {
  display: inline-flex;
  gap: 1px;
  align-items: center;
}

.op-star {
  font-size: 13px;
  color: #d8d8d8;
  line-height: 1;
}

.op-star.is-on {
  color: #c89a1a;
}

.op-sep {
  color: var(--ink-tertiary);
  font-size: 10px;
}

.op-cred {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: #1d4889;
  letter-spacing: 0.02em;
}

.op-share {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.02em;
}

.op-share b {
  font-weight: 700;
  color: var(--ink-primary);
}

.op-source {
  font-family: var(--font-cn);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-secondary);
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-xs);
  letter-spacing: 0.02em;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opinion-card__edit {
  width: 24px;
  height: 24px;
  border: 1px solid #d8d8d8;
  border-radius: var(--radius-xs);
  background: #ffffff;
  color: var(--ink-tertiary);
  font-size: 14px;
  font-family: var(--font-mono);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease-out;
}
.opinion-card__edit:hover {
  border-color: var(--brand-blue, #3870c4);
  color: var(--brand-blue, #3870c4);
  background: #f5f8ff;
}

/* 编辑模式下的表单：左侧加蓝色色带提示 */
.opinion-form--editing {
  border-left: 3px solid var(--brand-blue, #3870c4);
  background: linear-gradient(135deg, #f9fbff, #f1f5fb);
}

/* =========================================================================
   Modal
   ========================================================================= */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.32);
  backdrop-filter: blur(4px);
}

.modal__card {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--line-standard);
  border-radius: var(--radius-lg);
  width: min(560px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-standard);
}

.modal__title {
  font-family: var(--font-cn);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-primary);
}

.modal__body {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--line-standard);
  background: var(--bg-secondary);
}

.icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--ink-tertiary);
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease-out);
}

.icon-btn:hover {
  background: var(--bg-tertiary);
  color: var(--ink-primary);
}

/* =========================================================================
   Toast 通知
   ========================================================================= */

.toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--ink-primary);
  color: var(--ink-inverse);
  border-radius: var(--radius-md);
  font-size: 13px;
  animation: toastIn 240ms var(--ease-out);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Animations · 全局
   ========================================================================= */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

.fade-in { animation: fadeIn var(--dur-normal) var(--ease-out); }
.slide-up { animation: slideUp var(--dur-normal) var(--ease-out); }

/* =========================================================================
   Finance · 财务系统（外页 + 财务决策内页 + 双圆柱）
   ========================================================================= */

.page--finance {
  background: #fafaf7;
  min-height: 100vh;
}

/* ---- 外页 toolbar ---- */
.finance-home__toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 24px 32px;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  border-bottom: 1px solid var(--line-standard);
}

.finance-home__title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-self: center;
  font-family: var(--font-cn);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-primary);
}

.finance-home__title-icon svg {
  width: 36px;
  height: 22px;
  display: block;
}

.finance-home__title-en {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

/* 右上角 + 按钮（直角硬阴影） */
.finance-home__add {
  width: 44px;
  height: 44px;
  border: 1.5px solid #1a1a1a;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.08);
  transition: all .14s ease-out;
}

.finance-home__add:hover {
  background: #b84a55;
  color: #fff;
  border-color: #8b3838;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 rgba(184, 74, 85, 0.30);
}

.finance-home__add:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.20);
}

/* 外页 body */
.finance-home__body {
  padding: 40px 32px;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

/* 空态 */
.finance-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 32px;
  text-align: center;
}

.finance-empty__icon {
  width: 120px;
  height: 72px;
  margin-bottom: 8px;
}

.finance-empty__icon polygon {
  fill: none;
  stroke: var(--ink-tertiary);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.finance-empty__title {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-secondary);
  margin: 0;
}

.finance-empty__hint {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-tertiary);
  margin: 0;
}

.finance-empty__hint b {
  color: #b84a55;
  font-weight: 700;
}

/* 看板网格 */
.finance-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.finance-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.05);
  transition: transform .14s ease-out, box-shadow .14s ease-out;
}

.finance-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 rgba(184, 74, 85, 0.20);
}

.finance-card__type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}

.finance-card__item {
  font-family: var(--font-cn);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.35;
}

.finance-card__meta {
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
}

/* 双行 fill bar：拒 / 接 各自独立显示 0~100% fill */
.finance-card__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
}

.finance-card__bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
}

.finance-card__bar-label {
  width: 14px;
  text-align: center;
  font-family: var(--font-cn);
  font-size: 11px;
  font-weight: 700;
}

.finance-card__bar-label--rej { color: #8b3838; }
.finance-card__bar-label--acc { color: #1d5a3e; }

.finance-card__bar-track {
  flex: 1;
  height: 8px;
  background: #f5f5f0;
  border: 1px solid #1a1a1a;
  overflow: hidden;
}

.finance-card__bar-fill {
  height: 100%;
  transition: width .25s ease-out;
}

.finance-card__bar-fill--rej { background: #c44e4e; }
.finance-card__bar-fill--acc { background: #2d8659; }

.finance-card__bar-pct {
  width: 36px;
  text-align: right;
  font-weight: 600;
  color: var(--ink-secondary);
}

.finance-card__verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-secondary);
  padding-top: 4px;
  border-top: 1px dashed var(--line-weak);
}

.finance-card--go .finance-card__verdict { color: #1d5a3e; font-weight: 600; }
.finance-card--stop .finance-card__verdict { color: #8b3838; font-weight: 600; }

.finance-card__del {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: all .12s ease-out;
}

.finance-card:hover .finance-card__del { opacity: 1; }
.finance-card__del:hover { color: #c44e4e; }

/* ---- 财务决策内页：双圆柱舞台 ---- */
.finance-decision {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cyl-stage {
  padding: 36px 32px 44px;
  background: #ffffff;
  border: 1px solid var(--line-standard);
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.04);
}

/* 三栏 flex：两侧圆柱 flex:1 占满，中间物品面板固定宽 */
.cyl-pair {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 32px;
  min-height: 540px;
}

.cyl {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 200px;
  max-width: 340px;
}

.cyl__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.cyl__label {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-primary);
}

.cyl--reject .cyl__label { color: #8b3838; }
.cyl--accept .cyl__label { color: #1d5a3e; }

.cyl__pct {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: 0.02em;
}

.cyl--reject .cyl__pct { color: #c44e4e; }
.cyl--accept .cyl__pct { color: #2d8659; }

/* 圆柱本身：占满柱位高度，宽度自适应（图1 那种粗大柱） */
.cyl__svg {
  width: 100%;
  flex: 1;
  min-height: 0;
  height: auto;
  max-width: 280px;
  display: block;
}

.cyl__foot {
  margin-top: 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
}

.cyl__foot b {
  font-size: 16px;
  color: var(--ink-primary);
}

.cyl--reject .cyl__foot b { color: #8b3838; }
.cyl--accept .cyl__foot b { color: #1d5a3e; }

.cyl__foot-sep {
  opacity: 0.5;
}

/* ---- 中央物品面板：物品名为主体（contenteditable） ---- */
.cyl-mid {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 22px 20px 24px;
  background: #faf8f3;
  border: 1px solid var(--line-strong);
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.05);
  align-self: stretch;
}

.cyl-mid__cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  text-align: center;
}

/* 物品名：大字 + 可编辑（点一下虚线框、focus 实线框） */
.cyl-mid__item {
  font-family: var(--font-cn);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--ink-primary);
  text-align: center;
  padding: 10px 12px;
  margin: 0;
  border: 1.5px dashed transparent;
  border-radius: 0;
  background: transparent;
  cursor: text;
  outline: none;
  word-break: break-word;
  min-height: 1.5em;
  transition: border-color .14s ease-out, background .14s ease-out, box-shadow .14s ease-out;
}

.cyl-mid__item:hover {
  border-color: var(--line-weak);
  background: rgba(0, 0, 0, 0.025);
}

.cyl-mid__item:focus {
  border-style: solid;
  border-color: #b84a55;
  background: #fff;
  box-shadow: 3px 3px 0 0 rgba(184, 74, 85, 0.18);
}

.cyl-mid__sep {
  height: 1px;
  background: var(--line-weak);
  margin: 4px 8px;
}

.cyl-mid__verdict {
  text-align: center;
  padding: 10px 14px;
  border: 1.5px solid #1a1a1a;
  background: #fff;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.08);
}

.cyl-mid__verdict--go {
  border-color: #1d5a3e;
  color: #1d5a3e;
  box-shadow: 3px 3px 0 0 rgba(29, 90, 62, 0.20);
}

.cyl-mid__verdict--stop {
  border-color: #8b3838;
  color: #8b3838;
  box-shadow: 3px 3px 0 0 rgba(139, 56, 56, 0.20);
}

.cyl-mid__verdict--wait {
  border-color: #8a6d3b;
  color: #8a6d3b;
  box-shadow: 3px 3px 0 0 rgba(138, 109, 59, 0.20);
}

.cyl-mid__verdict--neutral {
  border-color: var(--line-strong);
  color: var(--ink-tertiary);
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.06);
}

.cyl-mid__verdict-label {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cyl-mid__verdict-hint {
  margin-top: 4px;
  font-family: var(--font-cn);
  font-size: 11px;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.cyl-mid__split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 600;
}

.cyl-mid__pct--rej { color: #c44e4e; }
.cyl-mid__pct--acc { color: #2d8659; }
.cyl-mid__pct-sep { color: var(--ink-tertiary); font-weight: 300; }

/* Top-K 精英共识区块（中间面板底部） */
.cyl-mid__top {
  text-align: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px dashed var(--line-strong);
}

.cyl-mid__top-cap {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 6px;
}

.cyl-mid__top-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}

.cyl-mid__score {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cyl-mid__score--rej { color: #c44e4e; }
.cyl-mid__score--acc { color: #2d8659; }

.cyl-mid__vs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
}

.cyl-mid__top-hint {
  font-family: var(--font-cn);
  font-size: 10px;
  color: var(--ink-tertiary);
  opacity: 0.7;
}

/* 圆柱底部：Top-K 票位 chip + 评分 meta */
.cyl__chips {
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 6px;
}

.cyl__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 22px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border: 1.5px solid #1a1a1a;
  border-radius: 0;
  letter-spacing: 0.02em;
}

.cyl__chip--reject {
  background: #c44e4e;
  border-color: #8b3838;
  box-shadow: 2px 2px 0 0 rgba(139, 56, 56, 0.25);
}

.cyl__chip--accept {
  background: #2d8659;
  border-color: #1d5a3e;
  box-shadow: 2px 2px 0 0 rgba(29, 90, 62, 0.25);
}

.cyl__chip--empty {
  background: transparent;
  color: var(--ink-tertiary);
  border-color: var(--line-weak);
  border-style: dashed;
  box-shadow: none;
  font-weight: 300;
}

.cyl__foot-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-tertiary);
}

.cyl__foot-meta b {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-primary);
  font-weight: 700;
}

.cyl--reject .cyl__foot-meta b { color: #8b3838; }
.cyl--accept .cyl__foot-meta b { color: #1d5a3e; }

/* opinion-card: 精英 / 落选徽章 + 落选弱化 */
.op-elite {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #b8860b;
  background: #fffaeb;
  border: 1px solid #d4a83c;
  border-radius: 0;
}

.op-out {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  background: #f4f4f1;
  border: 1px dashed var(--line-weak);
  border-radius: 0;
}

.opinion-card--out {
  opacity: 0.55;
}

.opinion-card--out:hover {
  opacity: 0.85;
}

.opinion-card--out .opinion-card__stance {
  opacity: 0.7;
}

.op-contrib {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-secondary);
}

.op-contrib b {
  color: var(--ink-primary);
  font-weight: 700;
}

.opinion-card--out .op-contrib b {
  color: var(--ink-tertiary);
}

/* === 中间面板：+ 添加考虑因素 CTA（紧贴物品名下方） === */
.cyl-mid__add {
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  background: #fffae0;
  border: 1.5px solid #1a1a1a;
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.08);
  transition: transform .12s ease-out, box-shadow .12s ease-out, background .14s ease-out;
}

.cyl-mid__add:hover {
  background: #fff5b3;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.12);
}

.cyl-mid__add:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.10);
}

.cyl-mid__add-plus {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #b8860b;
}

.cyl-mid__add-text {
  font-family: var(--font-cn);
}

/* === 悬浮表单（modal） === */
.opinion-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease-out, visibility .18s;
}

.opinion-overlay[hidden] {
  display: none;
}

.opinion-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.opinion-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}

/* 浮窗形态覆盖原 opinion-form 的瓷砖样式 */
.opinion-form--floating {
  position: relative;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  background: #fffefb;
  border: 1.5px solid #1a1a1a;
  box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateY(8px) scale(0.98);
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}

.opinion-overlay.is-open .opinion-form--floating {
  transform: translateY(0) scale(1);
}

.opinion-form__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-weak);
  background: #faf8f3;
}

.opinion-form__head .opinion-form__title {
  margin: 0;
  font-size: 15px;
}

.opinion-form__close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-family: var(--font-mono);
  font-weight: 300;
  color: var(--ink-tertiary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background .14s, color .14s, border-color .14s;
}

.opinion-form__close:hover {
  color: #c44e4e;
  background: #fff;
  border-color: var(--line-weak);
}

.opinion-form__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}

.opinion-form__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-weak);
  background: #fbfaf6;
}

body.no-scroll {
  overflow: hidden;
}

/* =========================================================================
   Finance 巨人存钱罐 · 外页卡片进度条 (savings-card__progress)
   ========================================================================= */

.finance-card--savings .finance-card__type {
  color: #b8860b;
}

.savings-card__progress {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.savings-card__progress-track {
  height: 10px;
  background: #f5f5f0;
  border: 1.5px solid #1a1a1a;
  overflow: hidden;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.05);
}

.savings-card__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4a83c, #b8860b);
  transition: width .4s cubic-bezier(0.16, 1, 0.3, 1);
}

.savings-card__progress-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-secondary);
}

.savings-card__saved {
  font-weight: 700;
  color: #b8860b;
  font-size: 14px;
}

.savings-card__slash {
  color: var(--ink-tertiary);
  opacity: 0.6;
}

.savings-card__target {
  color: var(--ink-tertiary);
}

.savings-card__pct {
  margin-left: auto;
  font-weight: 700;
  color: var(--ink-primary);
}

/* =========================================================================
   Finance 巨人存钱罐 · 内页（titan + pedestal + records）
   ========================================================================= */

.finance-savings {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 右上角进度药丸 */
.titan-stage__progress-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: #b8860b;
  background: #fffae0;
  border: 1.5px solid #d4a83c;
  letter-spacing: 0.04em;
  box-shadow: 2px 2px 0 0 rgba(184, 134, 11, 0.18);
}

/* 巨人舞台（巨人 + 台子的统一容器） */
.titan-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px 32px 24px;
  background: transparent;
  border: 1px solid var(--line-standard);
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.04);
  overflow: visible;
  isolation: isolate;
}

/* 旧版光晕已移除：避免巨人周围出现灰影 */
.titan-stage__halo {
  display: none;
}

/* 巨人本体：SVG 双层扫描显色（底层灰白虚像 + 上层彩色 clipPath 揭示） */
.titan-svg {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: min(540px, 42vw);
  max-height: 680px;
  height: auto;
  display: block;
  user-select: none;
  overflow: visible;
}

.titan-svg__ghost {
  filter: grayscale(1) brightness(1.42) contrast(0.78);
  opacity: 0.34;
}

.titan-svg__color {
  filter: saturate(1.15) contrast(1.06);
  opacity: 1;
}

.titan-svg__scan {
  stroke: #f0c75c;
  stroke-width: 8;
  stroke-linecap: square;
  filter: drop-shadow(0 0 10px rgba(240, 199, 92, 0.95));
  opacity: 0.95;
  stroke-dasharray: 18 10;
  animation: titanScanDash 1.1s linear infinite;
}

@keyframes titanScanDash {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -28; }
}

/* ---- 几何台子（顶面 / 主体梯形 / 底面投影） ---- */
.pedestal {
  position: relative;
  z-index: 2;
  margin-top: 0;
  width: min(560px, 100%);
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 顶面：薄长条 + 中间略浅，模拟"台面厚度" */
.pedestal__top {
  height: 12px;
  margin: 0 -10px;
  background: linear-gradient(180deg, #faf6e8 0%, #e8dcb0 100%);
  border: 1.5px solid #1a1a1a;
  border-bottom: none;
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
}

/* 主体面板：正面梯形 + 大量内容 */
.pedestal__face {
  position: relative;
  padding: 22px 24px 24px;
  background: #1a1a1a;
  color: #faf8f3;
  border: 1.5px solid #1a1a1a;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 底座投影（下面更窄一点的暗带） */
.pedestal__base {
  height: 10px;
  margin: 0 16px;
  background: linear-gradient(180deg, #0a0a0a 0%, transparent 100%);
  clip-path: polygon(6% 0, 94% 0, 88% 100%, 12% 100%);
  filter: blur(0.5px);
}

.pedestal__cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4a83c;
  text-align: center;
  margin-bottom: -4px;
}

/* 目标名：大字 + contenteditable */
.pedestal__item {
  font-family: var(--font-cn);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #faf8f3;
  text-align: center;
  padding: 8px 12px;
  margin: 0;
  border: 1.5px dashed transparent;
  cursor: text;
  outline: none;
  word-break: break-word;
  min-height: 1.5em;
  transition: border-color .14s, background .14s, box-shadow .14s;
}

.pedestal__item:hover {
  border-color: rgba(212, 168, 60, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

.pedestal__item:focus {
  border-style: solid;
  border-color: #d4a83c;
  background: rgba(255, 250, 224, 0.08);
  box-shadow: 3px 3px 0 0 rgba(212, 168, 60, 0.25);
}

/* 进度条 */
.pedestal__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pedestal__progress-track {
  height: 14px;
  background: #2a2a2a;
  border: 1.5px solid #faf8f3;
  overflow: hidden;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5);
}

.pedestal__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4a83c, #f0c75c);
  box-shadow: 0 0 10px rgba(240, 199, 92, 0.4);
  transition: width .8s cubic-bezier(0.16, 1, 0.3, 1);
}

.pedestal__progress-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(250, 248, 243, 0.7);
}

.pedestal__saved {
  font-weight: 700;
  font-size: 18px;
  color: #f0c75c;
}

.pedestal__slash {
  opacity: 0.5;
}

/* 目标金额可编辑 */
.pedestal__target {
  color: rgba(250, 248, 243, 0.9);
  cursor: text;
  outline: none;
  padding: 2px 6px;
  border: 1px dashed transparent;
  transition: border-color .14s, background .14s;
}

.pedestal__target:hover {
  border-color: rgba(212, 168, 60, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

.pedestal__target:focus {
  border-style: solid;
  border-color: #d4a83c;
  background: rgba(255, 250, 224, 0.08);
  color: #f0c75c;
}

.pedestal__pct {
  margin-left: auto;
  font-weight: 700;
  font-size: 15px;
  color: #faf8f3;
}

/* + 存入一笔 按钮 */
.pedestal__add {
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  background: #f0c75c;
  border: 1.5px solid #faf8f3;
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.30);
  transition: transform .12s, box-shadow .12s, background .14s;
}

.pedestal__add:hover {
  background: #f5d570;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.36);
}

.pedestal__add:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.30);
}

.pedestal__add-plus {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* ---- 存入记录列表 ---- */
.savings-records {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.savings-records__empty {
  padding: 28px 20px;
  text-align: center;
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-tertiary);
  background: #faf8f3;
  border: 1px dashed var(--line-weak);
}

.savings-record {
  display: grid;
  grid-template-columns: 120px 180px 1fr 28px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--line-standard);
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.03);
  transition: transform .12s, box-shadow .12s;
}

.savings-record:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.06);
}

.savings-record__amount {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: #b8860b;
  letter-spacing: 0.02em;
}

.savings-record__date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

.savings-record__note {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-secondary);
}

.savings-record__note--empty {
  color: var(--ink-tertiary);
  opacity: 0.4;
}

.savings-record__del {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-tertiary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background .14s, color .14s, border-color .14s;
}

.savings-record__del:hover {
  color: #c44e4e;
  background: #fff;
  border-color: var(--line-weak);
}

/* =========================================================================
   Finance · 价值追踪看板（精英科技风 / Executive Tech）
   外页：总控台（4 波纹水池 + 净值横条 + 消费列表）
   内页：单条消费工作台（左基础信息 / 右感受时间线）
   设计：白底 · 1px 细边 · 街霁灰冷调 · 水池颜色保留
   ========================================================================= */

/* ---- Value Tokens ---- */
:root {
  --val-bg:        #f7f8fa;          /* 页面底色 */
  --val-surface:   #ffffff;          /* 卡片底 */
  --val-line:      #e5e7eb;          /* 1px 灰边 */
  --val-line-soft: #f1f3f5;          /* 更弱边 */
  --val-ink:       #0f1419;          /* 主文字 */
  --val-ink-sec:   #475569;          /* 副文字 */
  --val-ink-mute:  #94a3b8;          /* 弱文字 / 标签 */
  --val-accent:    #1e293b;          /* 强调（深墨）*/
  --val-pos:       #047857;          /* 价值正向 翡翠 */
  --val-pos-soft:  #ecfdf5;
  --val-neg:       #b91c1c;          /* 价值负向 朱砂 */
  --val-neg-soft:  #fef2f2;
  --val-shadow:    0 1px 2px rgba(15, 20, 25, 0.04), 0 1px 3px rgba(15, 20, 25, 0.05);
  --val-shadow-md: 0 4px 12px rgba(15, 20, 25, 0.06), 0 1px 3px rgba(15, 20, 25, 0.04);
}

/* ---- 整体页面 ---- */
.page--value,
.page--value-cons {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height, 64px));
  background: var(--val-bg);
  color: var(--val-ink);
  font-family: var(--font-cn);
}

/* ---- Header（顶部白底 1px 边） ---- */
.value-head {
  background: var(--val-surface);
  border-bottom: 1px solid var(--val-line);
  padding: 22px 32px 18px;
}

.value-head__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.value-head__back {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--val-ink-sec);
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid var(--val-line);
  background: var(--val-surface);
  transition: border-color .12s, color .12s, background .12s;
  letter-spacing: 0.02em;
}
.value-head__back:hover {
  border-color: var(--val-ink-sec);
  color: var(--val-ink);
  background: var(--val-bg);
}

.value-head__title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.value-head__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--val-ink-mute);
  text-transform: uppercase;
}

.value-head__title {
  font-family: var(--font-cn);
  font-size: 22px;
  font-weight: 600;
  color: var(--val-ink);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value-head__actions {
  display: inline-flex;
  gap: 8px;
}

/* ---- 通用 value 按钮 ---- */
.value-btn {
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid var(--val-line);
  background: var(--val-surface);
  color: var(--val-ink);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all .12s ease-out;
}

.value-btn:hover {
  border-color: var(--val-accent);
  background: var(--val-bg);
}

.value-btn--primary {
  background: var(--val-accent);
  color: #ffffff;
  border-color: var(--val-accent);
}
.value-btn--primary:hover {
  background: #0f172a;
  border-color: #0f172a;
}

.value-btn--ghost {
  background: transparent;
}

.value-btn--block {
  width: 100%;
}

/* ---- Header 副 meta 行 ---- */
.value-head__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--val-line);
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--val-ink-sec);
  flex-wrap: wrap;
}

.value-head__meta-item b,
.value-head__meta-param b {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--val-ink);
  margin-right: 3px;
}

.value-head__meta-item--pos b { color: var(--val-pos); }
.value-head__meta-item--neg b { color: var(--val-neg); }
.value-head__meta-item--wait b { color: #ca8a04; }

.value-head__meta-spacer { flex: 1; }

.value-head__meta-param {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--val-ink-mute);
  letter-spacing: 0.04em;
}
.value-head__meta-param--mute {
  font-family: var(--font-cn);
  font-size: 10px;
  color: var(--val-ink-mute);
  font-style: italic;
}

/* =========================================================================
   水池区（保留原黑金/红色 · 但容器是白卡）
   ========================================================================= */

.value-pools {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  padding: 28px 32px 4px;
  align-items: stretch;
}

.value-pools--card .value-pools__group {
  background: var(--val-surface);
  border: 1px solid var(--val-line);
  box-shadow: var(--val-shadow);
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.value-pools__group-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--val-line);
}

.value-pools__group-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--val-ink-mute);
  text-transform: uppercase;
}

.value-pools__group-label {
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 600;
  color: var(--val-ink);
}

.value-pools__group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--val-ink-mute);
  letter-spacing: 0.04em;
}

.value-pools__group--gold .value-pools__group-tag { color: #c19248; }
.value-pools__group--red .value-pools__group-tag  { color: #b91c1c; }

.value-pools__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.value-pools__divider {
  width: 1px;
  background: var(--val-line);
  margin: 18px 0;
}

/* ---- 单个水池（容器变白，水池本身保留原色） ---- */
.value-pool {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.value-pool__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.value-pool__label {
  font-family: var(--font-cn);
  font-size: 12px;
  font-weight: 600;
  color: var(--val-ink);
  letter-spacing: 0.04em;
}

.value-pool__sublabel {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--val-ink-mute);
  letter-spacing: 0.06em;
}

.value-pool__tank {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 200px;
  background: #1a1410;     /* 深背景让黑金/红水池更突出 */
  border: 1px solid var(--val-line);
}

.value-pool__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 玻璃容器内框线 */
.value-pool__glass {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 0.6;
}
.value-pool__tick {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 0.4;
}

/* 液体本体（保留原色） */
.value-pool--gold .value-pool__liquid        { fill: #5a3a16; }
.value-pool--gold-bright .value-pool__liquid { fill: #8b6028; }
.value-pool--red .value-pool__liquid         { fill: #5a1818; }
.value-pool--red-deep .value-pool__liquid    { fill: #7a1c1c; }

.value-pool__wave {
  fill-opacity: 0.85;
  animation: valuePoolWave 2.4s ease-in-out infinite;
}
.value-pool__wave--1 { animation-delay: 0s; }
.value-pool__wave--2 { animation-delay: -1.2s; fill-opacity: 0.55; }

.value-pool--gold .value-pool__wave         { fill: #8b6028; }
.value-pool--gold .value-pool__wave--2      { fill: #c19248; }
.value-pool--gold-bright .value-pool__wave  { fill: #c19248; }
.value-pool--gold-bright .value-pool__wave--2 { fill: #f0c75c; }
.value-pool--red .value-pool__wave          { fill: #8b3838; }
.value-pool--red .value-pool__wave--2       { fill: #c44e4e; }
.value-pool--red-deep .value-pool__wave     { fill: #a04040; }
.value-pool--red-deep .value-pool__wave--2  { fill: #d05858; }

@keyframes valuePoolWave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.value-pool__amount {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: #f5ecd5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.02em;
  pointer-events: none;
}
.value-pool--red .value-pool__amount,
.value-pool--red-deep .value-pool__amount {
  color: #f5dadc;
}

/* =========================================================================
   整体净值（hero 横条）
   ========================================================================= */

.value-net {
  margin: 20px 32px;
  padding: 22px 28px;
  background: var(--val-surface);
  border: 1px solid var(--val-line);
  box-shadow: var(--val-shadow);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}

.value-net__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.value-net__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--val-ink-mute);
  text-transform: uppercase;
}

.value-net__label {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 600;
  color: var(--val-ink);
  letter-spacing: 0.02em;
}

.value-net__formula {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--val-ink-mute);
  letter-spacing: 0.04em;
}

.value-net__amount {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.value-net__amount--pos { color: var(--val-pos); }
.value-net__amount--neg { color: var(--val-neg); }

/* =========================================================================
   消费记录列表
   ========================================================================= */

.value-cons-list {
  padding: 8px 32px 48px;
}

.value-cons-list__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--val-line);
  margin-bottom: 16px;
}

.value-cons-list__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--val-ink-mute);
  text-transform: uppercase;
}

.value-cons-list__title {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 600;
  color: var(--val-ink);
  margin: 0;
}

.value-cons-list__empty {
  padding: 64px 20px;
  text-align: center;
  background: var(--val-surface);
  border: 1px dashed var(--val-line);
}

.value-cons-list__empty-title {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--val-ink-sec);
  margin: 0 0 6px;
}

.value-cons-list__empty-hint {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--val-ink-mute);
  margin: 0;
}

.value-cons-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* 单条消费卡片 */
.value-cons-card {
  position: relative;
  background: var(--val-surface);
  border: 1px solid var(--val-line);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}

.value-cons-card:hover {
  border-color: var(--val-accent);
  box-shadow: var(--val-shadow-md);
  transform: translateY(-1px);
}

.value-cons-card--go      { border-left: 3px solid var(--val-pos); }
.value-cons-card--stop    { border-left: 3px solid var(--val-neg); }
.value-cons-card--wait    { border-left: 3px solid #ca8a04; }
.value-cons-card--neutral { border-left: 3px solid var(--val-line); }

.value-cons-card__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.value-cons-card__item {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 600;
  color: var(--val-ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value-cons-card__del {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--val-ink-mute);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  opacity: 0;
  transition: all .12s;
}
.value-cons-card:hover .value-cons-card__del { opacity: 1; }
.value-cons-card__del:hover { color: var(--val-neg); }

.value-cons-card__amount-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.value-cons-card__amount {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--val-ink);
  letter-spacing: -0.01em;
}

.value-cons-card__forecast {
  font-family: var(--font-cn);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.value-cons-card__forecast em {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: var(--val-ink-mute);
  margin-left: 2px;
}
.value-cons-card__forecast--pos  { color: var(--val-pos); }
.value-cons-card__forecast--neg  { color: var(--val-neg); }
.value-cons-card__forecast--mute { color: var(--val-ink-mute); font-weight: 500; }

.value-cons-card__bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.value-cons-card__bar-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  font-family: var(--font-cn);
  font-size: 11px;
}

.value-cons-card__bar-label {
  font-weight: 600;
  letter-spacing: 0.04em;
}
.value-cons-card__bar-label--pos { color: var(--val-pos); }
.value-cons-card__bar-label--neg { color: var(--val-neg); }

.value-cons-card__bar-track {
  height: 6px;
  background: var(--val-bg);
  border: 1px solid var(--val-line);
}

.value-cons-card__bar-fill {
  height: 100%;
  transition: width .25s ease-out;
}
.value-cons-card__bar-fill--pos { background: var(--val-pos); }
.value-cons-card__bar-fill--neg { background: var(--val-neg); }

.value-cons-card__bar-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--val-ink-sec);
  min-width: 24px;
  text-align: right;
}

.value-cons-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px dashed var(--val-line);
  font-family: var(--font-cn);
  font-size: 11px;
  gap: 8px;
}

.value-cons-card__verdict {
  font-weight: 600;
  letter-spacing: 0.04em;
}
.value-cons-card--go .value-cons-card__verdict   { color: var(--val-pos); }
.value-cons-card--stop .value-cons-card__verdict { color: var(--val-neg); }
.value-cons-card--wait .value-cons-card__verdict { color: #ca8a04; }
.value-cons-card--neutral .value-cons-card__verdict { color: var(--val-ink-mute); }

.value-cons-card__net {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--val-ink);
  flex: 1;
  text-align: center;
}

.value-cons-card__count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--val-ink-mute);
}

/* =========================================================================
   财务首页看板卡：value 类型缩略 4 水池（保留深色风让水池显著）
   ========================================================================= */

.finance-card--value {
  background: #1f1812;
  border-color: rgba(193, 146, 72, 0.3);
  color: #e8dfc8;
}
.finance-card--value .finance-card__type  { color: #c19248; }
.finance-card--value .finance-card__item  { color: #f5ecd5; }
.finance-card--value .finance-card__meta  { color: rgba(232, 223, 200, 0.55); }

.value-card__mini-pools {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  margin-top: auto;
}

.value-card__mini-pool {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  border-top: 2px solid;
}
.value-card__mini-pool--gold        { border-color: #5a3a16; }
.value-card__mini-pool--gold-bright { border-color: #c19248; }
.value-card__mini-pool--red         { border-color: #5a1818; }
.value-card__mini-pool--red-deep    { border-color: #a04040; }

.value-card__mini-pool-label {
  font-family: var(--font-cn);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.08em;
}
.value-card__mini-pool-amt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #f5ecd5;
}
.value-card__mini-pool--gold-bright .value-card__mini-pool-amt { color: #f0c75c; }
.value-card__mini-pool--red-deep    .value-card__mini-pool-amt { color: #d47878; }

.finance-card--value .finance-card__verdict {
  color: rgba(232, 223, 200, 0.7);
  border-top-color: rgba(193, 146, 72, 0.18);
}
.finance-card--value.finance-card--go .finance-card__verdict   { color: #f0c75c; }
.finance-card--value.finance-card--stop .finance-card__verdict { color: #d47878; }

/* =========================================================================
   单条消费工作台（左基础信息 / 右感受时间线）
   ========================================================================= */

.value-cons__head {
  background: var(--val-surface);
  border-bottom: 1px solid var(--val-line);
  padding: 20px 32px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.value-cons__back {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--val-ink-sec);
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid var(--val-line);
  background: var(--val-surface);
  transition: all .12s;
}
.value-cons__back:hover {
  border-color: var(--val-ink-sec);
  color: var(--val-ink);
  background: var(--val-bg);
}

.value-cons__head-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.value-cons__head-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--val-ink-mute);
  text-transform: uppercase;
}

.value-cons__head-title {
  font-family: var(--font-cn);
  font-size: 20px;
  font-weight: 600;
  color: var(--val-ink);
  margin: 0;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value-cons__verdict {
  padding: 7px 14px;
  font-family: var(--font-cn);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 1px solid;
}
.value-cons__verdict--go      { color: var(--val-pos); border-color: var(--val-pos); background: var(--val-pos-soft); }
.value-cons__verdict--stop    { color: var(--val-neg); border-color: var(--val-neg); background: var(--val-neg-soft); }
.value-cons__verdict--wait    { color: #ca8a04; border-color: #ca8a04; background: #fefce8; }
.value-cons__verdict--neutral { color: var(--val-ink-mute); border-color: var(--val-line); background: var(--val-surface); }

/* ---- 左右两栏布局 ---- */
.value-cons__layout {
  display: grid;
  grid-template-columns: minmax(340px, 400px) 1fr;
  gap: 24px;
  padding: 24px 32px 36px;
  flex: 1;
}

.value-cons__left,
.value-cons__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---- 通用卡片 ---- */
.value-card {
  background: var(--val-surface);
  border: 1px solid var(--val-line);
  box-shadow: var(--val-shadow);
}

.value-card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--val-line-soft);
}

.value-card__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--val-ink-mute);
  text-transform: uppercase;
}

.value-card__title {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--val-ink);
}

.value-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---- 表单字段 ---- */
.value-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.value-field__label {
  font-family: var(--font-cn);
  font-size: 11px;
  font-weight: 500;
  color: var(--val-ink-sec);
  letter-spacing: 0.04em;
}

.value-field__input,
.value-field__textarea {
  font-family: var(--font-cn);
  font-size: 14px;
  color: var(--val-ink);
  padding: 9px 12px;
  background: var(--val-surface);
  border: 1px solid var(--val-line);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  width: 100%;
}
.value-field__input--mono {
  font-family: var(--font-mono);
}

.value-field__input:focus,
.value-field__textarea:focus {
  border-color: var(--val-accent);
  box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.08);
}

.value-field__input::placeholder,
.value-field__textarea::placeholder {
  color: var(--val-ink-mute);
}

.value-field__textarea {
  resize: vertical;
  min-height: 64px;
  font-family: var(--font-cn);
}

.value-field__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--val-ink-mute);
  letter-spacing: 0.04em;
}

/* erPct / lossPct 双字段并排 */
.value-field__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ---- 预测卡片 ---- */
.value-forecast {
  gap: 10px;
}

.value-forecast__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  gap: 2px 12px;
  padding: 10px 12px;
  background: var(--val-bg);
  border: 1px solid var(--val-line-soft);
  transition: background .14s, border-color .14s;
}

.value-forecast__row--pos.is-active {
  background: var(--val-pos-soft);
  border-color: var(--val-pos);
}
.value-forecast__row--neg.is-active {
  background: var(--val-neg-soft);
  border-color: var(--val-neg);
}

.value-forecast__k {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--val-ink-sec);
  grid-column: 1;
  grid-row: 1;
}
.value-forecast__k b {
  font-weight: 700;
  color: var(--val-ink);
}

.value-forecast__formula {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--val-ink-mute);
  letter-spacing: 0.02em;
  grid-column: 1;
  grid-row: 2;
}

.value-forecast__v {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.value-forecast__v--neutral { color: var(--val-ink); }
.value-forecast__v--pos     { color: var(--val-pos); }
.value-forecast__v--neg     { color: var(--val-neg); }

.value-forecast__verdict {
  padding: 12px 14px;
  margin-top: 4px;
  border: 1px solid var(--val-line);
  background: var(--val-surface);
  font-family: var(--font-cn);
  font-size: 12px;
  line-height: 1.65;
  color: var(--val-ink-sec);
}
.value-forecast__verdict--go {
  border-color: var(--val-pos);
  background: var(--val-pos-soft);
  color: var(--val-pos);
  font-weight: 600;
}
.value-forecast__verdict--stop {
  border-color: var(--val-neg);
  background: var(--val-neg-soft);
  color: var(--val-neg);
  font-weight: 600;
}
.value-forecast__verdict--wait,
.value-forecast__verdict--neutral {
  color: var(--val-ink-mute);
}

.value-forecast__verdict-label {
  display: inline-block;
}

/* ---- 判定摘要 ---- */
.value-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-family: var(--font-cn);
  font-size: 13px;
}

.value-summary__row--net {
  border-top: 1px dashed var(--val-line);
  padding-top: 8px;
  margin-top: 2px;
  font-weight: 600;
}

.value-summary__k {
  color: var(--val-ink-sec);
}

.value-summary__v {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--val-ink);
  font-size: 16px;
}
.value-summary__v--pos { color: var(--val-pos); }
.value-summary__v--neg { color: var(--val-neg); }

.value-summary__hint {
  margin: 6px 0 0;
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--val-ink-mute);
  line-height: 1.6;
}
.value-summary__hint b {
  color: var(--val-ink-sec);
  font-weight: 600;
}

/* =========================================================================
   感受录入表单（kind 二选一 + 5 档强度按钮）
   ========================================================================= */

.value-feel-form {
  gap: 14px;
}

/* Step 1: kind 选择（认可 / 后悔 二选一） */
.value-feel-form__kind-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.value-feel-kind {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: var(--val-surface);
  border: 1px solid var(--val-line);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-cn);
  transition: all .12s ease-out;
}

.value-feel-kind:hover {
  border-color: var(--val-ink-sec);
  background: var(--val-bg);
}

.value-feel-kind__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--val-ink);
  letter-spacing: 0.02em;
}

.value-feel-kind__hint {
  font-size: 11px;
  color: var(--val-ink-mute);
  letter-spacing: 0.02em;
}

.value-feel-kind--pos.is-active {
  border-color: var(--val-pos);
  background: var(--val-pos-soft);
}
.value-feel-kind--pos.is-active .value-feel-kind__label { color: var(--val-pos); }

.value-feel-kind--neg.is-active {
  border-color: var(--val-neg);
  background: var(--val-neg-soft);
}
.value-feel-kind--neg.is-active .value-feel-kind__label { color: var(--val-neg); }

/* Step 2: 5 档强度按钮 */
.value-feel-form__tier-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.value-feel-tier {
  padding: 10px 4px;
  background: var(--val-surface);
  border: 1px solid var(--val-line);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--val-ink-sec);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all .12s ease-out;
}

.value-feel-tier:hover {
  border-color: var(--val-ink-sec);
  background: var(--val-bg);
  color: var(--val-ink);
}

.value-feel-tier.is-active {
  border-color: var(--val-accent);
  background: var(--val-accent);
  color: #ffffff;
}

/* 强度按钮跟 kind 颜色联动 */
.value-feel-form__tier-row[data-kind-color="positive"] .value-feel-tier:hover {
  border-color: var(--val-pos);
  color: var(--val-pos);
}
.value-feel-form__tier-row[data-kind-color="positive"] .value-feel-tier.is-active {
  background: var(--val-pos);
  border-color: var(--val-pos);
  color: #ffffff;
}

.value-feel-form__tier-row[data-kind-color="negative"] .value-feel-tier:hover {
  border-color: var(--val-neg);
  color: var(--val-neg);
}
.value-feel-form__tier-row[data-kind-color="negative"] .value-feel-tier.is-active {
  background: var(--val-neg);
  border-color: var(--val-neg);
  color: #ffffff;
}

.value-feel-form__text {
  width: 100%;
}

.value-feel-form__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.value-feel-form__hint {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--val-ink-mute);
  letter-spacing: 0.02em;
}

/* =========================================================================
   感受时间线
   ========================================================================= */

.value-feel-list {
  gap: 8px;
}

.value-feel-empty {
  padding: 32px 20px;
  text-align: center;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--val-ink-mute);
  background: var(--val-bg);
  border: 1px dashed var(--val-line);
}

.value-feel-item {
  position: relative;
  padding: 12px 14px;
  background: var(--val-surface);
  border: 1px solid var(--val-line);
  border-left-width: 3px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .12s, background .12s;
}

.value-feel-item--positive { border-left-color: var(--val-pos); }
.value-feel-item--negative { border-left-color: var(--val-neg); }

.value-feel-item.is-elite {
  background: linear-gradient(180deg, var(--val-bg) 0%, var(--val-surface) 100%);
}

.value-feel-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.value-feel-item__chip {
  padding: 3px 8px;
  font-family: var(--font-cn);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid;
}
.value-feel-item__chip--positive {
  color: var(--val-pos);
  border-color: var(--val-pos);
  background: var(--val-pos-soft);
}
.value-feel-item__chip--negative {
  color: var(--val-neg);
  border-color: var(--val-neg);
  background: var(--val-neg-soft);
}

.value-feel-item__elite {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--val-accent);
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border: 1px solid var(--val-accent);
  background: var(--val-surface);
}

.value-feel-item__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--val-ink-mute);
  letter-spacing: 0.04em;
}

.value-feel-item__del {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--val-ink-mute);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: all .12s;
}
.value-feel-item:hover .value-feel-item__del { opacity: 1; }
.value-feel-item__del:hover { color: var(--val-neg); }

.value-feel-item__text {
  margin: 0;
  font-family: var(--font-cn);
  font-size: 13px;
  line-height: 1.65;
  color: var(--val-ink);
  letter-spacing: 0.01em;
}

/* ---- 响应式 ---- */
@media (max-width: 1080px) {
  .value-cons__layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 880px) {
  .value-pools {
    grid-template-columns: 1fr;
  }
  .value-pools__divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
  .value-head__row {
    grid-template-columns: 1fr;
  }
  .value-net {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Tasks 看板 · 任务计时（项目分组 + 行式任务表）
   ========================================================================= */

.page--tasks .page__title-num.tasks-diamond {
  color: #888;
  font-size: 18px;
  line-height: 1;
}

.tasks-tab-group {
  display: inline-flex;
  border: 1px solid var(--line-standard);
  background: #fff;
}

.tasks-tab {
  padding: 6px 14px;
  font-family: var(--font-cn);
  font-size: 12.5px;
  color: var(--ink-secondary);
  text-decoration: none;
  border-right: 1px solid var(--line-weak, #ececea);
  transition: background .14s, color .14s;
}

.tasks-tab:last-child {
  border-right: none;
}

.tasks-tab:hover {
  background: #fafafa;
  color: var(--ink-primary);
}

.tasks-tab.is-active {
  background: var(--ink-primary);
  color: #fff;
}

/* === 已归档入口（toolbar 右侧） === */
.tasks-archived-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  margin-right: 10px;
  border: 1px solid var(--line-standard, #e5e5e1);
  background: #fff;
  color: var(--ink-secondary);
  font-family: var(--font-cn);
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background .14s, color .14s, border-color .14s;
}

.tasks-archived-link:hover {
  background: #fafaf6;
  color: var(--ink-primary);
  border-color: var(--ink-tertiary);
}

.tasks-archived-link.is-active {
  background: var(--ink-primary);
  color: #fff;
  border-color: var(--ink-primary);
}

.tasks-archived-link__icon {
  font-size: 10px;
  opacity: 0.7;
}

.tasks-archived-link__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  background: rgba(212, 156, 61, 0.15);
  color: #b87a18;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 2px;
}

.tasks-archived-link.is-active .tasks-archived-link__count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* === 已归档页面 === */
.archived-hint {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-tertiary);
  margin-bottom: 14px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fdf6e8 0%, #fff 100%);
  border-left: 3px solid #d49c3d;
  letter-spacing: 0.04em;
}

.archived-hint strong {
  color: #b87a18;
  font-family: var(--font-mono);
  font-weight: 700;
  margin: 0 2px;
}

.archived-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  background: #fff;
  border: 1px dashed var(--line-standard, #e5e5e1);
  text-align: center;
  max-width: 600px;
  margin: 40px auto;
}

.archived-empty__icon {
  font-size: 48px;
  color: var(--ink-tertiary);
  opacity: 0.4;
  margin-bottom: 16px;
  line-height: 1;
}

.archived-empty__title {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-primary);
  margin-bottom: 12px;
}

.archived-empty__hint {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-tertiary);
  line-height: 1.7;
  margin-bottom: 24px;
}

.archived-empty__back {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--brand-blue, #3870c4);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--brand-blue, #3870c4);
  transition: all .14s;
}

.archived-empty__back:hover {
  background: var(--brand-blue, #3870c4);
  color: #fff;
}

/* 已归档分组：去饱和 + 浅黄色调暗示「冷藏」 */
.tasks-group.is-archived {
  background: linear-gradient(135deg, #fafaf7 0%, #fff 100%);
  opacity: 0.92;
}

.tasks-group.is-archived .tasks-group__head {
  background: rgba(212, 156, 61, 0.04);
}

.tasks-group.is-archived .tasks-group__name {
  color: var(--ink-secondary);
}

/* 只读任务行（归档页用） */
.tasks-row--readonly {
  display: grid;
  grid-template-columns: 1fr 140px 120px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--line-weak, #ececea);
  font-family: var(--font-cn);
  font-size: 12.5px;
  color: var(--ink-secondary);
}

.tasks-row--readonly .tasks-row__cell {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.02em;
}

.tasks-row--readonly .tasks-row__cell--total {
  color: var(--ink-primary);
  font-weight: 600;
}

.tasks-body {
  padding: 28px 32px 48px;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1080px;
}

.tasks-empty {
  padding: 24px;
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-tertiary);
  text-align: center;
  border: 1px dashed var(--line-weak, #e6e6e6);
}

.tasks-group {
  background: #fff;
  border: 1px solid var(--line-standard);
}

.tasks-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #fafaf8, #fff);
  border-bottom: 1px solid var(--line-weak, #ececea);
}

.tasks-group__chevron {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  font-size: 10px;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: transform .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transform: rotate(90deg);
}

.tasks-group.is-collapsed .tasks-group__chevron {
  transform: rotate(0deg);
}

.tasks-group__icon {
  font-size: 13px;
  color: var(--ink-tertiary);
}

.tasks-group__name {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
  outline: none;
  padding: 2px 4px;
  cursor: text;
  min-width: 80px;
}

.tasks-group__name:focus {
  background: #fff8e8;
}

.tasks-group__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-left: 4px;
}

.tasks-group__del {
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-tertiary);
  font-size: 14px;
  cursor: pointer;
  border-radius: 0;
  transition: all .15s;
  padding: 0;
  line-height: 1;
}

.tasks-group__del:hover {
  border-color: #c44e4e;
  color: #c44e4e;
  background: #fdf0f0;
}

/* 归档 / 解归档按钮（在 del 旁边） */
.tasks-group__archive,
.tasks-group__unarchive {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--line-standard, #e5e5e1);
  background: #fff;
  color: var(--ink-secondary);
  font-family: var(--font-cn);
  font-size: 11px;
  cursor: pointer;
  border-radius: 0;
  transition: all .15s;
  letter-spacing: 0.06em;
  line-height: 1;
}

.tasks-group__archive:hover {
  border-color: #d49c3d;
  color: #b87a18;
  background: #fdf6e8;
}

.tasks-group__unarchive {
  color: var(--brand-blue, #3870c4);
  border-color: var(--brand-blue, #3870c4);
}

.tasks-group__unarchive:hover {
  background: #f0f7ff;
  color: #1f4f9c;
  border-color: #1f4f9c;
}

/* 归档按钮放在 del 旁边时，del 不再 margin-left: auto */
.tasks-group__archive + .tasks-group__del {
  margin-left: 6px;
}

.tasks-group__body {
  display: flex;
  flex-direction: column;
}

.tasks-group.is-collapsed .tasks-group__body {
  display: none;
}

.tasks-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 130px 100px 90px 100px 80px 30px;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 38px;
  border-bottom: 1px solid var(--line-weak, #ececea);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-primary);
  transition: background .14s;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.tasks-row:hover {
  background: #fafaf8;
}

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

.tasks-row--head {
  background: #f6f6f4;
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding-top: 7px;
  padding-bottom: 7px;
}

.tasks-row--head:hover {
  background: #f6f6f4;
}

.tasks-row--empty {
  color: var(--ink-tertiary);
  font-style: italic;
  font-size: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  display: block;
}

.tasks-row--add {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-family: var(--font-cn);
  font-size: 12.5px;
  text-align: left;
  padding: 9px 14px 9px 38px;
}

.tasks-row--add:hover {
  background: #f0f7ff;
  color: var(--brand-blue, #3870c4);
}

.tasks-row.is-active {
  background: #fff7f3;
  border-left: 3px solid #c44e4e;
  padding-left: 35px;
}

/* ===== 迷你完成按钮（隐藏式，仿照 .tasks-row__del） ===== */
.tasks-row__done-mini {
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
  border-radius: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .14s;
  opacity: 0;                       /* 默认隐藏 */
}

.tasks-row__done-mini svg {
  display: block;
}

/* 行 hover 时才显露 √ 按钮（无论是否完成都隐藏式，干净不碍眼） */
.tasks-row:hover .tasks-row__done-mini {
  opacity: 1;
}

.tasks-row__done-mini:hover {
  border-color: #6fa86a;
  color: #4d8a47;
  background: #f1faec;
}

/* 已完成态：实色绿 + 白对号（作为已确认的视觉印章） */
.tasks-row__done-mini.is-on {
  background: #5fa05a;
  border-color: #5fa05a;
  color: #fff;
}

.tasks-row__done-mini.is-on:hover {
  background: #538f4e;
  border-color: #538f4e;
}

/* ===== 完成行视觉 ===== */
.tasks-row.is-done .tasks-row__name {
  text-decoration: line-through;
  text-decoration-color: rgba(90, 122, 90, 0.5);
  color: #6a8a6a;
}

.tasks-row.is-done {
  background: #f1faec;            /* 底色：很淡的春绿 */
  color: #5a7a5a;
}

.tasks-row.is-done:hover {
  background: #eaf5e3;
}

/* 完成态：禁用其他控件的视觉（disabled 属性已让交互失效，这里弱化外观） */
.tasks-row.is-done .tasks-cell-date,
.tasks-row.is-done .tasks-btn--start,
.tasks-row.is-done .tasks-btn--end {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 已完成时强制不显示红色（兜底 — 即使 cell 上仍有 overdue class） */
.tasks-row.is-done .tasks-cell--overdue .tasks-cell-date,
.tasks-row.is-done .tasks-cell--overdue {
  color: #6a8a6a !important;
}

/* 理发店波浪条纹（barber pole）：用伪元素铺一层 -45° 斜纹，translateX 循环 */
.tasks-row.is-done::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(95, 160, 90, 0.22) 0,
    rgba(95, 160, 90, 0.22) 10px,
    rgba(95, 160, 90, 0) 10px,
    rgba(95, 160, 90, 0) 20px
  );
  animation: tasksBarberPole 1.4s linear infinite;
  z-index: 0;
}

/* 让行内 children 浮在条纹之上 */
.tasks-row.is-done > * {
  position: relative;
  z-index: 1;
}

/* 一个完整斜纹周期 = 2 * (10px / cos45°) ≈ 28.28px */
@keyframes tasksBarberPole {
  from { transform: translateX(0); }
  to   { transform: translateX(-28.28px); }
}

@media (prefers-reduced-motion: reduce) {
  .tasks-row.is-done::after {
    animation: none;
  }
}

.tasks-row__name {
  outline: none;
  padding: 2px 4px;
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-row__name:focus {
  background: #fff8e8;
  white-space: normal;
}

.tasks-row__cell {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-secondary);
  display: flex;
  align-items: center;
}

.tasks-row__cell--total {
  font-weight: 600;
  color: var(--ink-primary);
}

.tasks-cell-date {
  font-family: var(--font-mono);
  font-size: 11.5px;
  border: 1px solid var(--line-weak, #e6e6e6);
  background: #fff;
  padding: 3px 6px;
  border-radius: 0;
  color: var(--ink-secondary);
  outline: none;
  transition: border-color .14s;
  width: 100%;
  max-width: 130px;
}

.tasks-cell-date:focus {
  border-color: var(--ink-primary);
}

.tasks-cell--overdue .tasks-cell-date {
  color: #c44e4e;
  border-color: #f0c4c4;
}

/* 计时按钮：开始 / 结束 */
.tasks-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-standard);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-primary);
  cursor: pointer;
  border-radius: 0;
  transition: all .14s;
  line-height: 1;
  min-width: 72px;
  justify-content: center;
}

.tasks-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tasks-btn__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ink-secondary);
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}

.tasks-btn--start:not(:disabled):hover {
  border-color: #4a9d6f;
  color: #2d6e4d;
  background: #f0fbf5;
}

.tasks-btn--start.is-active {
  border-color: #c44e4e;
  background: #fff0ec;
  color: #b22a1f;
  font-weight: 600;
}

.tasks-btn--start.is-active .tasks-btn__dot {
  background: #c44e4e;
  border-color: #c44e4e;
  box-shadow: 0 0 0 3px rgba(196, 78, 78, 0.2);
  animation: tasksPulse 1.4s ease-in-out infinite;
}

@keyframes tasksPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(196, 78, 78, 0.2); }
  50%      { box-shadow: 0 0 0 6px rgba(196, 78, 78, 0.06); }
}

.tasks-btn--end:not(:disabled):hover {
  border-color: #c44e4e;
  color: #b22a1f;
  background: #fdf0f0;
}

.tasks-row__del {
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-tertiary);
  font-size: 13px;
  cursor: pointer;
  border-radius: 0;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .14s;
  opacity: 0;
}

.tasks-row:hover .tasks-row__del {
  opacity: 1;
}

.tasks-row__del:hover {
  border-color: #c44e4e;
  color: #c44e4e;
  background: #fdf0f0;
}

.tasks-add-group {
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--line-standard);
  background: transparent;
  color: var(--ink-tertiary);
  font-family: var(--font-cn);
  font-size: 13px;
  cursor: pointer;
  border-radius: 0;
  transition: all .14s;
}

.tasks-add-group:hover {
  border-color: var(--brand-blue, #3870c4);
  color: var(--brand-blue, #3870c4);
  background: #f0f7ff;
}

/* =========================================================================
   Tasks · 计时日志热力图（GitHub 风 7×N 红色 5 档）
   ========================================================================= */

/* === 总累计时间宝石卡（嵌入 4 个 KPI）=== */
.heatmap-total-card {
  background: linear-gradient(135deg, #fff 0%, #fdf6f4 100%);
  border: 1px solid var(--line-standard);
  padding: 22px 28px;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 22px;
  max-width: 1100px;
  position: relative;
  overflow: hidden;
}

/* 卡片中心偏右上微弱红光晕（呼应宝石） */
.heatmap-total-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -5%;
  width: 35%;
  height: 200%;
  background: radial-gradient(circle, rgba(232, 60, 60, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* 左侧主区：宝石 + 总累 */
.heatmap-total__main {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 28px;
  flex-shrink: 0;
}

/* 分割线 */
.heatmap-total__divider {
  width: 1px;
  background: var(--line-weak, #ececea);
  margin: 4px 0;
  flex-shrink: 0;
}

/* 右侧 KPI 区：4 个 stat 横列 */
.heatmap-total__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: 1;
  padding-left: 28px;
  align-items: center;
  gap: 8px;
}

.hm-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 6px;
  position: relative;
  z-index: 1;
}

.hm-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: var(--line-weak, #ececea);
}

.hm-stat__num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}

.hm-stat__num small {
  font-size: 13px;
  font-weight: 500;
  margin-left: 2px;
  color: var(--ink-tertiary);
}

.hm-stat__label {
  font-family: var(--font-cn);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 红色宝石球：多层 radial-gradient + 多层阴影 */
.heatmap-gem {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  background:
    /* 主高光（左上） */
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 220, 220, 0.55) 6%,
      transparent 22%),
    /* 主体红色：从中央亮到边缘暗 */
    radial-gradient(circle at 50% 52%,
      #f26b6b 0%,
      #d83030 28%,
      #8a1818 68%,
      #3a0707 100%);
  box-shadow:
    /* 内阴影：右下深色让球体感更立体 */
    inset -9px -11px 18px rgba(0, 0, 0, 0.55),
    /* 内高光：左上微亮（增强宝石透光感） */
    inset 5px 5px 14px rgba(255, 130, 130, 0.42),
    /* 外阴影：投地面 */
    0 12px 26px rgba(138, 24, 24, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.3);
  animation: gemPulse 4.5s ease-in-out infinite;
  z-index: 1;
}

/* 主高光小亮点（左上，模拟尖锐反射） */
.heatmap-gem__shine {
  position: absolute;
  top: 16%;
  left: 24%;
  width: 22%;
  height: 16%;
  background: radial-gradient(ellipse,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.4) 35%,
    transparent 70%);
  border-radius: 50%;
  filter: blur(0.5px);
  pointer-events: none;
}

/* 底部反射光（次高光，宝石质感关键） */
.heatmap-gem::after {
  content: '';
  position: absolute;
  bottom: 11%;
  left: 50%;
  transform: translateX(-50%);
  width: 52%;
  height: 14%;
  background: radial-gradient(ellipse,
    rgba(255, 200, 200, 0.55) 0%,
    rgba(255, 180, 180, 0.2) 50%,
    transparent 75%);
  border-radius: 50%;
  filter: blur(2.5px);
  pointer-events: none;
}

@keyframes gemPulse {
  0%, 100% {
    box-shadow:
      inset -9px -11px 18px rgba(0, 0, 0, 0.55),
      inset 5px 5px 14px rgba(255, 130, 130, 0.42),
      0 12px 26px rgba(138, 24, 24, 0.55),
      0 4px 10px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow:
      inset -9px -11px 18px rgba(0, 0, 0, 0.55),
      inset 5px 5px 14px rgba(255, 130, 130, 0.42),
      0 16px 36px rgba(216, 48, 48, 0.7),
      0 6px 14px rgba(0, 0, 0, 0.35);
  }
}

.heatmap-total__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.heatmap-total__label {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.32em;
  font-weight: 500;
  margin-left: 1px;
}

.heatmap-total__num {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: 0.01em;
  line-height: 1;
}

.heatmap-total__num small {
  font-size: 18px;
  font-weight: 500;
  margin-left: 5px;
  color: var(--ink-tertiary);
}

.heatmap-total__sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.heatmap-card {
  background: #fff;
  border: 1px solid var(--line-standard);
  padding: 22px 24px 18px;
  max-width: 1200px;
}

/* viewport 日期范围 label */
.heatmap-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-weak, #ececea);
}

.heatmap-range__hint {
  font-family: var(--font-cn);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.heatmap-range__hint--right {
  text-align: right;
}

.heatmap-range__label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-primary);
  letter-spacing: 0.06em;
  font-weight: 700;
  text-align: center;
  flex: 1;
}

/* 滚动容器包裹：左右两道橙色边线（指示当前 viewport 边界） */
.heatmap-scroll-wrap {
  position: relative;
  padding: 0 4px;
}

.heatmap-scroll-wrap::before,
.heatmap-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 14px;  /* 不遮挡滚动条 */
  width: 2px;
  background: linear-gradient(180deg,
    rgba(232, 137, 58, 0) 0%,
    rgba(232, 137, 58, 0.9) 18%,
    rgba(232, 137, 58, 0.9) 82%,
    rgba(232, 137, 58, 0) 100%);
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 6px rgba(232, 137, 58, 0.55);
  /* 默认不显示，滚动时淡入 */
  opacity: 0;
  transition: opacity .25s ease-out;
}

.heatmap-scroll-wrap::before { left: 0; }
.heatmap-scroll-wrap::after  { right: 0; }

/* 滚动时显示橙色边线（JS 添加 .is-scrolling class） */
.heatmap-scroll-wrap.is-scrolling::before,
.heatmap-scroll-wrap.is-scrolling::after {
  opacity: 1;
}

.heatmap-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-tertiary, #aaa) transparent;
}

/* webkit 滚动条：细、低调 */
.heatmap-scroll::-webkit-scrollbar {
  height: 8px;
}
.heatmap-scroll::-webkit-scrollbar-track {
  background: var(--bg-soft, #f4f4f1);
  border-radius: 0;
}
.heatmap-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-tertiary, #b8b8b3);
  border-radius: 0;
}
.heatmap-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--ink-secondary, #888);
}

.heatmap-grid {
  display: grid;
  grid-template-columns: 30px max-content;
  grid-template-rows: 16px 1fr;
  gap: 6px;
}

.heatmap-months {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(var(--total-weeks, 53), 13px);
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

.heatmap-month {
  white-space: nowrap;
}

.heatmap-days {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(7, 13px);
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
}

.heatmap-day {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  line-height: 1;
}

.heatmap-cells {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(var(--total-weeks, 53), 13px);
  grid-template-rows: repeat(7, 13px);
  gap: 3px;
}

.heatmap-cell {
  width: 13px;
  height: 13px;
  border-radius: 0;
  cursor: default;
  transition: transform .12s, outline-color .12s;
  outline: 1px solid transparent;
}

.heatmap-cell[data-key] {
  cursor: pointer;
}

.heatmap-cell:hover {
  transform: scale(1.25);
  outline-color: var(--ink-primary);
  z-index: 2;
}

.heatmap-cell.is-selected {
  outline: 2px solid var(--ink-primary, #1f2937);
  outline-offset: 1px;
  z-index: 3;
}

/* 5 档红色 + future 灰白 */
.heatmap-cell--lvl0 { background: #f3f3f1; }
.heatmap-cell--lvl1 { background: #fde2dd; }
.heatmap-cell--lvl2 { background: #f8a9a0; }
.heatmap-cell--lvl3 { background: #e26a5e; }
.heatmap-cell--lvl4 { background: #b22a1f; }
.heatmap-cell--future {
  background: repeating-linear-gradient(
    45deg,
    #fafaf8 0,
    #fafaf8 3px,
    #f1f1ee 3px,
    #f1f1ee 5px
  );
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-weak, #ececea);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
}

.heatmap-legend__hint {
  margin: 0 4px;
}

.heatmap-legend__cell {
  cursor: help;
}

.heatmap-legend__sep {
  width: 1px;
  height: 14px;
  background: var(--line-weak, #ececea);
  margin: 0 12px;
}

.heatmap-legend__scale {
  letter-spacing: 0.04em;
}

/* =========================================================================
   Tasks · 每日用时条形图（堆叠条 + 6/8/12h 参考线）
   ========================================================================= */

.daily-card {
  background: #fff;
  border: 1px solid var(--line-standard);
  padding: 22px 28px 20px;
  margin-top: 24px;
  max-width: 1200px;
}

.daily-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-weak, #ececea);
}

.daily-card__title {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
}

.daily-card__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

/* === 垂直柱状图 === */
.daily-chart-v {
  position: relative;
  height: 240px;
  padding: 14px 8px 56px 48px;
  margin-top: 8px;
}

/* y 轴刻度（左侧） */
.daily-yaxis {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 56px;
  width: 40px;
  pointer-events: none;
}

.daily-ytick {
  position: absolute;
  right: 6px;
  transform: translateY(50%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 绘图区：相对定位容器，参考线绝对定位浮在柱子背面 */
.daily-plot {
  position: relative;
  height: 100%;
  border-left: 1px solid var(--line-standard, #e5e5e1);
}

/* 水平参考线 */
.daily-href {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed rgba(40, 40, 40, 0.18);
  pointer-events: none;
}

.daily-href[data-h="6"]  { border-color: rgba(74, 157, 111, 0.5); }
.daily-href[data-h="8"]  { border-color: rgba(212, 156, 61, 0.6); }
.daily-href[data-h="12"] { border-color: rgba(196, 78, 78, 0.55); }

.daily-href__label {
  position: absolute;
  right: 4px;
  top: -7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  background: #fff;
  padding: 0 4px;
  letter-spacing: 0.04em;
}

.daily-href[data-h="6"]  .daily-href__label { color: #4a9d6f; }
.daily-href[data-h="8"]  .daily-href__label { color: #d49c3d; }
.daily-href[data-h="12"] .daily-href__label { color: #c44e4e; }

/* 柱子区：横向 flex 平分 */
.daily-bars {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 4px;
  z-index: 1;
}

/* 单根柱：相对容器，柱体在底部，日期标签溢出在下方 */
.daily-bar {
  flex: 1 1 0;
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.daily-bar.is-today .daily-bar__col {
  outline: 1.5px solid var(--ink-primary, #1f2937);
  outline-offset: 1px;
}

.daily-bar.is-today .daily-bar__md {
  color: var(--ink-primary);
  font-weight: 700;
}

/* 柱体本身：从下往上堆 segments */
.daily-bar__col {
  width: 100%;
  max-width: 32px;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 0;
  overflow: hidden;
  transition: filter .14s, transform .14s;
  cursor: default;
}

.daily-bar__col:hover {
  filter: brightness(1.08);
}

.daily-bar.is-empty .daily-bar__col {
  /* 空日：在底部画一条虚线表示「无记录」 */
  height: 0;
  outline: none;
}

.daily-bar.is-empty::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 16px;
  height: 1px;
  border-top: 1px dashed var(--line-standard, #e5e5e1);
  transform: translateX(-50%);
}

.daily-bar__seg {
  display: block;
  width: 100%;
  transition: filter .14s;
}

.daily-bar__seg:hover {
  filter: brightness(1.15);
}

/* 总时长 label：浮在柱子顶部 */
.daily-bar__total {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-primary);
  white-space: nowrap;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.92);
  padding: 0 3px;
  border-radius: 0;
}

.daily-bar__total.is-reached {
  color: #4a9d6f;
}

/* 日期标签（柱子底部，溢出绘图区） */
.daily-bar__date {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
}

.daily-bar__md {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.daily-bar__wd {
  font-family: var(--font-cn);
  font-size: 9px;
  color: var(--ink-tertiary);
}

/* 项目图例 */
.daily-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 32px;
  padding-top: 14px;
  border-top: 1px solid var(--line-weak, #ececea);
}

.daily-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--ink-secondary);
}

.daily-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 0;
}

/* =========================================================================
   Tasks · 日历时间记录与活动时间线
   ========================================================================= */

.task-insights {
  max-width: 1180px;
}

.task-date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--line-standard);
}

.task-date-nav__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-date-nav__copy strong {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 650;
  color: var(--ink-primary);
}

.task-date-nav__copy span {
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--ink-tertiary);
}

.task-date-nav__controls {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}

.task-date-nav__btn,
.task-date-nav__today {
  height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line-standard);
  background: #fff;
  color: var(--ink-secondary);
  font-family: var(--font-cn);
  font-size: 12px;
  text-decoration: none;
  margin-left: -1px;
}

.task-date-nav__btn:hover,
.task-date-nav__today:hover {
  position: relative;
  border-color: var(--ink-primary);
  color: var(--ink-primary);
}

.task-date-nav__input {
  width: 132px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line-standard);
  background: #fff;
  color: var(--ink-primary);
  font: 12px/1 var(--font-mono);
  outline: none;
  margin-left: -1px;
}

.task-date-nav__input:focus {
  position: relative;
  border-color: var(--ink-primary);
}

.task-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.task-kpi-grid--activity {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.task-kpi {
  min-width: 0;
  padding: 14px 15px;
  background: #fff;
  border: 1px solid var(--line-standard);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.task-kpi > span {
  font-family: var(--font-cn);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.05em;
}

.task-kpi > strong {
  overflow: hidden;
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-kpi > strong small {
  margin-left: 2px;
  color: var(--ink-tertiary);
  font-family: var(--font-cn);
  font-size: 10px;
  font-weight: 500;
}

.task-calendar-card,
.activity-strip-card,
.activity-timeline-card,
.activity-summary-card {
  background: #fff;
  border: 1px solid var(--line-standard);
}

.task-calendar-card {
  overflow: hidden;
}

.task-calendar-head {
  width: 100%;
  display: grid;
  grid-template-columns: 64px repeat(7, minmax(112px, 1fr));
  border-bottom: 1px solid var(--line-standard);
}

.task-calendar-head__spacer {
  background: #fafaf8;
  border-right: 1px solid var(--line-weak, #ececea);
}

.task-calendar-day {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 7px;
  padding: 10px 11px;
  border-right: 1px solid var(--line-weak, #ececea);
  color: var(--ink-secondary);
  text-decoration: none;
}

.task-calendar-day:last-child {
  border-right: 0;
}

.task-calendar-day:hover {
  background: #fafaf8;
}

.task-calendar-day.is-today {
  background: #fff5f2;
  color: #9d2922;
}

.task-calendar-day span {
  grid-row: 1 / 3;
  align-self: center;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2f2ef;
  font-family: var(--font-cn);
  font-size: 10.5px;
}

.task-calendar-day.is-today span {
  background: #b22a1f;
  color: #fff;
}

.task-calendar-day strong {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-primary);
}

.task-calendar-day small {
  overflow: hidden;
  font-family: var(--font-cn);
  font-size: 10px;
  color: var(--ink-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-calendar-scroll {
  overflow: auto;
  scrollbar-width: thin;
}

.task-calendar-canvas {
  width: 100%;
  min-width: 900px;
}

.task-calendar-grid {
  width: 100%;
  height: max(640px, calc(var(--calendar-hours) * 58px));
  display: grid;
  grid-template-columns: 64px repeat(7, minmax(112px, 1fr));
  position: relative;
}

.task-calendar-hours {
  position: relative;
  background: #fafaf8;
  border-right: 1px solid var(--line-weak, #ececea);
}

.task-calendar-hours span {
  position: absolute;
  right: 9px;
  transform: translateY(-50%);
  color: var(--ink-tertiary);
  font: 9.5px/1 var(--font-mono);
}

.task-calendar-column {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--line-weak, #ececea);
  background: #fff;
}

.task-calendar-column:last-child {
  border-right: 0;
}

.task-calendar-column.is-today {
  background: rgba(178, 42, 31, 0.025);
}

.task-calendar-column > i {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #f0f0ed;
  pointer-events: none;
}

.task-calendar-entry {
  position: absolute;
  left: 5px;
  right: 5px;
  z-index: 2;
  min-height: 34px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 5px 7px 5px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: color-mix(in srgb, var(--entry-color) 13%, white);
  border: 1px solid color-mix(in srgb, var(--entry-color) 38%, white);
  border-left: 3px solid var(--entry-color);
  color: var(--ink-primary);
}

.task-calendar-entry.is-active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--entry-color) 18%, transparent);
}

.task-calendar-entry strong,
.task-calendar-entry span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-calendar-entry strong {
  font-family: var(--font-cn);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.task-calendar-entry span {
  margin-top: 2px;
  color: var(--ink-tertiary);
  font: 9.5px/1.2 var(--font-mono);
}

.activity-strip-card {
  padding: 15px 18px 20px;
  margin-bottom: 16px;
}

.activity-strip-head,
.activity-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.activity-strip-head {
  margin-bottom: 19px;
}

.activity-strip-head strong,
.activity-card-head strong {
  color: var(--ink-primary);
  font-family: var(--font-cn);
  font-size: 12.5px;
  font-weight: 650;
}

.activity-strip-head span,
.activity-card-head span {
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  font-size: 10px;
}

.activity-strip {
  position: relative;
  height: 42px;
  background: #f7f7f4;
  border: 1px solid var(--line-weak, #ececea);
}

.activity-strip i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(40, 40, 36, 0.08);
}

.activity-strip i span {
  position: absolute;
  top: -14px;
  left: 3px;
  color: var(--ink-tertiary);
  font: 8.5px/1 var(--font-mono);
}

.activity-strip b {
  position: absolute;
  top: 7px;
  height: 26px;
  min-width: 3px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.activity-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.activity-card-head {
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-weak, #ececea);
}

.activity-empty {
  padding: 58px 20px;
  color: var(--ink-tertiary);
  font-family: var(--font-cn);
  font-size: 12.5px;
  text-align: center;
}

.activity-timeline {
  padding: 14px 16px 20px;
}

.activity-entry,
.activity-gap {
  display: grid;
  grid-template-columns: 80px 24px minmax(0, 1fr);
}

.activity-entry__time {
  padding: 9px 8px 9px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-family: var(--font-mono);
}

.activity-entry__time strong {
  color: var(--ink-primary);
  font-size: 11px;
}

.activity-entry__time span {
  color: var(--ink-tertiary);
  font-size: 9.5px;
}

.activity-entry__line,
.activity-gap i {
  position: relative;
}

.activity-entry__line::before,
.activity-gap i::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px solid #deded9;
}

.activity-entry__line i {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%);
  background: var(--entry-color);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--entry-color);
  border-radius: 50%;
  z-index: 1;
}

.activity-entry.is-active .activity-entry__line i {
  animation: tasksPulse 1.4s ease-in-out infinite;
}

.activity-entry__body {
  min-width: 0;
  min-height: 54px;
  margin: 3px 0 5px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--entry-color) 8%, white);
  border: 1px solid color-mix(in srgb, var(--entry-color) 25%, white);
  border-left: 3px solid var(--entry-color);
}

.activity-entry__body > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.activity-entry__body strong,
.activity-entry__body span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.activity-entry__body strong {
  color: var(--ink-primary);
  font-family: var(--font-cn);
  font-size: 12px;
}

.activity-entry__body span {
  color: var(--ink-tertiary);
  font-family: var(--font-cn);
  font-size: 10px;
}

.activity-entry__body > b {
  flex-shrink: 0;
  color: var(--ink-secondary);
  font: 600 10.5px/1 var(--font-mono);
}

.activity-gap {
  min-height: 32px;
  align-items: center;
}

.activity-gap > span {
  padding-right: 8px;
  color: var(--ink-tertiary);
  font: 9px/1 var(--font-mono);
  text-align: right;
}

.activity-gap > small {
  color: var(--ink-tertiary);
  font-family: var(--font-cn);
  font-size: 10px;
}

.activity-gap i::before {
  border-left-style: dashed;
}

.activity-summary-primary {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 1px solid var(--line-weak, #ececea);
}

.activity-summary-primary span,
.activity-summary-primary small {
  color: var(--ink-tertiary);
  font-family: var(--font-cn);
  font-size: 10px;
}

.activity-summary-primary strong {
  overflow: hidden;
  color: var(--ink-primary);
  font-family: var(--font-cn);
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.activity-summary-list {
  padding: 8px 16px 14px;
}

.activity-summary-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--line-weak, #ececea);
}

.activity-summary-row > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.activity-summary-row > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
}

.activity-summary-row strong {
  overflow: hidden;
  color: var(--ink-primary);
  font-family: var(--font-cn);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.activity-summary-row small {
  color: var(--ink-tertiary);
  font: 9px/1 var(--font-mono);
}

.activity-summary-row > b {
  color: var(--ink-secondary);
  font: 600 9.5px/1 var(--font-mono);
}

.activity-summary-none {
  padding: 24px 0 16px;
  color: var(--ink-tertiary);
  font-family: var(--font-cn);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 1050px) {
  .task-kpi-grid--activity {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .activity-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .task-date-nav {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .task-date-nav__controls {
    width: 100%;
  }

  .task-date-nav__input {
    flex: 1;
    width: auto;
  }

  .task-kpi-grid,
  .task-kpi-grid--activity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================================
   Global Floating Timer · 永久悬浮计时器（含 PiP 共用样式）
   ========================================================================= */

/* === 收起态：血红宝石 · 内部血液流动 + 顶部 specular 高光 ===
   注：球态永远锚定右下角，不可拖动，用 !important 防御任何 inline style 残留 */
.ft-orb {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  top: auto !important;
  z-index: 9000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  /* 宝石本体：深红→鲜血红→暗紫红的球面光晕（左上略亮） */
  background:
    radial-gradient(circle at 32% 28%,
      #d83838 0%,
      #b51616 30%,
      #7a0606 65%,
      #3a0202 100%);
  /* 三层阴影：内部高光 + 内部沉影 + 外部红光晕 + 落地影 */
  box-shadow:
    inset 4px 5px 12px rgba(255, 200, 195, 0.45),       /* 左上内高光 */
    inset -5px -7px 16px rgba(30, 0, 0, 0.65),          /* 右下内沉影 */
    0 8px 22px rgba(180, 30, 30, 0.45),
    0 2px 5px rgba(40, 0, 0, 0.35);
  cursor: pointer;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  color: #fff;
}

/* ::before — 内部流动的血液团（多层径向 gradient + background-position 漂移） */
.ft-orb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(255, 70, 60, 0.85) 0%, rgba(255, 70, 60, 0) 60%),
    radial-gradient(closest-side at 70% 65%, rgba(150, 0, 0, 0.80) 0%, rgba(150, 0, 0, 0) 55%),
    radial-gradient(closest-side at 50% 85%, rgba(60, 0, 0, 0.75) 0%, rgba(60, 0, 0, 0) 50%),
    radial-gradient(closest-side at 80% 30%, rgba(255, 120, 90, 0.55) 0%, rgba(255, 120, 90, 0) 45%);
  background-size: 180% 180%, 200% 200%, 220% 220%, 160% 160%;
  background-position: 0% 0%, 100% 100%, 50% 100%, 20% 80%;
  filter: blur(2.5px);
  mix-blend-mode: screen;       /* 红光叠加更通透 */
  animation: ftOrbBloodFlow 14s ease-in-out infinite;
}

/* ::after — 左上 specular 静态高光（不旋转，仅球面立体感关键） */
.ft-orb::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 18%;
  width: 36%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 230, 220, 0.42) 38%,
    rgba(255, 255, 255, 0) 78%);
  filter: blur(1.5px);
  pointer-events: none;
  z-index: 2;                   /* 在血流之上 */
}

.ft-orb:hover {
  transform: scale(1.08);
  box-shadow:
    inset 4px 5px 14px rgba(255, 215, 210, 0.55),
    inset -5px -7px 16px rgba(30, 0, 0, 0.6),
    0 12px 32px rgba(220, 40, 40, 0.65),
    0 4px 10px rgba(60, 0, 0, 0.4);
}

/* 计时态：保留 dot + time + 心跳脉冲（血流继续运行） */
.ft-orb.is-counting {
  animation: ftOrbPulse 2.4s ease-in-out infinite;
}

.ft-orb__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.32);
  animation: ftDotPulse 1.4s ease-in-out infinite;
  position: relative;
  z-index: 3;
}

.ft-orb__time {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(60, 0, 0, 0.65);
  position: relative;
  z-index: 3;
}

/* 血液流动核心动画：4 层 gradient 反向漂移 */
@keyframes ftOrbBloodFlow {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 100%, 20% 80%;
  }
  25% {
    background-position: 60% 80%, 20% 30%, 80% 20%, 80% 30%;
  }
  50% {
    background-position: 100% 40%, 0% 60%, 20% 80%, 50% 100%;
  }
  75% {
    background-position: 40% 100%, 80% 0%, 100% 50%, 0% 0%;
  }
  100% {
    background-position: 0% 0%, 100% 100%, 50% 100%, 20% 80%;
  }
}

@keyframes ftOrbPulse {
  0%, 100% {
    box-shadow:
      inset 4px 5px 12px rgba(255, 200, 195, 0.45),
      inset -5px -7px 16px rgba(30, 0, 0, 0.65),
      0 8px 22px rgba(220, 50, 50, 0.5),
      0 2px 5px rgba(40, 0, 0, 0.35);
  }
  50% {
    box-shadow:
      inset 4px 5px 14px rgba(255, 215, 210, 0.55),
      inset -5px -7px 16px rgba(30, 0, 0, 0.6),
      0 14px 36px rgba(240, 60, 60, 0.72),
      0 4px 10px rgba(60, 0, 0, 0.4);
  }
}

@keyframes ftDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1); }
}

/* 展开态：卡片 */
.ft-card {
  position: fixed;
  z-index: 9000;
  width: 260px;
  background: #fff;
  border: 1px solid var(--line-standard);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.06);
  font-family: var(--font-cn);
  user-select: none;
}

.ft-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 14px;
  background: linear-gradient(180deg, #fafaf8, #f3f3f1);
  border-bottom: 1px solid var(--line-weak, #ececea);
  cursor: grab;
}

.ft-card__head:active {
  cursor: grabbing;
}

.ft-card__title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: 0.02em;
}

.ft-card__spacer {
  flex: 1;
}

.ft-card__btn {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-secondary);
  cursor: pointer;
  border-radius: 0;
  padding: 0;
  line-height: 1;
  transition: all .14s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ft-card__btn:hover {
  border-color: var(--line-standard);
  background: #fff;
  color: var(--ink-primary);
}

.ft-empty {
  padding: 22px 14px;
  font-size: 12.5px;
  color: var(--ink-tertiary);
  text-align: center;
  line-height: 1.7;
}

.ft-empty a {
  color: var(--brand-blue, #3870c4);
  text-decoration: none;
  font-weight: 500;
}

.ft-task-pick {
  padding: 12px 14px 6px;
}

.ft-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line-weak, #e6e6e6);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-primary);
  border-radius: 0;
  outline: none;
  cursor: pointer;
  transition: border-color .14s;
}

.ft-select:focus {
  border-color: var(--ink-primary);
}

.ft-select:disabled {
  cursor: not-allowed;
  background: #fafaf8;
  color: var(--ink-secondary);
}

/* ===== 任务计时 · 自绘下拉 ===== */
.ft-dd {
  position: relative;
  width: 100%;
}
.ft-dd__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line-weak, #e6e6e6);
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color .14s, box-shadow .14s;
}
.ft-dd__btn:hover { border-color: #c9c4b8; }
.ft-dd.is-open .ft-dd__btn {
  border-color: var(--ink-primary);
  box-shadow: 0 2px 10px rgba(23, 21, 15, 0.08);
}
.ft-dd__btn:disabled {
  cursor: not-allowed;
  background: #fafaf8;
  color: var(--ink-secondary);
}
.ft-dd__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-dd__caret {
  font-size: 10px;
  color: var(--ink-secondary);
  transition: transform .16s;
}
.ft-dd.is-open .ft-dd__caret { transform: rotate(180deg); }
.ft-dd__menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: 60;
  max-height: 300px;
  overflow-y: auto;
  background: #fffdf9;
  border: 1px solid #d8d2c4;
  box-shadow: 0 -6px 24px rgba(23, 21, 15, 0.14);
  padding: 4px;
  scrollbar-width: thin;
}
.ft-dd__menu::-webkit-scrollbar { width: 8px; }
.ft-dd__menu::-webkit-scrollbar-thumb { background: #d8d2c4; }
.ft-dd__item {
  display: block;
  width: 100%;
  padding: 7px 9px;
  background: transparent;
  border: 0;
  font-family: var(--font-cn);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-primary);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-dd__item:hover { background: #f3efe6; }
.ft-dd__item.is-active {
  background: #17150f;
  color: #f7f4ee;
}

.ft-meta {
  padding: 6px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ft-meta__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
}

.ft-meta__label {
  font-size: 10.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

.ft-meta__value {
  font-size: 12px;
  color: var(--ink-primary);
  font-weight: 600;
}

.ft-meta__row--counting .ft-meta__label {
  color: #c44e4e;
}

.ft-meta__value--big {
  font-size: 18px;
  font-weight: 700;
  color: #b22a1f;
  letter-spacing: -0.01em;
}

/* ---------- 浮窗倒计时 ---------- */

.ft-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 8px 14px 0;
  padding: 3px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.ft-mode__tab {
  border: none;
  background: transparent;
  padding: 5px 0;
  font-size: 12px;
  color: var(--ink-secondary, #666);
  border-radius: 6px;
  cursor: pointer;
}

.ft-mode__tab.is-active {
  background: #fff;
  color: var(--ink-primary, #1a1a1a);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ft-cd-setup {
  margin: 8px 14px 0;
  display: grid;
  gap: 8px;
}

.ft-cd-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.ft-cd-chip {
  border: 1px solid var(--line, #e2ddd2);
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ink-secondary, #555);
  cursor: pointer;
}

.ft-cd-chip.is-active {
  border-color: #b22a1f;
  color: #b22a1f;
  font-weight: 600;
  background: rgba(178, 42, 31, 0.06);
}

.ft-cd-custom {
  width: 58px;
  border: 1px solid var(--line, #e2ddd2);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 12px;
  text-align: center;
}

.ft-cd-policy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-secondary, #666);
}

.ft-cd-policy select {
  flex: 1;
  border: 1px solid var(--line, #e2ddd2);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 12px;
  background: #fff;
}

.ft-cd-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 4px;
}

.ft-cd-live__label {
  font-size: 11px;
  color: #c44e4e;
  letter-spacing: 0.08em;
}

.ft-ring {
  position: relative;
  width: 88px;
  height: 88px;
}

.ft-ring svg {
  transform: rotate(-90deg);
}

.ft-ring__bg {
  fill: none;
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 5;
}

.ft-ring__fg {
  fill: none;
  stroke: #b22a1f;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s linear;
}

.ft-ring.is-over .ft-ring__fg {
  stroke: #e0332a;
}

.ft-ring__time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 16px;
  font-weight: 700;
  color: #b22a1f;
}

.ft-ring.is-over .ft-ring__time {
  color: #e0332a;
}

/* 到点闪烁（超时未结束） */
@keyframes ftAlarmFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 51, 42, 0.55); }
  50% { box-shadow: 0 0 0 10px rgba(224, 51, 42, 0); }
}

.ft-orb.is-alarm,
.ft-card.is-alarm {
  animation: ftAlarmFlash 1s ease-in-out infinite;
}

.pip-time.is-over {
  color: #e0332a;
}

.ft-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 14px 14px;
}

.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line-standard);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 12.5px;
  color: var(--ink-primary);
  cursor: pointer;
  border-radius: 0;
  transition: all .14s;
  line-height: 1;
}

.ft-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ft-btn__dot {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ink-secondary);
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}

.ft-btn--start:not(:disabled):hover {
  border-color: #4a9d6f;
  color: #2d6e4d;
  background: #f0fbf5;
}

.ft-btn--start.is-active {
  border-color: #c44e4e;
  background: #fff0ec;
  color: #b22a1f;
  font-weight: 700;
}

.ft-btn--start.is-active .ft-btn__dot {
  background: #c44e4e;
  border-color: #c44e4e;
  box-shadow: 0 0 0 3px rgba(196, 78, 78, 0.2);
  animation: tasksPulse 1.4s ease-in-out infinite;
}

.ft-btn--end:not(:disabled):hover {
  border-color: #c44e4e;
  color: #b22a1f;
  background: #fdf0f0;
}

/* =========================================================================
   Picture-in-Picture 独立窗口（pip-* 类，运行在 documentPictureInPicture 内）
   ========================================================================= */

.pip-card {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-cn, system-ui, sans-serif);
  background: #fff;
  color: var(--ink-primary, #1a1a1a);
  padding: 14px 16px;
  box-sizing: border-box;
}

.pip-card.is-counting {
  background: linear-gradient(180deg, #fff7f3, #fff);
}

.pip-head {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-weak, #ececea);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pip-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 红色小圆点 toggle：点击进入球态 */
.pip-ball-toggle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #d65c5c 0%, #b22a1f 100%);
  box-shadow:
    0 1px 3px rgba(178, 42, 31, 0.45),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  transition: transform .14s, box-shadow .14s;
  flex-shrink: 0;
}

.pip-ball-toggle:hover {
  transform: scale(1.2);
  box-shadow:
    0 2px 6px rgba(178, 42, 31, 0.65),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.pip-ball-toggle:active {
  transform: scale(0.95);
}

.pip-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-tertiary, #888);
}

.pip-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line-weak, #e6e6e6);
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  margin-bottom: 10px;
}

.pip-select:disabled {
  background: #fafaf8;
  cursor: not-allowed;
}

.pip-time-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
}

.pip-time-label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--ink-tertiary, #888);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pip-card.is-counting .pip-time-label {
  color: #c44e4e;
}

.pip-time {
  font-family: var(--font-mono, monospace);
  font-size: 36px;
  font-weight: 700;
  color: var(--ink-primary, #1a1a1a);
  letter-spacing: -0.02em;
  line-height: 1;
}

.pip-card.is-counting .pip-time {
  color: #b22a1f;
}

.pip-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line-standard, #d4d4d2);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-primary, #1a1a1a);
  cursor: pointer;
  border-radius: 0;
  transition: all .14s;
  font-weight: 500;
}

.pip-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pip-btn__dot {
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.pip-btn--start:not(:disabled):hover {
  border-color: #4a9d6f;
  color: #2d6e4d;
  background: #f0fbf5;
}

.pip-btn--end:not(:disabled):hover {
  border-color: #c44e4e;
  color: #b22a1f;
  background: #fdf0f0;
}

/* =========================================================================
   热力图当日详情 popover · 点格弹出
   ========================================================================= */

.heatmap-popover {
  position: fixed;
  z-index: 1000;
  width: 340px;
  max-height: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-standard, #e5e5e1);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.06);
  padding: 14px 16px;
  font-family: var(--font-cn);
  animation: heatPopoverIn .18s ease-out;
}

@keyframes heatPopoverIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.heatmap-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-weak, #ececea);
  flex-shrink: 0;
}

.heatmap-popover__date {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: 0.04em;
}

.heatmap-popover__close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-tertiary);
  cursor: pointer;
  padding: 0 6px;
  transition: color .14s;
}

.heatmap-popover__close:hover {
  color: var(--ink-primary);
}

.heatmap-popover__empty {
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-tertiary);
}

.heatmap-popover__total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.heatmap-popover__total-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: -0.01em;
}

.heatmap-popover__total-num small {
  font-size: 14px;
  margin-left: 1px;
  color: var(--ink-tertiary);
  font-weight: 500;
}

.heatmap-popover__total-label {
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

.heatmap-popover__groups {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-weak, #ececea);
  flex-shrink: 0;
}

.heatmap-popover__group {
  display: grid;
  grid-template-columns: 8px minmax(60px, 1fr) 60px auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 11.5px;
}

.heatmap-popover__group-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.heatmap-popover__group-name {
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heatmap-popover__group-bar {
  height: 4px;
  background: var(--line-weak, #ececea);
  border-radius: 0;
  overflow: hidden;
}

.heatmap-popover__group-bar-fill {
  display: block;
  height: 100%;
  border-radius: 0;
  transition: width .25s ease-out;
}

.heatmap-popover__group-ms {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-secondary);
  text-align: right;
  min-width: 50px;
}

.heatmap-popover__group-pct {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  text-align: right;
  min-width: 32px;
}

.heatmap-popover__sessions-title {
  font-size: 10.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.heatmap-popover__sessions {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.heatmap-popover__session {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  font-size: 11px;
  background: #fafaf8;
  border-radius: 0;
  transition: background .12s;
}

.heatmap-popover__session:hover {
  background: #f3f3f0;
}

.heatmap-popover__session-time {
  font-family: var(--font-mono);
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
  font-size: 10.5px;
}

.heatmap-popover__session-task {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heatmap-popover__session-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.heatmap-popover__session-dur {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-secondary);
  font-weight: 600;
}

/* PiP 球态（流体艺术方块）：紫罗兰 / 深红 / 琥珀橙的光斑缓慢漂移
   - 点击 PiP 任意处：召回完整 UI
   - 拖动 PiP 标题栏：浏览器原生拖动整个窗口到屏幕角落 */
.pip-card.is-ball {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  /* 主体底色：深紫黑 + 中央深红径向光晕（柔和过渡） */
  background:
    radial-gradient(ellipse 80% 60% at 50% 55%, rgba(225, 29, 72, 0.55) 0%, rgba(225, 29, 72, 0) 70%),
    linear-gradient(160deg, #2a1140 0%, #18091f 100%);
}

.pip-card.is-ball .pip-head,
.pip-card.is-ball .pip-select,
.pip-card.is-ball .pip-actions {
  display: none;
}

/* 紫罗兰大光斑：左上区域漂移 */
.pip-card.is-ball::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -25%;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.68) 0%, rgba(168, 85, 247, 0) 65%);
  filter: blur(18px);
  pointer-events: none;
  animation: pipFluidA 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* 琥珀橙大光斑：右下区域反向漂移 */
.pip-card.is-ball::after {
  content: '';
  position: absolute;
  bottom: -25%;
  right: -25%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.62) 0%, rgba(251, 146, 60, 0) 65%);
  filter: blur(20px);
  pointer-events: none;
  animation: pipFluidB 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes pipFluidA {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(45%, 30%) scale(1.1); }
  66%  { transform: translate(60%, 80%) scale(0.95); }
  100% { transform: translate(20%, 60%) scale(1.08); }
}

@keyframes pipFluidB {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-50%, -30%) scale(1.05); }
  66%  { transform: translate(-30%, -70%) scale(0.92); }
  100% { transform: translate(-65%, -45%) scale(1.1); }
}

.pip-card.is-ball .pip-time-block {
  /* 文字容器：铺满 PiP，居中，z-index 2 浮在光斑之上 */
  position: absolute;
  inset: 0;
  z-index: 2;
  background: none;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  padding: 0;
  animation: none;
}

.pip-card.is-ball .pip-time-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: pipLabelFade 4s ease-in-out infinite;
}

.pip-card.is-ball .pip-time {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 32px;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow:
    0 0 20px rgba(255, 220, 200, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  animation: pipTimeBreath 4s ease-in-out infinite;
}

@keyframes pipLabelFade {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

@keyframes pipTimeBreath {
  0%, 100% {
    text-shadow:
      0 0 16px rgba(255, 220, 200, 0.38),
      0 2px 6px rgba(0, 0, 0, 0.55);
  }
  50% {
    text-shadow:
      0 0 28px rgba(255, 220, 200, 0.7),
      0 2px 8px rgba(0, 0, 0, 0.6);
  }
}

/* =========================================================================
   Finance · 新建看板「先选类型」3 卡 modal
   ========================================================================= */

.modal__card.finance-pick-modal {
  width: min(720px, 94vw);
}

.finance-pick-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.finance-pick-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1.5px solid var(--line-standard);
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-cn);
  color: var(--ink-primary);
  transition: transform .12s ease-out, border-color .12s, background .12s, box-shadow .12s;
}

.finance-pick-card:hover {
  transform: translate(-2px, -2px);
  border-color: #1a1a1a;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.10);
}

.finance-pick-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  grid-column: 1;
  grid-row: 1;
}

.finance-pick-card__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.finance-pick-card__en {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
}

.finance-pick-card__desc {
  grid-column: 1;
  grid-row: 2;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-secondary);
  letter-spacing: 0.01em;
}

.finance-pick-card__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--ink-tertiary);
  transition: transform .14s, color .14s;
}

.finance-pick-card:hover .finance-pick-card__arrow {
  transform: translateX(6px);
  color: #1a1a1a;
}

/* 每个类型的语义色（左侧色带） */
.finance-pick-card--decision   { border-left: 4px solid #b84a55; }
.finance-pick-card--decision:hover { background: #fff8f7; }

.finance-pick-card--savings    { border-left: 4px solid #d4a83c; }
.finance-pick-card--savings:hover { background: #fffbef; }

.finance-pick-card--value {
  border-left: 4px solid #1a140a;
  background: linear-gradient(180deg, #ffffff 0%, #faf6ec 100%);
}
.finance-pick-card--value:hover {
  background: linear-gradient(180deg, #fdfaf0 0%, #f3eacf 100%);
  border-color: #c19248;
}
.finance-pick-card--value .finance-pick-card__label {
  color: #5a3a16;
}

/* =========================================================================
   Algorithm Info Modal · Top-3 精英加权决策说明
   ========================================================================= */

.modal__card.algo-info {
  width: min(640px, 94vw);
}

.algo-info__body {
  gap: 18px;
  padding: 20px 26px 24px;
}

.algo-info__sec {
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-weak, #e6e6e6);
}

.algo-info__sec:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.algo-info__sec--note {
  background: #fdf9ee;
  border: 1px solid #f0e1b8;
  border-radius: 0;
  padding: 14px 16px;
}

.algo-info__h {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

.algo-info__sec p {
  font-family: var(--font-cn);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-secondary);
  margin: 0;
}

.algo-info__sec p code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 6px;
  background: #f3f3f1;
  border: 1px solid #e2e2df;
  color: var(--ink-primary);
}

.algo-info__ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-family: var(--font-cn);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-secondary);
}

.algo-info__ul li {
  margin-bottom: 2px;
}

.algo-info__table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-secondary);
}

.algo-info__table th,
.algo-info__table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-weak, #e8e8e6);
  text-align: left;
  vertical-align: middle;
}

.algo-info__table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
  background: #fafaf8;
}

.algo-info__table td:nth-child(n+2) {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-primary);
  white-space: nowrap;
}

.algo-info__table tr:last-child th,
.algo-info__table tr:last-child td {
  border-bottom: none;
}

.algo-info__go   { color: #4a9d6f !important; }
.algo-info__stop { color: #c44e4e !important; }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 900px) {
  .home__hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .titan-stage {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 18px 22px;
  }

  .titan-svg,
  .pedestal {
    justify-self: center;
  }

  .titan-svg {
    width: min(500px, 86vw);
  }
}

@media (max-width: 768px) {
  .home__hero { padding: 48px 20px 32px; }
  .home__title { font-size: 36px; }
  .home__grid { grid-template-columns: 1fr; }
  .board-entry {
    border-right: none !important;
    padding: 32px 20px;
    min-height: 200px;
  }
  .page__body { padding: 20px; }
  .app-header { padding: 0 16px; }
  .opinion-form__row { grid-template-columns: 1fr 1fr; }
  .graph-detail { width: calc(100% - 32px); }
}

/* =========================================================================
   Step Modal · 五步循环输入框（硬朗几何）
   ========================================================================= */

.step-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 20, 25, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: stepModalFadeIn .14s ease-out;
}

@keyframes stepModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.step-modal {
  background: var(--bg-primary);
  border: 2px solid var(--ink-primary);
  border-radius: 0;
  width: 560px;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 12px 12px 0 0 rgba(15, 20, 25, .08);
}

/* 顶部标题条 · 细长矩形 · 左对齐 "一：目标" + 小输入框（题目/纲领）*/
.step-modal__title-bar {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 22px;
  gap: 14px;
  border-bottom: 1.5px solid var(--ink-primary);
  background: var(--bg-secondary);
}

.step-modal__title-num {
  font-family: var(--font-cn);
  font-size: 19px;
  font-weight: 600;
  color: var(--vermilion);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.step-modal__title-label {
  font-family: var(--font-cn);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink-primary);
  letter-spacing: 0.02em;
  margin-left: 2px;
  flex-shrink: 0;
}

/* 小输入框：题目/纲领 inline 在标题条内，占剩余宽度 */
.step-modal__title-input {
  flex: 1;
  height: 32px;
  min-width: 0;
  padding: 0 12px;
  font-family: var(--font-cn);
  font-size: 14px;
  color: var(--ink-primary);
  background: var(--bg-primary);
  border: 1.5px solid var(--ink-primary);
  border-radius: 0;
  outline: none;
  transition: border-color .12s ease-out;
}

.step-modal__title-input:focus {
  border-color: var(--vermilion);
  box-shadow: inset 0 0 0 1px var(--vermilion);
}

.step-modal__title-input::placeholder {
  color: var(--ink-tertiary);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.step-modal__meta {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 主体内容区 */
.step-modal__body {
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow: auto;
}

.step-modal__sublabel {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.step-modal__textarea {
  width: 100%;
  min-height: 240px;
  padding: 14px 16px;
  font-family: var(--font-cn);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-primary);
  background: var(--bg-primary);
  border: 1.5px solid var(--ink-primary);
  border-radius: 0;
  resize: vertical;
  outline: none;
  transition: border-color .12s ease-out;
}

.step-modal__textarea:focus {
  border-color: var(--vermilion);
  box-shadow: inset 0 0 0 1px var(--vermilion);
}

.step-modal__textarea::placeholder {
  color: var(--ink-disabled);
  font-style: italic;
}

/* 底部按钮区 */
.step-modal__footer {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  border-top: 1.5px solid var(--ink-primary);
  background: var(--bg-secondary);
}

.step-modal__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.step-modal__actions {
  display: flex;
  gap: 10px;
}

.step-modal__btn {
  height: 36px;
  padding: 0 20px;
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid var(--ink-primary);
  border-radius: 0;
  background: transparent;
  color: var(--ink-primary);
  cursor: pointer;
  transition: background .12s ease-out, color .12s ease-out;
}

.step-modal__btn:hover {
  background: var(--bg-tertiary);
}

.step-modal__btn--primary {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fff;
}

.step-modal__btn--primary:hover {
  background: var(--vermilion-deep);
  border-color: var(--vermilion-deep);
}

/* =========================================================================
   Spiral Toolbar · 右下角工具栏（缩放 / 定位 / 重置）
   ========================================================================= */

/* 工具栏：右上区、锐利直角、细长、米白半透明 */
.spiral-toolbar {
  position: fixed;
  top: 32px;
  right: 56px;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: 101;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: rgba(255, 252, 245, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.25px solid #1A1A1A;
  border-radius: 0;             /* 锐利直角 */
  box-shadow: 4px 4px 0 0 rgba(15, 20, 25, 0.10);
}

.spiral-toolbar__btn {
  width: 48px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #1A1A1A;
  background: transparent;
  border: 0;
  border-radius: 0;             /* 直角 */
  cursor: pointer;
  transition: background .14s ease-out, color .14s ease-out;
  user-select: none;
}

.spiral-toolbar__btn:hover {
  background: rgba(26, 26, 26, 0.08);
  color: #1A1A1A;
}

.spiral-toolbar__btn--accent {
  background: var(--vermilion);
  color: #fff;
}

.spiral-toolbar__btn--accent:hover {
  background: var(--vermilion-deep);
  color: #fff;
}

/* =========================================================================
   Playbook Honeycomb · 02 工作流档案大理石瓷砖（gap=0 紧贴 + 凸起反光）
   ========================================================================= */

.playbook-honeycomb {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  background: #f0f0ef;                                  /* 缝隙色 */
}

.playbook-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 14px 12px;
  /* 大理石光泽：左上极亮，右下微灰 */
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 55%, #f1f1f0 100%);
  border: none;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1),
              background .22s ease-out;
  /* 瓷砖凸起：内高光（左上）+ 内阴影（右下）+ 外微阴影 */
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    inset -1px -1px 2px rgba(0, 0, 0, 0.06);
}

/* hover：微微凸起 + 加强高光反光，z-index 提升盖住邻砖 */
.playbook-cell:hover {
  z-index: 2;
  transform: scale(1.06);
  background: linear-gradient(135deg, #ffffff 0%, #fdfdfd 50%, #f6f6f5 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    inset -1px -1px 2px rgba(0, 0, 0, 0.04),
    0 8px 22px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.06);
}

.playbook-cell__title {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.35;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.playbook-cell__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* === 空瓷砖：跟 base 一样（继承 .playbook-cell 的大理石样式）=== */
.playbook-cell--empty {
  /* 不覆盖背景，使用 base 的 linear-gradient */
}

/* =========================================================================
   05 人物志 · 细长乳白钢琴键 + 两侧古籍装饰带
   ========================================================================= */

.people-page,
.person-detail-page {
  background: #ffffff;
}

/* ---- 外框：铺满画面，仅留少量边距 ---- */
.people-frame {
  max-width: none;
  margin: 8px 24px 0;
  padding: 12px 0;
}

/* ---- 钢琴键 grid：响应式自适应铺满（宽屏多列 / 窄屏少列） ---- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1px;
  background: #e0d4ba;          /* 暖米褐分割线 */
  border: 1px solid #d4c4a4;
  box-shadow:
    /* 顶部白 hairline + 底部暖棕柔光 */
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 28px rgba(140, 90, 50, 0.1),
    0 2px 6px rgba(140, 90, 50, 0.06);
}

@media (max-width: 720px) {
  .people-frame { margin: 8px 12px; padding: 8px 0; }
  .people-grid  { grid-template-columns: 1fr; }
}

/* ---- 单张钢琴键（细长、暖白象牙） ---- */
.person-card {
  --accent: #b8a78a;
  display: grid;
  grid-template-columns: 64px 1fr;
  height: 76px;
  align-items: stretch;
  /* 暖白象牙渐变 */
  background:
    linear-gradient(180deg,
      #fefaf2 0%,
      #fbf4e6 35%,
      #f5ecd6 100%);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background .18s ease-out, transform .12s ease-out;
}

/* 顶部象牙光泽 hairline */
.person-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.95) 30%,
    rgba(255, 255, 255, 0.95) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.person-card:hover {
  background:
    linear-gradient(180deg,
      #fffdf7 0%,
      #fdf7e8 30%,
      #f8efdb 100%);
}

.person-card:active {
  transform: translateY(1px);
}

/* 关系色 avatar：钢琴琴键侧面的色标 */
.person-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-cn);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 92%, white) 0%,
      var(--accent) 50%,
      color-mix(in srgb, var(--accent) 78%, black) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
  user-select: none;
  box-shadow:
    inset -1px 0 0 rgba(0, 0, 0, 0.22),
    inset 1px 0 0 rgba(255, 255, 255, 0.25);
}

.person-card__main {
  padding: 11px 18px 11px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.person-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.person-card__name {
  margin: 0;
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 700;
  color: #3a2e22;  /* 暖深棕（替代冷黑） */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

.person-card__relation {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 1px 7px;
  border-radius: 0;
  flex-shrink: 0;
  letter-spacing: 0.12em;
}

.person-card__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #9a8260;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

.person-card__marks {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}

.person-card__mark {
  font-family: var(--font-cn);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  background: rgba(200, 150, 80, 0.12);
  border: 1px solid rgba(180, 130, 70, 0.28);
  color: #7a5a3a;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.person-card__mark--empty {
  background: transparent;
  border: 1px dashed rgba(180, 130, 70, 0.28);
  color: rgba(120, 90, 60, 0.55);
  font-style: italic;
}

.person-card__mark--more {
  background: rgba(140, 90, 50, 0.18);
  border-color: rgba(140, 90, 50, 0.32);
  color: #5a3e22;
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ============= 人物详情页 ============= */
.person-detail__body {
  max-width: 880px;
  margin: 0 auto;
  padding-top: 24px;
}

/* hero */
.person-hero {
  --accent: #999;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 22px;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 55%, #f1f1f0 100%);
  border: 1px solid #e0e0e0;
  border-left: 5px solid var(--accent);
  padding: 22px 28px;
  margin-bottom: 20px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 4px 14px rgba(0, 0, 0, 0.07);
}

.person-hero__avatar {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-cn);
  font-size: 44px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 90%, white),
    var(--accent),
    color-mix(in srgb, var(--accent) 80%, black));
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.person-hero__main { min-width: 0; }

.person-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 3px 10px;
  border-radius: 0;
  margin-bottom: 8px;
}

.person-hero__name {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-primary);
  padding: 2px 0;
  outline: none;
  border-bottom: 1px dashed transparent;
  margin-bottom: 10px;
}
.person-hero__name:hover { border-bottom-color: #d8d8d8; }
.person-hero__name:focus { border-bottom-color: var(--accent); }

/* 详情页备注胶囊（点击编辑） */
.person-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.person-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-cn);
  font-size: 12.5px;
  padding: 4px 12px;
  background: linear-gradient(180deg, #fdfaf0 0%, #f5edd6 100%);
  border: 1px solid rgba(180, 145, 80, 0.35);
  color: #4a4232;
  border-radius: 0;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.02em;
  transition: all .15s ease-out;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 1px rgba(80, 60, 30, 0.06);
}

.person-mark:hover {
  background: linear-gradient(180deg, #fffdf6 0%, #f9f1dc 100%);
  border-color: var(--accent, #b8945a);
  color: #2a2620;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 6px rgba(80, 60, 30, 0.1);
}

.person-mark__title {
  font-weight: 500;
}

.person-mark__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--accent, #b8945a);
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
}

.person-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.person-hero__tag {
  font-family: var(--font-cn);
  font-size: 11px;
  padding: 2px 9px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--ink-secondary);
  border-radius: 0;
}

/* sections */
.person-section {
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  border: 1px solid #e0e0e0;
  padding: 18px 22px;
  margin-bottom: 14px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 2px 4px rgba(0, 0, 0, 0.04);
}

.person-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e6e6e6;
}

.person-section__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-tertiary);
}

.person-section__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
}

.person-about {
  display: block;
  width: 100%;
  min-height: 180px;
  border: none;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-primary);
  outline: none;
  resize: none;
  letter-spacing: 0.01em;
  transition: min-height .2s ease-out;
}
.person-about:focus { min-height: 320px; }

/* notes */
.person-notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.person-note {
  background: #fcfcfc;
  border: 1px solid #e6e6e6;
  border-left: 3px solid var(--accent, #999);
  padding: 12px 16px;
}

.person-note__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #ebebeb;
}

.person-note__date {
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-primary);
  padding: 2px 4px;
  outline: none;
  border-bottom: 1px dashed transparent;
}
.person-note__date:hover { border-bottom-color: #d8d8d8; }
.person-note__date:focus { border-bottom-color: var(--vermilion); }

.person-note__rel {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-left: auto;
}

.person-note__del {
  width: 24px;
  height: 24px;
  border: 1px solid #d8d8d8;
  background: linear-gradient(135deg, #fff, #ededec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  border-radius: 0;
  transition: all .15s ease-out;
}
.person-note__del:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  background: linear-gradient(135deg, #fff, #fdf0f0);
}

.person-note__content {
  display: block;
  width: 100%;
  min-height: 60px;
  border: none;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-primary);
  outline: none;
  resize: none;
  transition: min-height .2s ease-out;
}
.person-note__content:focus { min-height: 180px; }

/* =========================================================================
   03 文本素材收集器 · 象牙白烫金书脊（典雅 · 私人图书馆）
   ========================================================================= */

/* 整页：纯净象牙白底（无渐变、无点阵），克制极简 */
.material-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height, 64px));
  overflow: hidden;
  background: #fbf8ee;       /* 单色象牙白，平整无渐变 */
}

.author-folder-page {
  background:
    radial-gradient(rgba(80, 80, 80, 0.05) 1px, transparent 1px) 0 0 / 14px 14px,
    #f4f4f4;
}

/* 03 顶部 toolbar：象牙白半透 + 烫金细线（material-page 已定高，无需 sticky） */
.material-page .page__toolbar {
  flex: 0 0 auto;
  background: rgba(253, 251, 243, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(193, 146, 72, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.material-page .page__toolbar .btn-back,
.material-page .page__toolbar .page__title {
  color: #3d2a18;
  letter-spacing: 0.04em;
}
.material-page .page__toolbar .page__title-num {
  color: #c19248;
  font-weight: 600;
}
.material-page .page__toolbar .btn {
  background: linear-gradient(180deg, #ffffff 0%, #f8efd9 100%);
  border: 1px solid #c19248;
  color: #3d2a18;
  letter-spacing: 0.06em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.material-page .page__toolbar .btn:hover {
  border-color: #a07634;
  background: linear-gradient(180deg, #fdfbf3 0%, #efe1bb 100%);
  color: #6a4520;
  box-shadow: 0 2px 8px -2px rgba(193, 146, 72, 0.45);
}

.material-page__body {
  flex: 1;
  padding: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---- 横向无限书架容器：撑满 page__body 剩余高度，无滚动条、键盘左右键控制滚动 ---- */
.bookshelf {
  width: 100%;
  flex: 1;                     /* 撑满 material-page__body 剩余空间（顶到屏幕底部） */
  min-height: 0;
  margin: 0;
  display: flex;               /* 让 row 作为 flex 子元素，配合 row flex: 1 撑满 bookshelf 高度 */
  flex-direction: column;
  overflow-x: auto;            /* 横向仍可滚 */
  overflow-y: hidden;
  scrollbar-width: none;       /* Firefox 隐藏 */
  -ms-overflow-style: none;    /* IE/Edge 兼容 */
  outline: none;
  scroll-behavior: smooth;     /* 键盘箭头滚动时丝滑 */
}

.bookshelf::-webkit-scrollbar { display: none; }  /* Chrome / Safari 隐藏 */

.bookshelf__row {
  flex: 1;                     /* 撑满 bookshelf 高度（不依赖 height: 100%） */
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;        /* prism 自动 stretch 到 row 高度 */
  gap: 0;
  padding: 0;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
}

.bookshelf__hint {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 20px;
  text-align: center;
  font-family: var(--font-cn);
  font-size: 11px;
  color: #6a4520;
  letter-spacing: 0.14em;
  background: rgba(253, 251, 243, 0.92);
  border: 1px solid #c19248;
  backdrop-filter: blur(10px);
  border-radius: 0;                  /* 改直角更典雅，呼应整体精英风 */
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 16px -6px rgba(193, 146, 72, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* === 纸片书脊：纯色 + 单道金线分隔，细长轻薄 === */
.prism {
  --w: 36px;                 /* 从 64 → 36，更细 */
  --hue: 0deg;
  width: var(--w);
  flex: 0 0 var(--w);
  align-self: stretch;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: #f4ead0;       /* 纯单色米黄，无渐变 */
  border: none;
  border-radius: 0;
  /* 仅一道右侧细金线分隔，左侧由相邻 prism 提供，整列像书架排列的薄册 */
  box-shadow: inset -1px 0 0 rgba(160, 118, 52, 0.28);
  transition: background .25s ease-out, transform .25s ease-out, z-index 0s linear .25s;
}

/* 内层装饰：去掉斜纹 + 光晕，保留 DOM 占位避免 JS 报错 */
.prism__refraction,
.prism__shine {
  display: none;
}

/* 作者名：竖排细瘦衬线（无光晕、无金色描边，黑墨色字芯） */
.prism__author {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 14px;             /* 22 → 14，更细瘦 */
  font-weight: 500;
  letter-spacing: 0.22em;
  color: #3d2a18;
  z-index: 3;
  user-select: none;
  max-height: 78%;
  overflow: hidden;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  transition: color .2s ease-out;
}

/* 数量徽章：纯透明数字（无背景、无金边），仅底部小数字 */
.prism__count {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: rgba(106, 69, 32, 0.6);
  background: transparent;
  border: none;
  padding: 0;
  z-index: 4;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* hover：纯净提亮（背景变浅米黄 + 上浮 2px），无金光描边 */
.prism:hover {
  z-index: 5;
  transition-delay: 0s;
  transform: translateY(-2px);
  background: #f8f0db;
  box-shadow: inset -1px 0 0 rgba(160, 118, 52, 0.45);
}

.prism:hover .prism__author {
  color: #1a1a1a;
}

/* 棱镜删除按钮：右上角，hover 棱镜时淡入；点击删除该作者所有素材 */
.prism__del {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(160, 118, 52, 0.5);
  border-radius: 50%;
  background: rgba(255, 250, 235, 0.92);
  color: #6a4520;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease-out, background .15s, border-color .15s, color .15s;
}
.prism:hover .prism__del {
  opacity: 1;
  pointer-events: auto;
}
.prism__del:hover {
  background: rgba(184, 80, 61, 0.92);
  border-color: rgba(120, 50, 38, 0.85);
  color: #ffffff;
}

/* ============= 作者文件夹页（冷白调） ============= */
.author-folder__body {
  max-width: 880px;
  margin: 0 auto;
  padding-top: 32px;
}

.author-folder__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 55%, #f1f1f0 100%);
  border: 1px solid #e0e0e0;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 4px 12px rgba(0, 0, 0, 0.06);
}

.author-folder__spine-glyph {
  --spine-color: #3a4a5c;
  flex: 0 0 14px;
  align-self: stretch;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--spine-color) 70%, black),
    var(--spine-color),
    color-mix(in srgb, var(--spine-color) 70%, black));
  box-shadow:
    inset -1px 0 2px rgba(0, 0, 0, 0.4),
    inset 1px 0 1px rgba(255, 255, 255, 0.15);
}

.author-folder__meta { flex: 1; min-width: 0; }

.author-folder__name {
  margin: 0 0 4px;
  font-family: var(--font-cn);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: 0.04em;
}

.author-folder__stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}

/* ---- 单条素材卡（冷白大理石） ---- */
.material-entries {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.material-entry {
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 55%, #f1f1f0 100%);
  border: 1px solid #e0e0e0;
  padding: 16px 22px 14px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 2px 4px rgba(0, 0, 0, 0.04);
}

.material-entry__head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e6e6e6;
  margin-bottom: 12px;
}

.material-entry__title {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-primary);
  padding: 4px 0;
  outline: none;
  border-bottom: 1px dashed transparent;
}
.material-entry__title:hover { border-bottom-color: #d8d8d8; }
.material-entry__title:focus { border-bottom-color: var(--vermilion); }

.material-entry__source {
  width: 200px;
  border: none;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-tertiary);
  padding: 3px 6px;
  outline: none;
  border-bottom: 1px dashed transparent;
  text-align: right;
}
.material-entry__source:hover { border-bottom-color: #d8d8d8; }
.material-entry__source:focus { border-bottom-color: var(--vermilion); font-style: normal; }

.material-entry__del {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid #d8d8d8;
  background: linear-gradient(135deg, #fff, #ededec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  border-radius: 0;
  transition: all .15s ease-out;
}
.material-entry__del:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  background: linear-gradient(135deg, #fff, #fdf0f0);
}

.material-entry__content {
  display: block;
  width: 100%;
  min-height: 120px;
  border: none;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-primary);
  outline: none;
  resize: none;
  letter-spacing: 0.01em;
  transition: min-height .2s ease-out;
}
.material-entry__content:focus { min-height: 260px; }

.material-entry__foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e6e6e6;
  display: flex;
  align-items: center;
  gap: 12px;
}

.material-entry__tags {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-secondary);
  letter-spacing: 0.04em;
  padding: 3px 0;
  outline: none;
  border-bottom: 1px dashed transparent;
}
.material-entry__tags:hover { border-bottom-color: #d8d8d8; }
.material-entry__tags:focus { border-bottom-color: var(--vermilion); }

.material-entry__date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-tertiary);
  letter-spacing: 0.06em;
}

@media (max-width: 720px) {
  .prism { --w: 28px; }
  .prism__author { font-size: 11px; letter-spacing: 0.12em; }
  .author-folder__head { padding: 16px 18px; }
  .author-folder__name { font-size: 22px; }
  .material-entry { padding: 14px 16px; }
  .material-entry__source { width: 140px; }
}

/* =========================================================================
   04 决策列表 · 加权分组 + 长方形决策卡
   ========================================================================= */

.decision-group {
  margin-bottom: 28px;
}

.decision-group__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-left: 4px solid var(--group-color, #999);
  background: linear-gradient(90deg, var(--group-bg, #f5f5f5), transparent 80%);
}

.decision-group--go      { --group-color: #4a9d6f; --group-bg: rgba(74, 157, 111, 0.10); }
.decision-group--wait    { --group-color: #d49c3d; --group-bg: rgba(212, 156, 61, 0.10); }
.decision-group--stop    { --group-color: #c44e4e; --group-bg: rgba(196, 78, 78, 0.10); }
.decision-group--neutral { --group-color: #999;     --group-bg: rgba(0, 0, 0, 0.05);    }

.decision-group__title {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-primary);
}

.decision-group__subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.06em;
}

.decision-group__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
}

.decision-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.decision-card {
  display: grid;
  grid-template-columns: 6px 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 14px 22px 14px 0;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 55%, #f1f1f0 100%);
  border: 1px solid #e0e0e0;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease-out, box-shadow .15s ease-out, border-color .15s ease-out;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.decision-card:hover {
  transform: translateX(3px);
  border-color: var(--card-accent, #999);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 1),
    0 4px 14px rgba(0, 0, 0, 0.08);
}

.decision-card--go      { --card-accent: #4a9d6f; }
.decision-card--wait    { --card-accent: #d49c3d; }
.decision-card--stop    { --card-accent: #c44e4e; }
.decision-card--neutral { --card-accent: #999;    }

.decision-card__indicator {
  align-self: stretch;
  background: var(--card-accent);
  box-shadow: inset -1px 0 2px rgba(0, 0, 0, 0.15);
}

.decision-card__main {
  min-width: 0;
  padding-left: 4px;
}

.decision-card__title {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.4;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-tertiary);
  text-transform: uppercase;
}

.decision-card__score {
  text-align: right;
  padding-right: 18px;
  border-right: 1px solid #e0e0e0;
  min-width: 60px;
}

.decision-card__score-num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--card-accent);
  letter-spacing: -0.02em;
}

.decision-card__score-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}

.decision-card__verdict {
  min-width: 130px;
  text-align: right;
}

.decision-card__verdict-label {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--card-accent);
  margin-bottom: 2px;
}

.decision-card__verdict-hint {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-tertiary);
}

@media (max-width: 720px) {
  .decision-card {
    grid-template-columns: 6px 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 14px;
    padding-right: 16px;
  }
  .decision-card__main { grid-column: 2 / 3; grid-row: 1; }
  .decision-card__score { grid-column: 3; grid-row: 1; border-right: none; padding-right: 0; }
  .decision-card__verdict { grid-column: 2 / 4; grid-row: 2; text-align: left; }
}

/* === 警示灯：填了内容后，四周深红 → 中间浅红 + 脉冲呼吸 === */
.playbook-cell--filled {
  background:
    radial-gradient(
      circle at 50% 50%,
      var(--vermilion-faint) 0%,
      var(--vermilion-soft) 38%,
      rgba(196, 62, 62, 0.55) 88%,
      var(--vermilion) 105%
    );
  border-right-color: var(--vermilion);
  border-bottom-color: var(--vermilion);
  animation: playbookWarningPulse 2.8s ease-in-out infinite;
}

.playbook-cell--filled .playbook-cell__title {
  color: var(--vermilion-deep);
}

.playbook-cell--filled .playbook-cell__meta {
  color: var(--vermilion-deep);
  opacity: 0.7;
}

@keyframes playbookWarningPulse {
  0%, 100% {
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 0 14px 2px rgba(165, 50, 50, 0.28);
  }
  50% {
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 0 28px 4px rgba(165, 50, 50, 0.55);
  }
}

/* =========================================================================
   06 看板 · 原则层级系统 · 错落 tab 蓝白档案柜（紧凑版）
   外页：每条 = 一档蓝白文件夹，顶部 tab 标签依次右移（梯田错落）
   ========================================================================= */

.folders-page {
  background: #ffffff;
}

/* ===== 06 标题区：左侧三段式 + 右侧花纹按钮 ===== */
.folders-head {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.folders-head__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.folders-head__rule {
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, #1f2937 0%, #475569 100%);
  margin-bottom: 4px;
}
.folders-head__cn {
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #0f172a;
  line-height: 1;
  margin: 0;
}
.folders-head__en {
  font-family: "Cormorant Garamond", "Garamond", "Georgia", serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.32em;
  color: #94a3b8;
  text-transform: uppercase;
  padding-left: 1px;
}
.folders-head__hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: #64748b;
  letter-spacing: 0.02em;
}

/* ===== 花纹按钮（深色金属 + 四角金线 + 衬线加号 + 中英组合） ===== */
.ornate-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px 14px 20px;
  background: linear-gradient(180deg, #1f2937 0%, #0b1220 100%);
  border: 1px solid #0b1220;
  color: #e2e8f0;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  transition: transform .15s, box-shadow .25s;
}
.ornate-btn::before {
  /* 顶部 1px 金属反光 */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 150, 0.45) 50%, transparent 100%);
  pointer-events: none;
}
.ornate-btn::after {
  /* hover 横向扫光 */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 150, 0.18), transparent);
  transform: skewX(-22deg);
  transition: left .6s ease-out;
  pointer-events: none;
}
.ornate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(199, 147, 91, 0.55);
}
.ornate-btn:hover::after { left: 130%; }
.ornate-btn:active { transform: translateY(0); }

/* 四角金线装饰 */
.ornate-btn__corner {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.ornate-btn__corner--tl {
  top: 4px; left: 4px;
  border-top: 1px solid #c7935b;
  border-left: 1px solid #c7935b;
}
.ornate-btn__corner--tr {
  top: 4px; right: 4px;
  border-top: 1px solid #c7935b;
  border-right: 1px solid #c7935b;
}
.ornate-btn__corner--bl {
  bottom: 4px; left: 4px;
  border-bottom: 1px solid #c7935b;
  border-left: 1px solid #c7935b;
}
.ornate-btn__corner--br {
  bottom: 4px; right: 4px;
  border-bottom: 1px solid #c7935b;
  border-right: 1px solid #c7935b;
}

.ornate-btn__plus {
  font-family: "Cormorant Garamond", "Garamond", "Georgia", serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  color: #c7935b;
  padding-bottom: 2px;
}
.ornate-btn__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border-left: 1px solid rgba(199, 147, 91, 0.35);
  padding-left: 14px;
}
.ornate-btn__cn {
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #f8fafc;
}
.ornate-btn__en {
  font-family: "Cormorant Garamond", "Garamond", "Georgia", serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: #c7935b;
  text-transform: uppercase;
}

.folders-page__body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

.folders {
  display: flex;
  flex-direction: column;
  gap: 6px;            /* 紧凑：相邻文件夹之间仅 6px */
  padding-top: 32px;   /* 第一个 tab 露出 */
}

/* ---- 单条文件夹 ---- */
.folder {
  --folder-color: #3d6090;
  --tab-offset: 32px;
  position: relative;
  height: 76px;        /* 紧凑：从 102 → 76 */
  cursor: pointer;
  transition: transform .14s ease-out, box-shadow .18s ease-out;
  /* 白底（极浅蓝晕） */
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      color-mix(in srgb, var(--folder-color) 5%, #ffffff) 100%);
  border: 1px solid color-mix(in srgb, var(--folder-color) 22%, #e2e8f0);
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(40, 70, 120, 0.06),
    0 4px 10px rgba(40, 70, 120, 0.05);
  text-align: left;
  font: inherit;       /* 让 button 元素继承字体 */
  color: inherit;
  padding: 0;
}

/* 左侧色条（项目主色） */
.folder::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--folder-color);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.12);
  border-radius: 0;
}

.folder:hover {
  transform: translateY(-2px);
  z-index: 5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 3px 6px rgba(40, 70, 120, 0.14),
    0 10px 20px rgba(40, 70, 120, 0.1);
  border-color: color-mix(in srgb, var(--folder-color) 45%, #e2e8f0);
}

.folder:hover .folder__tab {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 0 rgba(0, 0, 0, 0.18),
    0 -3px 6px rgba(40, 70, 120, 0.18);
}

.folder:active {
  transform: translateY(0);
}

/* ---- 顶部 tab（凸出，左偏移由 --tab-offset 控制） ---- */
.folder__tab {
  position: absolute;
  top: -22px;
  left: var(--tab-offset);
  width: 92px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg,
      var(--folder-color) 0%,
      color-mix(in srgb, var(--folder-color) 82%, black) 100%);
  border: 1px solid color-mix(in srgb, var(--folder-color) 82%, black);
  border-bottom: none;
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset -1px 0 0 rgba(0, 0, 0, 0.15),
    0 -2px 4px rgba(40, 70, 120, 0.1);
  transition: transform .12s ease-out, box-shadow .15s ease-out;
  /* 右上斜角模拟纸标签折角 */
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 100%, 0 100%);
}

.folder__tab-name {
  font-family: var(--font-cn);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 76px;
}

/* ---- 主体内容（紧凑） ---- */
.folder__body {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 10px 22px 10px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.folder__title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.folder__title {
  margin: 0;
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 700;
  color: #1a3454;
  letter-spacing: 0.02em;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder__meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: #6b7e9a;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
}

.folder__summary {
  margin: 0;
  font-family: var(--font-cn);
  font-size: 12.5px;
  line-height: 1.45;
  color: #4a5d7c;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- 「+ 新建项目」按钮：同档案柜风格，虚线占位 ---- */
.folder--new {
  --folder-color: #6b7e9a;
  background: rgba(245, 248, 252, 0.6);
  border: 1.5px dashed color-mix(in srgb, var(--folder-color) 50%, #cbd5e1);
  box-shadow: none;
}

.folder--new::before {
  background: transparent;
  border-left: 1.5px dashed color-mix(in srgb, var(--folder-color) 70%, #cbd5e1);
  box-shadow: none;
  border-radius: 0;
}

.folder--new:hover {
  background: #ffffff;
  border-color: var(--folder-color);
  border-style: solid;
  box-shadow:
    0 4px 8px rgba(40, 70, 120, 0.12),
    0 12px 24px rgba(40, 70, 120, 0.08);
}

.folder--new:hover::before {
  background: var(--folder-color);
  border-left: none;
}

.folder__tab--new {
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #f1f5fa 100%);
  border: 1.5px dashed color-mix(in srgb, var(--folder-color) 60%, #cbd5e1);
  border-bottom: none;
  box-shadow: none;
}

.folder__tab--new .folder__tab-name {
  color: var(--folder-color);
  text-shadow: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.folder--new:hover .folder__tab--new {
  background: linear-gradient(180deg, var(--folder-color), color-mix(in srgb, var(--folder-color) 80%, black));
  border: 1.5px solid color-mix(in srgb, var(--folder-color) 80%, black);
  border-bottom: none;
}

.folder--new:hover .folder__tab--new .folder__tab-name {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.folder__body--new {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-left: 22px;
}

.folder--new__plus {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 300;
  color: var(--folder-color);
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid color-mix(in srgb, var(--folder-color) 50%, #cbd5e1);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all .15s ease-out;
}

.folder--new:hover .folder--new__plus {
  background: var(--folder-color);
  color: #fff;
  border-color: var(--folder-color);
}

.folder--new__label {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--folder-color);
  letter-spacing: 0.04em;
}

.folder--new__hint {
  font-family: var(--font-cn);
  font-size: 11px;
  color: rgba(107, 126, 154, 0.7);
  margin-left: auto;
  letter-spacing: 0.02em;
}

/* ---- 详情页：思维导图画布 ---- */
.folder-mind-page {
  --folder-color: #3d6090;
  background: #eef2f6;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px); /* 减 app-header 高度 */
  overflow: hidden;
}

body.mind-page-open {
  overflow: hidden;
}

.mind-toolbar {
  position: fixed;
  left: 18px;
  top: 76px;
  z-index: 60;
}
.mind-toolbar__hub {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #e2e8f0 14%, #4a5568 60%, #1f2937 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.55),
    inset 0 -6px 14px rgba(15, 23, 42, 0.42),
    0 6px 18px rgba(15, 23, 42, 0.28),
    0 14px 32px rgba(15, 23, 42, 0.20);
  transition: transform .15s ease-out;
  position: relative;
  display: block;
  padding: 0;
}
.mind-toolbar__hub:hover  { transform: scale(1.05); }
.mind-toolbar__hub:active { transform: scale(0.97); }
.mind-toolbar__hub-glow {
  position: absolute;
  top: 8px;
  left: 14px;
  width: 18px;
  height: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50%;
  filter: blur(0.5px);
  pointer-events: none;
}
.mind-toolbar__panel {
  position: absolute;
  left: 70px;
  top: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: #1f2937;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 24px rgba(15, 23, 42, 0.18);
  min-width: 46px;
}
.mind-toolbar[data-expanded="true"] .mind-toolbar__panel {
  display: flex;
}

.mind-toolbar__title {
  width: 28px;
  height: 18px;
  overflow: hidden;
  color: transparent;
  border-radius: 0;
  background:
    radial-gradient(circle at 8px 9px, #cbd5e1 0 6px, transparent 7px),
    radial-gradient(circle at 18px 7px, #ffffff 0 7px, transparent 8px),
    radial-gradient(circle at 25px 10px, #ffffff 0 5px, transparent 6px);
  margin-bottom: 4px;
}

.mind-toolbar__sep {
  width: 24px;
  height: 1px;
  background: rgba(148, 163, 184, 0.34);
  margin: 3px 0;
}

.mind-level-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 !important;
}

.mind-level-toggle__cap {
  display: none;
}

.mind-level-toggle__roman {
  font-family: "Cormorant Garamond", "Playfair Display", "Garamond", "Georgia", serif;
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.04em;
  min-width: 0;
  text-align: center;
}

.mind-level-toggle__caret {
  display: none;
}

/* ---- 层级 popover 浮层（飞书风 4 色卡片） ---- */
.mind-level-popover {
  position: fixed;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 16px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 12px 28px rgba(15, 23, 42, 0.10);
  z-index: 100;
  min-width: 396px;
}

.mind-level-popover[hidden] {
  display: none;
}

.mind-level-popover__title {
  font-family: var(--font-cn), "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  text-transform: none;
}

.mind-level-popover__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* ---- 单个层级卡片（White / Smoke / Gray / Slate） ---- */
.mind-level-roman {
  --lv-color: #ffffff;
  width: 100%;
  height: 84px;
  background: var(--lv-color);
  border: 1px solid #e5e7eb;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 14px;
  font-family: var(--font-cn), "Segoe UI", sans-serif;
  transition: outline-color .12s, transform .12s, box-shadow .12s;
  position: relative;
}
.mind-level-roman__num {
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}
.mind-level-roman__name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

/* 卡片反色：White/Smoke 深文字；Gray/Slate 白文字 */
.mind-level-roman[data-level="1"],
.mind-level-roman[data-level="2"] { color: #1a202c; }
.mind-level-roman[data-level="3"],
.mind-level-roman[data-level="4"] { color: #ffffff; border-color: transparent; }

.mind-level-roman:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
}

.mind-level-roman.is-active {
  outline: 2px solid #1f2937;
  outline-offset: -2px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.mind-toolbar__hint {
  display: none;
}

.mind-btn {
  font-family: var(--font-cn);
  font-size: 17px;
  font-weight: 500;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: #cbd5e1;
  border-radius: 0;
  cursor: pointer;
  transition: background .12s ease-out, color .12s ease-out;
  letter-spacing: 0.02em;
}

.mind-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
  color: #ffffff;
}

.mind-btn.is-active {
  background: #3a4654;
  color: #ffffff;
  border-color: transparent;
  box-shadow: none;
}

.mind-btn--ghost {
  background: transparent;
  color: #dbe5ef;
}

.mind-btn--danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
  color: #dc2626;
}

.mind-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* 画布 */
.mind-canvas {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: none;
  touch-action: none;
  background:
    radial-gradient(rgba(121, 145, 172, 0.30) 1px, transparent 1px) 0 0 / 16px 16px,
    #f1f5f9;
}

.mind-canvas::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.mind-canvas.is-panning {
  cursor: grabbing;
}

.mind-plane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mind-plane__scale {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;        /* 真无限：scale 容器不限制尺寸，子节点 absolute 可放任意正负坐标 */
  height: 0;
  overflow: visible;
  transform-origin: 0 0;
  /* 砍掉 will-change：默认让浏览器保持矢量字体渲染，仅在拖拽 .is-panning 时临时启用合成层 */
}
.mind-canvas.is-panning .mind-plane__scale {
  will-change: transform;
}

.mind-canvas svg.mind-edges {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  overflow: visible;
}

.mind-nodes {
  position: relative;
  width: 4000px;
  height: 2400px;
  pointer-events: none;  /* 让节点之间的空白区穿透到下面的 svg，连线才能被点中 */
}

.mind-edge {
  stroke: #7f8a98;
  stroke-width: 4;
  fill: none;
  cursor: pointer;
  transition: stroke .12s, stroke-width .12s;
  pointer-events: stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mind-edge:hover {
  stroke: #6f7b8a;
}

.mind-edge.is-selected {
  stroke: #c95f6c;
  stroke-width: 5;
}

/* 透明粗 hit area —— 让点击更容易（16px 命中范围） */
.mind-edge-hit {
  stroke: transparent;
  stroke-width: 18;
  fill: none;
  cursor: pointer;
  pointer-events: stroke;
}

.mind-guide {
  stroke: rgba(214, 76, 92, 0.72);
  stroke-width: 1;
  stroke-dasharray: none;
  fill: none;
  pointer-events: none;
  opacity: 1;
  vector-effect: non-scaling-stroke;
}

/* 节点容器：隐型，不吃背景 / 边框。背景为子层 .mind-node__shape 接管，这样能吃任意 clip-path/mask 形状。 */
.mind-node {
  position: absolute;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: move;
  user-select: none;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", var(--font-cn), sans-serif;
  font-size: var(--node-font-size, 21px);
  font-weight: 500;
  color: var(--node-text, #4a5a72);
  letter-spacing: -0.005em;
  transition: filter .15s;
  box-sizing: border-box;
  filter:
    drop-shadow(0 1px 1px rgba(31, 45, 61, 0.04))
    drop-shadow(0 2px 4px rgba(31, 45, 61, 0.06));
}

.mind-node__shape {
  position: absolute;
  inset: 0;
  background: var(--node-bg, #ffffff);
  z-index: 0;
  pointer-events: none;
  transition: background .15s, box-shadow .15s, outline-color .15s;
}

.mind-node__badge { z-index: 6; }

/* 8 种形状：padding 留在外层供文字呼吸；border-radius / clip-path / mask 走子层 */
.mind-node--rect      { padding: 14px 20px; }
.mind-node--rect      .mind-node__shape { border-radius: 0; }
.mind-node--pill      { padding: 12px 26px; }
.mind-node--pill      .mind-node__shape { border-radius: 999px; }
.mind-node--circle    { padding: 16px; }
.mind-node--circle    .mind-node__shape { border-radius: 50%; }
.mind-node--diamond   { padding: 18px 32px; }
.mind-node--diamond   .mind-node__shape { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mind-node--trapezoid { padding: 14px 30px; }
.mind-node--trapezoid .mind-node__shape { clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.mind-node--cylinder  { padding: 26px 22px 14px; }
.mind-node--cylinder  .mind-node__shape { border-radius: 50% / 18%; }
.mind-node--cylinder  .mind-node__shape::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36%;
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50% / 50%;
  pointer-events: none;
}
.mind-node--cloud     { padding: 18px 36px; }
.mind-node--cloud     .mind-node__shape {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'><path d='M50,108 C25,108 8,92 8,72 C8,55 22,42 40,40 C44,22 64,10 84,10 C104,10 122,22 128,38 C140,32 158,38 166,52 C184,52 196,66 196,82 C196,98 182,112 164,110 L50,108 Z' fill='black'/></svg>") center/100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'><path d='M50,108 C25,108 8,92 8,72 C8,55 22,42 40,40 C44,22 64,10 84,10 C104,10 122,22 128,38 C140,32 158,38 166,52 C184,52 196,66 196,82 C196,98 182,112 164,110 L50,108 Z' fill='black'/></svg>") center/100% 100% no-repeat;
}
.mind-node--starburst { padding: 26px 38px; }
.mind-node--starburst .mind-node__shape {
  clip-path: polygon(
    50% 0%, 60% 14%, 75% 8%, 73% 25%, 90% 25%, 82% 40%, 100% 50%,
    82% 60%, 90% 75%, 73% 75%, 75% 92%, 60% 86%, 50% 100%, 40% 86%,
    25% 92%, 27% 75%, 10% 75%, 18% 60%, 0% 50%, 18% 40%, 10% 25%,
    27% 25%, 25% 8%, 40% 14%
  );
}

.mind-node:hover {
  z-index: 2;
}
.mind-node:hover .mind-node__shape {
  filter:
    drop-shadow(0 1px 2px rgba(31, 45, 61, 0.06))
    drop-shadow(0 4px 9px rgba(31, 45, 61, 0.10));
}

.mind-node.is-selected .mind-node__shape {
  outline: 2px solid var(--lv-color, #7e8796);
  outline-offset: 2px;
}
.mind-node.is-selected { z-index: 3; }

.mind-node.is-connect-source .mind-node__shape {
  outline: 2px dashed #c95f6c;
  outline-offset: 2px;
  opacity: 0.92;
}
.mind-node.is-connect-source { z-index: 4; }

/* inline edit：覆盖在节点上的 <textarea>，无边框、透明背景、继承节点字体
   textarea 支持多行 / 自动换行；resize 关闭，避免右下角出现拖拽 handle */
.mind-inline-edit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  font-family: inherit;
  font-size: var(--node-font-size, 21px);
  line-height: var(--node-line-height, 1.42);
  font-weight: 500;
  color: #4a5a72;
  letter-spacing: -0.005em;
  padding: 12px 22px;       /* 与 .mind-node--pill 的 padding 对齐，避免输入起跳位置错位 */
  margin: 0;
  z-index: 10;
  box-sizing: border-box;
  resize: none;             /* 禁用右下角拖拽 */
  overflow: hidden;         /* 文本超出由 fitNodeToText 重算节点高度 */
  white-space: pre-wrap;    /* 自动换行 + 保留显式换行 */
  word-break: break-word;   /* 中英混排都能正确断行 */
  vertical-align: middle;   /* textarea 内文字基线对齐节点中线 */
}

.mind-inline-edit::selection {
  background: rgba(127, 138, 152, 0.20);
}

/* 字符落定时的"心跳"动画：节点轻微弹一下 + 文字短暂 glow
   触发：英文 input / 中文 compositionend
   时长：220ms（够明显但不会拖慢连续输入） */
.mind-node.is-edit-pulse {
  animation: mindNodeEditPulse 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mindNodeEditPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.018); }
  100% { transform: scale(1); }
}

.mind-inline-edit.is-edit-pulse {
  animation: mindEditTextPulse 220ms ease-out;
}
@keyframes mindEditTextPulse {
  0% {
    text-shadow: 0 0 0 transparent;
    letter-spacing: -0.005em;
  }
  40% {
    text-shadow:
      0 0 10px rgba(94, 70, 180, 0.32),
      0 0 3px rgba(94, 70, 180, 0.20);
    letter-spacing: 0.008em;
  }
  100% {
    text-shadow: 0 0 0 transparent;
    letter-spacing: -0.005em;
  }
}

/* ---- detail 编辑器（双击节点弹出，可拖拽浮动面板，无遮罩） ---- */
/* === 科技 / 精英质感 · 直角 detail 浮动面板 === */
.detail-floating {
  position: fixed;
  width: 640px;
  max-width: 92vw;
  height: 520px;
  max-height: 84vh;
  background: #ffffff;
  border: 1px solid #0f172a;
  border-radius: 0;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 18px 36px rgba(15, 23, 42, 0.18),
    0 48px 96px rgba(15, 23, 42, 0.22);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: floating-pop .12s ease-out;
}

@keyframes floating-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.detail-floating__bar {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
  background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
  border-bottom: 1px solid #000000;
  cursor: move;
  user-select: none;
  flex-shrink: 0;
  position: relative;
}
.detail-floating__bar::before {
  /* 顶部 1px 高金属反光 */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  pointer-events: none;
}
.detail-floating__bar::after {
  /* 左上角 mono 标签“DETAIL · EDIT” */
  content: 'DETAIL \00b7 EDIT';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono), "JetBrains Mono", "SF Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: rgba(226, 232, 240, 0.55);
  pointer-events: none;
}

.detail-floating__grip {
  width: 48px;
  height: 1px;
  background: rgba(226, 232, 240, 0.34);
  border-radius: 0;
  margin: 0 auto;
  transform: translateX(10px);
}

.detail-floating__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  color: rgba(226, 232, 240, 0.62);
  cursor: pointer;
  border-radius: 0;
  transition: background .12s, color .12s;
}
.detail-floating__close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.detail-floating__area {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  padding: 26px 32px;
  font-family: var(--font-cn);
  font-size: 15px;
  line-height: 1.78;
  color: #0f172a;
  letter-spacing: 0.02em;
  resize: none;
  background: #ffffff;
  box-sizing: border-box;
}
.detail-floating__area::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.detail-floating__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0;
  padding: 14px 16px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  flex-shrink: 0;
}

.detail-floating__btn {
  height: 36px;
  padding: 0 24px;
  border-radius: 0;
  font-family: var(--font-cn), "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid #0f172a;
  transition: background .12s, color .12s;
  margin-left: -1px;
}

.detail-floating__btn--ghost {
  background: #ffffff;
  color: #0f172a;
}
.detail-floating__btn--ghost:hover {
  background: #f1f5f9;
}

.detail-floating__btn--primary {
  background: #0f172a;
  color: #ffffff;
}
.detail-floating__btn--primary:hover {
  background: #1f2937;
}

/* 有 detail 的节点：单层灰色描边圈（贴边、无内层白间隙） */
.mind-node.has-detail {
  box-shadow:
    0 0 0 2px #cbd5e1,
    0 1px 1px rgba(31, 45, 61, 0.04),
    0 2px 5px rgba(31, 45, 61, 0.07);
}

.mind-node.has-detail:hover {
  box-shadow:
    0 0 0 2px #cbd5e1,
    0 1px 2px rgba(31, 45, 61, 0.05),
    0 5px 12px rgba(31, 45, 61, 0.10);
}

.mind-node.has-detail.is-selected {
  box-shadow:
    0 0 0 2px #cbd5e1,
    0 1px 2px rgba(31, 45, 61, 0.06),
    0 0 0 1px rgba(126, 135, 150, 0.12);
}

/* 左上角层级角标（罗马数字，颜色由 inline style 决定） */
.mind-node__badge {
  position: absolute;
  top: -23px;
  left: 2px;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", var(--font-cn), sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: #293241;
  letter-spacing: 0.02em;
  border: 0;
  box-shadow: none;
  z-index: 6;
  pointer-events: none;
  user-select: none;
}

.mind-node__text {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  font-size: var(--node-font-size, 21px);
  font-weight: 500;
  line-height: var(--node-line-height, 1.42);
  color: inherit;
  word-break: break-word;
  pointer-events: none;
  letter-spacing: 0;                          /* 0 字距 → 字符不挤、抗锯齿干净 */
  text-wrap: balance;
  /* 高质量字体渲染：抗锯齿 + 优化连字 + 保留矢量 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern" 1, "liga" 1;
  /* 不加 transform / will-change：避免被栅格化 */
}

.mind-node--pill .mind-node__text {
  white-space: pre-wrap;     /* 允许自动换行 + 保留显式换行 */
  word-break: break-word;    /* 中英混排都能正确断行 */
  overflow: hidden;          /* 极端情况兜底 */
}

.mind-node--rect .mind-node__text {
  white-space: pre-wrap;
}

/* 拉伸 handle（4 个方向） */
.mind-node__handle {
  position: absolute;
  background: transparent;
  z-index: 5;
}
.mind-node__handle--l { top: 8px; bottom: 8px; left: -5px; width: 10px; cursor: ew-resize; }
.mind-node__handle--r { top: 8px; bottom: 8px; right: -5px; width: 10px; cursor: ew-resize; }
.mind-node__handle--t { left: 8px; right: 8px; top: -5px; height: 10px; cursor: ns-resize; }
.mind-node__handle--b { left: 8px; right: 8px; bottom: -5px; height: 10px; cursor: ns-resize; }

/* 连线模式时鼠标变成 crosshair */
.mind-canvas.is-connecting .mind-node {
  cursor: crosshair;
}

/* ===== 颜色按钮的色块小标签（工具栏上） ===== */
.mind-color-toggle__swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #cbd5e1;
  box-shadow: none;
}

/* ===== 形状 / 颜色 popover（飞书风）===== */
.mind-shape-popover,
.mind-color-popover {
  position: fixed;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 16px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 12px 28px rgba(15, 23, 42, 0.10);
  z-index: 100;
  min-width: 320px;
}
.mind-shape-popover[hidden],
.mind-color-popover[hidden] { display: none; }

.mind-shape-popover__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.mind-shape-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px 10px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  cursor: pointer;
  transition: background .12s ease-out, border-color .12s ease-out;
}
.mind-shape-cell:hover {
  border-color: #d1d5db;
  background: #f9fafb;
  box-shadow: none;
}
.mind-shape-cell.is-active {
  border-color: #1f2937;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #1f2937;
}
.mind-shape-cell__label {
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  letter-spacing: 0.04em;
}

.mind-shape-preview {
  width: 36px;
  height: 26px;
  background: #6b7280;
  display: block;
}
.mind-shape-preview--rect      { border-radius: 0; }
.mind-shape-preview--pill      { border-radius: 999px; }
.mind-shape-preview--circle    { border-radius: 50%; width: 28px; height: 28px; }
.mind-shape-preview--diamond   { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mind-shape-preview--trapezoid { clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.mind-shape-preview--cylinder  { border-radius: 50% / 24%; }
.mind-shape-preview--cloud     {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'><path d='M50,108 C25,108 8,92 8,72 C8,55 22,42 40,40 C44,22 64,10 84,10 C104,10 122,22 128,38 C140,32 158,38 166,52 C184,52 196,66 196,82 C196,98 182,112 164,110 L50,108 Z' fill='black'/></svg>") center/100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'><path d='M50,108 C25,108 8,92 8,72 C8,55 22,42 40,40 C44,22 64,10 84,10 C104,10 122,22 128,38 C140,32 158,38 166,52 C184,52 196,66 196,82 C196,98 182,112 164,110 L50,108 Z' fill='black'/></svg>") center/100% 100% no-repeat;
}
.mind-shape-preview--starburst {
  clip-path: polygon(
    50% 0%, 60% 14%, 75% 8%, 73% 25%, 90% 25%, 82% 40%, 100% 50%,
    82% 60%, 90% 75%, 73% 75%, 75% 92%, 60% 86%, 50% 100%, 40% 86%,
    25% 92%, 27% 75%, 10% 75%, 18% 60%, 0% 50%, 18% 40%, 10% 25%,
    27% 25%, 25% 8%, 40% 14%
  );
}

/* ===== 颜色 popover ===== */
.mind-color-popover__grid {
  display: grid;
  gap: 6px;
}
.mind-color-popover__grid--neutral { grid-template-columns: repeat(4, 1fr); }
.mind-color-popover__grid--brand   { grid-template-columns: repeat(6, 1fr); }

.mind-color-cell {
  position: relative;
  width: 100%;
  height: 32px;
  background: var(--c, #ffffff);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.mind-color-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.14);
}
.mind-color-cell.is-active {
  box-shadow:
    0 0 0 1px #ffffff,
    0 0 0 3px #1f2937;
}
.mind-color-cell--neutral {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #1a202c;
  letter-spacing: 0.04em;
}
.mind-color-cell--neutral[data-color="#3f4a5e"],
.mind-color-cell--neutral[data-color="#7a8597"] { color: #ffffff; }

.mind-color-popover__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.mind-color-clear {
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 0;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background .12s, border-color .12s, color .12s;
}
.mind-color-clear:hover {
  border-color: #1f2937;
  background: #f9fafb;
  color: #1f2937;
}

/* ===== 分层切换按钮（LAYER I / II 科技华丽风） ===== */
.mind-layer-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 14px;
  background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
  border: 1px solid #0f172a;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
  color: rgba(226, 232, 240, 0.78);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  cursor: pointer;
  overflow: hidden;
  transition: color .15s, background .15s;
}
.mind-layer-toggle::before {
  /* 顶部 1px 金属反光横线 */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  pointer-events: none;
}
.mind-layer-toggle::after {
  /* 横向扫光，hover 触发 */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  transform: skewX(-22deg);
  transition: left .55s ease-out;
  pointer-events: none;
}
.mind-layer-toggle:hover {
  color: #ffffff;
}
.mind-layer-toggle:hover::after {
  left: 130%;
}
.mind-layer-toggle__label {
  text-transform: uppercase;
  opacity: 0.74;
}
.mind-layer-toggle__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-family: "Cormorant Garamond", "Garamond", "Georgia", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.mind-layer-toggle[data-layer="2"] {
  background: linear-gradient(180deg, #c7935b 0%, #8a5a2e 100%);
  border-color: #5a3a1d;
  color: #fff8ed;
}
.mind-layer-toggle[data-layer="2"] .mind-layer-toggle__num {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff8ed;
}

/* ===== 第二板（OVERLAY）整体视觉 ===== */
.folder-mind-page[data-layer="2"] .mind-canvas {
  background:
    radial-gradient(rgba(199, 147, 91, 0.18) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, #fbf6ee 0%, #f1e9d8 100%);
}
.folder-mind-page[data-layer="2"]::before {
  /* 顶部一条金色细线提示进入叠加板 */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #c7935b 30%, #fbe0a6 50%, #c7935b 70%, transparent 100%);
  z-index: 100;
  pointer-events: none;
}

/* ===== layer1 节点在 layer2 视图：锁定 / 淡化 ===== */
.mind-node.is-locked {
  opacity: 0.32;
  filter: grayscale(0.5);
  pointer-events: none;
}
.mind-node.is-locked .mind-node__handle { display: none; }

/* ===== layer2 节点：永远金色描边 + 左上 CASE 角标，视觉强对比 ===== */
.mind-node.is-layer2 {
  box-shadow: 0 0 0 2px #c7935b, 0 0 0 3px rgba(199, 147, 91, 0.35);
}
.mind-node.is-layer2::after {
  content: 'CASE';
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 2px 6px 1px;
  background: #c7935b;
  color: #fff8ed;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  pointer-events: none;
  z-index: 5;
}

/* ===== 视图切换 tabs（嵌在 header 右侧 right slot） ===== */
.folder-view-tabs {
  display: inline-flex;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #d8d2c4;
  border-radius: 2px;
  margin-left: 12px;
  padding: 2px;
  gap: 2px;
  box-shadow: inset 0 1px 3px rgba(23, 21, 15, 0.05);
}
.folder-view-tab {
  padding: 6px 18px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-cn), "Segoe UI", sans-serif;
  background: transparent;
  border: 0;
  border-radius: 1px;
  color: #6b7280;
  cursor: pointer;
  transition: background .14s, color .14s, box-shadow .14s;
  letter-spacing: 0.05em;
}
.folder-view-tab:hover {
  background: #f3efe6;
  color: #1f2937;
}
.folder-view-tab.is-active {
  background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
}

/* ===== 书架视图 ===== */
.bookshelf-view {
  position: absolute;            /* 改用 absolute 占满 .folder-mind-page，绕过 flex 高度计算坑 */
  inset: 0;
  padding: 56px 32px 56px;       /* 顶部给第一行充足呼吸，避免贴顶/被卡 */
  background:
    radial-gradient(rgba(121, 145, 172, 0.20) 1px, transparent 1px) 0 0 / 16px 16px,
    #f8fafc;
  overflow-y: scroll;            /* 强制纵向滚动条始终可见 */
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #1f2937 #0f172a;
  z-index: 5;
}
/* === 科技风纵向滚动条（深底 + 浅 thumb + 直角） === */
.bookshelf-view::-webkit-scrollbar {
  width: 10px;
}
.bookshelf-view::-webkit-scrollbar-track {
  background: #0f172a;
  border-left: 1px solid #1f2937;
  border-right: 1px solid #1f2937;
}
.bookshelf-view::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4b5563 0%, #1f2937 100%);
  border: 1px solid #0f172a;
}
.bookshelf-view::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6b7280 0%, #374151 100%);
}
.bookshelf-view::-webkit-scrollbar-thumb:active {
  background: #1f2937;
}
.bookshelf-frame {
  max-width: 1180px;
  margin: 0 auto;
}

.bookshelf-row {
  display: flex;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.bookshelf-row + .bookshelf-row {
  border-top: 0;
}
.bookshelf-row__label {
  flex-shrink: 0;
  width: 110px;
  padding: 18px 16px;
  background: var(--lv-color);
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bookshelf-row[data-level="1"] .bookshelf-row__label,
.bookshelf-row[data-level="2"] .bookshelf-row__label { color: #1a202c; }
.bookshelf-row[data-level="3"] .bookshelf-row__label,
.bookshelf-row[data-level="4"] .bookshelf-row__label { color: #ffffff; }

.bookshelf-row__num {
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}
.bookshelf-row__name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.82;
  text-transform: uppercase;
}
.bookshelf-row__count {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 0.10em;
  opacity: 0.62;
}

.bookshelf-row__board {
  flex: 1;
  min-width: 0;
  padding: 18px 22px;
  min-height: 100px;
  background: #ffffff;
}

.bookshelf-row__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bookshelf-row__empty {
  font-size: 13px;
  color: #9ca3af;
  letter-spacing: 0.04em;
  padding: 22px 0;
  font-family: var(--font-cn);
}

/* 书架卡片：复用 .mind-node + 形状变体，inline 覆盖 position & 尺寸 */
.bookshelf-item {
  border: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform .12s, filter .12s;
  flex-shrink: 0;
}
.bookshelf-item.mind-node {
  /* 覆盖 .mind-node 的默认 padding，让缩略卡片字号紧凑 */
  padding: 6px 14px;
}
.bookshelf-item.mind-node--pill { padding: 0 18px; }
.bookshelf-item.mind-node--circle { padding: 10px; }
.bookshelf-item.mind-node--diamond { padding: 12px 22px; }
.bookshelf-item.mind-node--trapezoid { padding: 10px 22px; }
.bookshelf-item.mind-node--cylinder { padding: 18px 14px 8px; }
.bookshelf-item.mind-node--cloud { padding: 12px 24px; }
.bookshelf-item.mind-node--starburst { padding: 18px 26px; }

.bookshelf-item:hover {
  transform: translateY(-2px);
  filter:
    drop-shadow(0 1px 2px rgba(31, 45, 61, 0.06))
    drop-shadow(0 8px 16px rgba(31, 45, 61, 0.12));
}
.bookshelf-item.mind-node:hover { z-index: auto; }
.bookshelf-item .mind-node__text {
  font-size: 13px;
  line-height: 1.32;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bookshelf-item.is-selected .mind-node__shape {
  outline: 2px solid #1f2937;
  outline-offset: 3px;
}

.shelf-inline-edit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-cn), "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  z-index: 10;
  padding: 0 8px;
}

@media (max-width: 720px) {
  .folders-page__body { padding: 16px 12px 64px; }
  .folder { height: auto; min-height: 96px; }
}

/* =========================================================================
   08 观点择优 · Idea Meritocracy
   ========================================================================= */

.page--opinions {
  --op-bg:         #f7f7f5;
  --op-surface:    #ffffff;
  --op-line:       #e5e5e3;
  --op-line-soft:  #efefed;
  --op-ink:        #0e0e0e;
  --op-ink-sec:    #4a4a48;
  --op-ink-mute:   #8e8e8a;
  --op-accent:     #1a1a1a;
  --op-gold:       #b8860b;
  --op-gold-soft:  #faf6e8;
  background: var(--op-bg);
  min-height: calc(100vh - 60px);
}

/* ---- 外页 toolbar ---- */
.opinions-home__toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--op-line);
  background: #fff;
}

.opinions-home__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-cn);
  font-size: 18px;
  font-weight: 700;
  color: var(--op-ink);
  letter-spacing: 0.02em;
}

.opinions-home__title-icon svg {
  width: 28px;
  height: 18px;
  display: block;
  filter: drop-shadow(1.5px 1.5px 0 rgba(0, 0, 0, 0.12));
}

.opinions-home__title-en {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--op-ink-mute);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.opinions-home__add {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--op-line);
  background: #fff;
  font-size: 20px;
  color: var(--op-ink);
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.opinions-home__add:hover {
  background: var(--op-accent);
  color: #fff;
  border-color: var(--op-accent);
}

/* ---- 外页 body ---- */
.opinions-home__body {
  padding: 32px;
}

.opinions-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* ---- 看板卡片 ---- */
.opinions-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--op-line);
  padding: 20px 22px 22px;
  cursor: pointer;
  transition: all .18s ease-out;
}
.opinions-card:hover {
  border-color: var(--op-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.opinions-card__type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--op-ink-mute);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.opinions-card__title {
  font-family: var(--font-cn);
  font-size: 17px;
  font-weight: 700;
  color: var(--op-ink);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.opinions-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--op-ink-mute);
}
.opinions-card__meta b {
  color: var(--op-ink);
  font-weight: 600;
  margin: 0 1px;
}

.opinions-card__verdict {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--op-gold-soft);
  border: 1px solid #e8dcb4;
  border-left: 3px solid var(--op-gold);
}
.opinions-card__verdict-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--op-gold);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.opinions-card__verdict-name {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 700;
  color: var(--op-ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.opinions-card__verdict-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--op-ink-sec);
}
.opinions-card__verdict-meta b {
  color: var(--op-gold);
  font-family: var(--font-mono);
  font-weight: 700;
}

.opinions-card__hint {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--op-bg);
  border: 1px dashed var(--op-line);
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--op-ink-mute);
  font-style: italic;
}

.opinions-card__del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--op-ink-mute);
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: all .15s;
  line-height: 1;
}
.opinions-card:hover .opinions-card__del { opacity: 1; }
.opinions-card__del:hover { color: #c44e4e; }

/* ---- 外页空状态 ---- */
.opinions-empty {
  padding: 80px 32px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--op-line);
}
.opinions-empty__icon {
  width: 64px;
  height: 40px;
  display: block;
  margin: 0 auto 18px;
  opacity: 0.35;
}
.opinions-empty__icon polygon {
  fill: var(--op-accent);
}
.opinions-empty__title {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 600;
  color: var(--op-ink-sec);
  margin: 0 0 8px;
}
.opinions-empty__hint {
  font-family: var(--font-cn);
  font-size: 12.5px;
  color: var(--op-ink-mute);
  line-height: 1.7;
  margin: 0 0 18px;
}
.opinions-empty__hint b { color: var(--op-ink); font-weight: 600; }

.opinions-empty__example {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--op-bg);
  border: 1px solid var(--op-line);
}
.opinions-empty__example-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--op-ink-mute);
  text-transform: uppercase;
}
.opinions-empty__example-text {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--op-ink-sec);
  font-style: italic;
}

/* ---- 内页 toolbar ---- */
.opinions-board__toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 32px;
  background: #fff;
  border-bottom: 1px solid var(--op-line);
  flex-wrap: wrap;
}

.opinions-board__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.opinions-board__title-icon {
  font-size: 12px;
  color: var(--op-accent);
}
.opinions-board__title {
  font-family: var(--font-cn);
  font-size: 18px;
  font-weight: 700;
  color: var(--op-ink);
  outline: none;
  padding: 2px 6px;
  cursor: text;
  border-radius: 0;
  min-width: 80px;
  max-width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opinions-board__title:focus {
  background: #fff8e8;
  white-space: normal;
}

.opinions-board__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--op-ink-mute);
}
.opinions-board__meta-item b {
  color: var(--op-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}
.opinions-board__meta-spacer {
  width: 1px;
  height: 16px;
  background: var(--op-line);
}
.opinions-board__meta-verdict {
  padding: 6px 12px;
  background: var(--op-gold-soft);
  border: 1px solid #e8dcb4;
  border-left: 3px solid var(--op-gold);
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--op-ink-sec);
}
.opinions-board__meta-verdict b {
  color: var(--op-ink);
  font-weight: 700;
}
.opinions-board__meta-verdict em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
  color: var(--op-gold);
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* ---- 内页 body ---- */
.opinions-board__body {
  padding: 24px 32px 48px;
}

.opinions-board__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
  max-width: 1400px;
}

.opinions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---- 左侧 sidebar 小看板 ---- */
.opinions-sidebar {
  position: sticky;
  top: 24px;
  background: #fff;
  border: 1px solid var(--op-line);
  padding: 18px 18px 20px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.opinions-sidebar__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--op-line-soft);
}
.opinions-sidebar__icon {
  font-size: 12px;
  color: var(--op-accent);
}
.opinions-sidebar__caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--op-ink-mute);
  text-transform: uppercase;
}

.opinions-sidebar__stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.opinions-sidebar__stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 0;
}
.opinions-sidebar__stat-label {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--op-ink-mute);
}
.opinions-sidebar__stat-num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--op-ink);
  letter-spacing: -0.01em;
}

.opinions-sidebar__verdict {
  padding: 14px;
  background: var(--op-gold-soft);
  border: 1px solid #e8dcb4;
  border-left: 3px solid var(--op-gold);
}
.opinions-sidebar__verdict--empty {
  background: var(--op-bg);
  border: 1px dashed var(--op-line);
  border-left: 1px dashed var(--op-line);
}
.opinions-sidebar__verdict-cap {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--op-gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.opinions-sidebar__verdict--empty .opinions-sidebar__verdict-cap {
  color: var(--op-ink-mute);
}
.opinions-sidebar__verdict-name {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 700;
  color: var(--op-ink);
  line-height: 1.3;
  margin-bottom: 6px;
  word-break: break-word;
}
.opinions-sidebar__verdict-meta {
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--op-ink-sec);
}
.opinions-sidebar__verdict-meta b {
  font-family: var(--font-mono);
  color: var(--op-gold);
  font-weight: 700;
}
.opinions-sidebar__verdict-empty-text {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--op-ink-mute);
  font-style: italic;
}

.opinions-sidebar__cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opinions-sidebar__cats-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--op-ink-mute);
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--op-line-soft);
}

.opinions-sidebar__cat {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  padding: 8px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .15s;
}
.opinions-sidebar__cat:hover {
  background: var(--op-bg);
  border-left-color: var(--op-accent);
}
.opinions-sidebar__cat.is-top {
  border-left-color: var(--op-gold);
  background: var(--op-gold-soft);
}
.opinions-sidebar__cat.is-top:hover {
  background: #f5edd0;
}

.opinions-sidebar__cat-rank {
  grid-row: 1;
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--op-ink-mute);
  text-align: center;
}
.opinions-sidebar__cat.is-top .opinions-sidebar__cat-rank {
  color: var(--op-gold);
}
.opinions-sidebar__cat-name {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-cn);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--op-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opinions-sidebar__cat-weight {
  grid-row: 1;
  grid-column: 3;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--op-ink-sec);
}
.opinions-sidebar__cat.is-top .opinions-sidebar__cat-weight {
  color: var(--op-gold);
}
.opinions-sidebar__cat-bar {
  grid-row: 2;
  grid-column: 2;
  height: 4px;
  background: #ececea;
  position: relative;
  overflow: hidden;
}
.opinions-sidebar__cat-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--op-accent);
  transition: width .25s ease-out;
}
.opinions-sidebar__cat.is-top .opinions-sidebar__cat-bar-fill {
  background: var(--op-gold);
}
.opinions-sidebar__cat-share {
  grid-row: 2;
  grid-column: 3;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--op-ink-mute);
  text-align: right;
}

/* sidebar 跳转后右侧目标类别的高亮反馈 */
.opinions-cat.is-jumped {
  animation: opCatJumpFlash 1.2s ease-out;
}
@keyframes opCatJumpFlash {
  0%   { box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.45); }
  100% { box-shadow: 0 0 0 3px rgba(184, 134, 11, 0); }
}

.opinions-empty-inline {
  padding: 28px 24px;
  background: #fff;
  border: 1px dashed var(--op-line);
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--op-ink-sec);
  text-align: center;
  line-height: 1.7;
}
.opinions-empty-inline__hint {
  display: inline-block;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--op-ink-mute);
}

/* ---- 类别分组 ---- */
.opinions-cat {
  background: #fff;
  border: 1px solid var(--op-line);
  transition: border-color .15s;
}
.opinions-cat.is-top {
  border-color: var(--op-gold);
  box-shadow: 0 2px 0 var(--op-gold-soft);
}

.opinions-cat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #fafafa, #fff);
  border-bottom: 1px solid var(--op-line-soft);
}
.opinions-cat.is-top .opinions-cat__head {
  background: linear-gradient(90deg, var(--op-gold-soft), #fff);
}

.opinions-cat__chevron {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  font-size: 10px;
  color: var(--op-ink-sec);
  cursor: pointer;
  transition: transform .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transform: rotate(90deg);
}
.opinions-cat.is-collapsed .opinions-cat__chevron {
  transform: rotate(0deg);
}

.opinions-cat__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: var(--op-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
}
.opinions-cat.is-top .opinions-cat__rank {
  background: var(--op-gold);
}

.opinions-cat__name {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 700;
  color: var(--op-ink);
  outline: none;
  padding: 2px 6px;
  cursor: text;
  min-width: 80px;
  flex: 1;
}
.opinions-cat__name:focus {
  background: #fff8e8;
}

.opinions-cat__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--op-ink-mute);
}

.opinions-cat__weight {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 10px;
  background: var(--op-bg);
  border: 1px solid var(--op-line);
}
.opinions-cat__weight-label {
  font-family: var(--font-cn);
  font-size: 10.5px;
  color: var(--op-ink-mute);
}
.opinions-cat__weight-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--op-ink);
  letter-spacing: -0.01em;
}
.opinions-cat.is-top .opinions-cat__weight {
  background: var(--op-gold-soft);
  border-color: #e8dcb4;
}
.opinions-cat.is-top .opinions-cat__weight-val {
  color: var(--op-gold);
}

.opinions-cat__crown {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 3px 8px;
  background: var(--op-gold);
  color: #fff;
}

.opinions-cat__del {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--op-ink-mute);
  font-size: 16px;
  cursor: pointer;
  transition: all .15s;
  padding: 0;
  line-height: 1;
}
.opinions-cat__del:hover {
  border-color: #c44e4e;
  color: #c44e4e;
}

/* ---- 类别 body（折叠时隐藏） ---- */
.opinions-cat__body {
  padding: 0;
  display: block;
}
.opinions-cat.is-collapsed .opinions-cat__body {
  display: none;
}

.opinions-cat__note-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: #fbfbf9;
  border-bottom: 1px solid var(--op-line-soft);
}
.opinions-cat__note-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--op-ink-mute);
  text-transform: uppercase;
  padding-top: 6px;
  white-space: nowrap;
}
.opinions-cat__note {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 12.5px;
  color: var(--op-ink-sec);
  line-height: 1.6;
  resize: vertical;
  min-height: 28px;
  padding: 4px 6px;
}
.opinions-cat__note:focus {
  background: #fff8e8;
}
.opinions-cat__note::placeholder {
  color: var(--op-ink-mute);
  font-style: italic;
}

/* ---- 观点行表格 ---- */
.opinions-row {
  display: grid;
  grid-template-columns: 1fr 200px 90px 32px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--op-line-soft);
  gap: 10px;
}
.opinions-row--head {
  background: #fafafa;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--op-ink-mute);
  text-transform: uppercase;
  padding: 8px 16px;
  border-top: none;
}
.opinions-row--empty {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--op-ink-mute);
  font-style: italic;
  padding: 16px;
  text-align: center;
  display: block;
}

.opinions-row__content {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--op-ink);
  outline: none;
  padding: 4px 6px;
  cursor: text;
  line-height: 1.5;
  min-height: 20px;
}
.opinions-row__content:focus {
  background: #fff8e8;
}
.opinions-row__content:empty:before {
  content: '点这里写观点内容⋯⋯';
  color: var(--op-ink-mute);
  font-style: italic;
}

.opinions-row__source {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--op-ink-sec);
  outline: none;
  padding: 4px 6px;
  cursor: text;
  line-height: 1.5;
  min-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opinions-row__source:focus {
  background: #fff8e8;
}
.opinions-row__source:empty:before {
  content: attr(data-placeholder);
  color: var(--op-ink-mute);
  font-style: italic;
}

.opinions-row__weight {
  text-align: center;
}
.opinions-row__weight-input {
  width: 64px;
  padding: 4px 8px;
  border: 1px solid var(--op-line);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--op-ink);
  text-align: center;
  outline: none;
  transition: border-color .15s;
}
.opinions-row__weight-input:focus {
  border-color: var(--op-accent);
  background: #fff8e8;
}

.opinions-row__del-btn {
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--op-ink-mute);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  padding: 0;
  line-height: 1;
}
.opinions-row:hover .opinions-row__del-btn {
  color: var(--op-ink-sec);
}
.opinions-row__del-btn:hover {
  border-color: #c44e4e;
  color: #c44e4e !important;
}

/* + 新建观点 / + 新建类别按钮 */
.opinions-cat__add-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-top: 1px dashed var(--op-line);
  background: transparent;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--op-ink-mute);
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}
.opinions-cat__add-item:hover {
  background: var(--op-bg);
  color: var(--op-accent);
}

.opinions-board__add-cat {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px dashed var(--op-line);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--op-ink-mute);
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  letter-spacing: 0.02em;
}
.opinions-board__add-cat:hover {
  background: #fff;
  border-color: var(--op-accent);
  border-style: solid;
  color: var(--op-accent);
}

/* 中屏 / 小屏：sidebar 收为顶栏 */
@media (max-width: 920px) {
  .opinions-board__layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .opinions-sidebar {
    position: static;
    max-height: none;
  }
}

@media (max-width: 720px) {
  .opinions-home__body { padding: 16px; }
  .opinions-board__body { padding: 16px; }
  .opinions-home__grid { grid-template-columns: 1fr; gap: 14px; }
  .opinions-row {
    grid-template-columns: 1fr 90px 32px;
  }
  .opinions-row__source {
    display: none;
  }
}


/* ==============================================================
   Tasks · 综合分析（第三看板）
   外页：三个子看板入口 / 事件走向图列表 / 事件走向图详情
   ============================================================== */

/* ---------- 综合分析外页：三卡片入口 ---------- */
.analysis-body {
  padding: 32px 36px 64px;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.analysis-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 22px;
  background: #fff;
  border: 1px solid var(--line-standard, #e4e4e1);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s;
  cursor: pointer;
  position: relative;
  min-height: 240px;
}

.analysis-card:hover {
  border-color: var(--ink-primary, #0f172a);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.18);
}

.analysis-card__icon {
  width: 80px;
  height: 50px;
  margin-bottom: 16px;
  opacity: 0.95;
}
.analysis-card__icon svg {
  width: 100%;
  height: 100%;
}

.analysis-card__title {
  font-family: var(--font-cn);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}

.analysis-card__desc {
  font-family: var(--font-cn);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-secondary);
  flex: 1;
  margin-bottom: 14px;
}

.analysis-card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: 1px solid var(--line-weak, #ececea);
  padding-top: 10px;
}

.analysis-card__meta--soon {
  color: #b08c4a;
}

/* ---------- 占位页 ---------- */
.analysis-soon {
  max-width: 520px;
  margin: 80px auto;
  padding: 48px 40px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line-standard);
}
.analysis-soon__badge {
  display: inline-block;
  padding: 4px 12px;
  background: #fff8e8;
  color: #b08c4a;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.analysis-soon__title {
  font-family: var(--font-cn);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-primary);
  margin-bottom: 12px;
}
.analysis-soon__desc {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
}
.analysis-soon__back {
  display: inline-block;
  padding: 8px 18px;
  color: var(--ink-primary);
  text-decoration: none;
  border: 1px solid var(--line-standard);
  font-family: var(--font-cn);
  font-size: 12.5px;
  transition: background .14s, color .14s;
}
.analysis-soon__back:hover {
  background: var(--ink-primary);
  color: #fff;
}

/* ---------- 事件走向图：列表页 ---------- */
.timeline-sub-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 4px 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-weak, #ececea);
}
.timeline-sub-back {
  color: var(--ink-secondary);
  font-family: var(--font-cn);
  font-size: 12.5px;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.timeline-sub-back:hover {
  color: var(--ink-primary);
}
.timeline-sub-title {
  flex: 1;
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: -0.005em;
}
.timeline-sub-add {
  padding: 7px 14px;
  background: var(--ink-primary);
  color: #fff;
  border: none;
  font-family: var(--font-cn);
  font-size: 12.5px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity .14s;
}
.timeline-sub-add:hover { opacity: 0.86; }

.timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 32px;
  background: #fff;
  border: 1px dashed var(--line-standard);
  color: var(--ink-tertiary);
}
.timeline-empty__icon {
  width: 140px;
  height: 80px;
  margin-bottom: 18px;
  opacity: 0.7;
}
.timeline-empty__text {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-secondary);
}

.timeline-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.timeline-card {
  background: #fff;
  border: 1px solid var(--line-standard);
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: border-color .16s, transform .16s, box-shadow .16s;
  display: flex;
  flex-direction: column;
}
.timeline-card:hover {
  border-color: var(--ink-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.18);
}
.timeline-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.timeline-card__title {
  flex: 1;
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-card__del {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: color .14s;
}
.timeline-card__del:hover { color: #c95f6c; }
.timeline-card__thumb {
  width: 100%;
  height: 92px;
  background: #fafafa;
  margin-bottom: 10px;
}
.timeline-card__thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}
.timeline-card__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}
.timeline-card__meta-item {
  white-space: nowrap;
}

/* ---------- 事件走向图：详情页 ---------- */
.timeline-detail {
  max-width: 1200px;
  margin: 0 auto;
}

.timeline-detail__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-weak);
}
.timeline-detail__back {
  font-family: var(--font-cn);
  font-size: 12.5px;
  color: var(--ink-secondary);
  text-decoration: none;
}
.timeline-detail__back:hover { color: var(--ink-primary); }
.timeline-detail__title {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color .14s, background .14s;
}
.timeline-detail__title:hover { border-color: var(--line-weak); }
.timeline-detail__title:focus {
  background: #fff8e8;
  border-color: var(--ink-primary);
}
.timeline-detail__del {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--line-standard);
  color: var(--ink-secondary);
  font-family: var(--font-cn);
  font-size: 12px;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.timeline-detail__del:hover {
  background: #c95f6c;
  color: #fff;
  border-color: #c95f6c;
}

/* 配置区 —— 用 grid 固定 4 列，每个 row 占一格，切模式时高度恒定不抖动 */
.timeline-config {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 24px;
  align-items: center;
  min-height: 96px;
  padding: 14px 18px;
  background: #fafafa;
  border: 1px solid var(--line-weak);
  margin-bottom: 14px;
}
.timeline-config__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timeline-config__label {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.timeline-config__select,
.timeline-config__input {
  padding: 5px 10px;
  border: 1px solid var(--line-standard);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 12.5px;
  color: var(--ink-primary);
  outline: none;
  transition: border-color .14s;
  min-width: 80px;
}
.timeline-config__select:focus,
.timeline-config__input:focus {
  border-color: var(--ink-primary);
}
.timeline-config__input--num {
  width: 76px;
  font-family: var(--font-mono);
  text-align: center;
}
.timeline-config__input--tick {
  width: 88px;
  text-align: center;
  margin-right: 4px;
}
.timeline-config__dash {
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
}

/* 序列工具条 */
.timeline-series {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--line-weak);
  margin-bottom: 14px;
}
.timeline-series__label {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
  margin-right: 4px;
}
.timeline-series__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 8px;
  border: 1px solid var(--line-standard);
  background: #fff;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.timeline-series__chip:hover {
  background: #fafafa;
}
.timeline-series__chip.is-active {
  border-color: var(--ink-primary);
  background: #f4f4f3;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.06) inset;
}
.timeline-series__dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.timeline-series__name {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-primary);
  width: 64px;
  padding: 2px 0;
}
.timeline-series__name:focus {
  background: #fff8e8;
}
.timeline-series__del {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color .14s;
}
.timeline-series__del:hover { color: #c95f6c; }
.timeline-series__add {
  padding: 4px 10px;
  border: 1px dashed var(--line-standard);
  background: transparent;
  color: var(--ink-secondary);
  font-family: var(--font-cn);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .14s, color .14s;
}
.timeline-series__add:hover {
  border-color: var(--ink-primary);
  color: var(--ink-primary);
}

/* 图表 SVG */
.timeline-chart-wrap {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-standard);
  padding: 18px 22px;
  margin-bottom: 14px;
}
.timeline-chart {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  cursor: crosshair;
  user-select: none;
}
.tl-grid {
  stroke: #f1f5f9;
  stroke-width: 1;
}
.tl-grid--x {
  stroke: #f7f9fb;
}
.tl-tick {
  stroke: #cbd5e1;
  stroke-width: 1;
}
.tl-axis {
  stroke: #94a3b8;
  stroke-width: 1.4;
}
.tl-axis-text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: #64748b;
}
.tl-axis-name {
  font-family: var(--font-cn);
  font-size: 12px;
  fill: var(--ink-secondary);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tl-line {
  pointer-events: none;
  opacity: 0.92;
}
.tl-point {
  cursor: ns-resize;
  transition: filter .14s, transform .14s;
  /* 去掉白 stroke：让方格和折线共用颜色，视觉连为一体 */
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}
.tl-point:hover {
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.36));
  transform: scale(1.18);
}
.tl-point.is-dragging {
  filter: drop-shadow(0 3px 8px rgba(15, 23, 42, 0.42));
  transform: scale(1.22);
}

/* 双击坐标点弹出的编辑浮层 */
.timeline-popover {
  position: absolute;
  width: 280px;
  background: #fff;
  border: 1px solid var(--ink-primary);
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.32);
  z-index: 50;
}
.timeline-popover[hidden] { display: none; }
.tl-pop__head {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: var(--ink-primary);
  color: #fff;
}
.tl-pop__title {
  flex: 1;
  font-family: var(--font-cn);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.tl-pop__close {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.78;
  transition: opacity .14s;
}
.tl-pop__close:hover { opacity: 1; }
.tl-pop__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tl-pop__row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tl-pop__row--readonly {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tl-pop__label {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}
.tl-pop__input,
.tl-pop__textarea,
.tl-pop__select {
  padding: 6px 10px;
  border: 1px solid var(--line-standard);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 12.5px;
  color: var(--ink-primary);
  outline: none;
  transition: border-color .14s;
}
.tl-pop__input:focus,
.tl-pop__textarea:focus,
.tl-pop__select:focus {
  border-color: var(--ink-primary);
}
.tl-pop__textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.55;
  font-family: var(--font-cn);
}
.tl-pop__readonly {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-primary);
}
.tl-pop__actions {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.tl-pop__btn {
  padding: 6px 14px;
  border: 1px solid var(--line-standard);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 12px;
  cursor: pointer;
  transition: all .14s;
}
.tl-pop__btn--primary {
  background: var(--ink-primary);
  color: #fff;
  border-color: var(--ink-primary);
}
.tl-pop__btn--primary:hover { opacity: 0.86; }
.tl-pop__btn--danger {
  color: #c95f6c;
  border-color: #e8c4ca;
}
.tl-pop__btn--danger:hover {
  background: #c95f6c;
  color: #fff;
  border-color: #c95f6c;
}

.timeline-tip {
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--ink-tertiary);
  line-height: 1.7;
  padding: 6px 4px;
  letter-spacing: 0.02em;
}

/* ---------- 复利可视化 ---------- */

/* 参数旋钮区 */
.compound-config {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 22px;
  align-items: center;
  padding: 14px 18px;
  background: #fafafa;
  border: 1px solid var(--line-weak);
  margin-bottom: 14px;
}
.cmp-cfg__group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cmp-cfg__group--slider {
  grid-column: span 1;
}
.cmp-cfg__label {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cmp-cfg__label code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-primary);
  background: #fff;
  padding: 1px 5px;
  border: 1px solid var(--line-weak);
  margin-left: 2px;
}
.cmp-cfg__num {
  width: 76px;
  padding: 5px 10px;
  border: 1px solid var(--line-standard);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-primary);
  text-align: center;
  outline: none;
  transition: border-color .14s;
}
.cmp-cfg__num:focus { border-color: var(--ink-primary); }
.cmp-cfg__unit {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.02em;
}
.cmp-cfg__slider {
  flex: 1;
  min-width: 60px;
  accent-color: var(--ink-primary);
  cursor: pointer;
}
.cmp-cfg__val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-primary);
  min-width: 42px;
  text-align: right;
}

/* 策略 chip 容器（复用 .timeline-series 的边框背景） */
.cmp-scenarios {
  flex-wrap: wrap;
  padding: 10px 16px;
  gap: 10px;
}

/* 单条策略 chip */
.cmp-sc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: #fff;
  border: 1px solid var(--line-standard);
  transition: border-color .14s, background .14s;
}
.cmp-sc:hover {
  background: #fafafa;
}
.cmp-sc__dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.cmp-sc__name {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-primary);
  width: 110px;
  padding: 2px 0;
}
.cmp-sc__name:focus { background: #fff8e8; }
.cmp-sc__mode {
  padding: 3px 6px;
  border: 1px solid var(--line-weak);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--ink-primary);
  outline: none;
  cursor: pointer;
}
.cmp-sc__hours,
.cmp-sc__bdays {
  width: 48px;
  padding: 3px 6px;
  border: 1px solid var(--line-weak);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-primary);
  text-align: center;
  outline: none;
}
.cmp-sc__hours:focus,
.cmp-sc__bdays:focus { border-color: var(--ink-primary); }
.cmp-sc__unit {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-tertiary);
}
.cmp-sc__sep {
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
}
.cmp-sc__del {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color .14s;
}
.cmp-sc__del:hover { color: #c95f6c; }

/* 关键数据表 */
.cmp-tbl-wrap {
  background: #fff;
  border: 1px solid var(--line-weak);
  padding: 12px 16px;
  margin-bottom: 14px;
  overflow-x: auto;
}
.cmp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.cmp-tbl th,
.cmp-tbl td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid var(--line-weak);
  color: var(--ink-primary);
  white-space: nowrap;
}
.cmp-tbl th {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-tertiary);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.cmp-tbl th:first-child,
.cmp-tbl td:first-child {
  text-align: left;
}
.cmp-tbl__name {
  font-family: var(--font-cn);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmp-tbl__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

/* 提示行（复用走向图的） */
.timeline-tip code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--line-weak);
  padding: 1px 5px;
  color: var(--ink-primary);
  margin: 0 1px;
}

/* ---------- 算法说明抽屉 ---------- */

/* head 上的 i 按钮 */
.cmp-info-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-standard);
  background: #fff;
  color: var(--ink-secondary);
  font-family: 'Outfit', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  flex-shrink: 0;
  transition: all .14s;
}
.cmp-info-btn:hover {
  background: var(--ink-primary);
  color: #fff;
  border-color: var(--ink-primary);
}

/* drawer 容器（fixed 全屏覆盖层） */
.cmp-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.cmp-drawer[hidden] { display: none; }

.cmp-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 22, 0);
  transition: background .3s;
  cursor: pointer;
}
.cmp-drawer--open .cmp-drawer__overlay {
  background: rgba(20, 20, 22, 0.32);
}

.cmp-drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 540px;
  max-width: 92vw;
  background: #fff;
  border-left: 1px solid var(--line-standard);
  box-shadow: -8px 0 32px -12px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
}
.cmp-drawer--open .cmp-drawer__panel {
  transform: translateX(0);
}

.cmp-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-weak);
  flex-shrink: 0;
}
.cmp-drawer__title {
  font-family: var(--font-cn);
  font-size: 13.5px;
  color: var(--ink-primary);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.cmp-drawer__close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-tertiary);
  cursor: pointer;
  transition: color .14s;
}
.cmp-drawer__close:hover { color: var(--ink-primary); }

.cmp-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px 40px;
  font-family: var(--font-cn);
  color: var(--ink-primary);
  line-height: 1.78;
  font-size: 13px;
}
.cmp-drawer__body code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: #fafafa;
  border: 1px solid var(--line-weak);
  padding: 1px 5px;
  color: var(--ink-primary);
  margin: 0 1px;
}

.cmp-drawer__h {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line-weak);
  padding-bottom: 6px;
  margin: 26px 0 14px;
  font-weight: 500;
}
.cmp-drawer__h:first-child { margin-top: 0; }

.cmp-drawer__p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.75;
}

/* 公式块 */
.cmp-drawer__formula {
  font-family: var(--font-mono);
  font-size: 12px;
  background: #fafafa;
  border: 1px solid var(--line-weak);
  padding: 12px 16px;
  margin: 8px 0 16px;
  white-space: pre;
  overflow-x: auto;
  color: var(--ink-primary);
  line-height: 1.75;
  letter-spacing: 0;
}

/* 变量定义表 */
.cmp-drawer__var {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 8px 16px;
  margin: 0 0 18px;
}
.cmp-drawer__var dt {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-primary);
  background: #f3f3f3;
  padding: 2px 8px;
  width: fit-content;
  align-self: start;
  letter-spacing: 0;
  height: fit-content;
}
.cmp-drawer__var dd {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.7;
}
.cmp-drawer__var--wide {
  grid-template-columns: 50px 1fr;
  gap: 12px 16px;
}
.cmp-drawer__var--wide dd { line-height: 1.85; }
.cmp-drawer__var--wide dd strong {
  color: var(--ink-primary);
  font-weight: 500;
  font-size: 12.5px;
}
.cmp-drawer__var--wide dd br + * { margin-top: 2px; }

/* 经验法则列表 */
.cmp-drawer__rules {
  margin: 6px 0 0;
  padding-left: 22px;
}
.cmp-drawer__rules li {
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.78;
}
.cmp-drawer__rules li::marker {
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
}
.cmp-drawer__rules strong {
  color: var(--ink-primary);
  font-weight: 500;
}

@media (max-width: 640px) {
  .cmp-drawer__panel { width: 100vw; }
  .cmp-drawer__body { padding: 18px 18px 32px; }
}

/* ============================================================
   原则库（Principles）模块
   ============================================================ */

/* ---- 列表页头部介绍块 ---- */
.pr-intro {
  margin: 12px 0 32px;
  padding: 22px 26px;
  background: linear-gradient(135deg, #fef9e0 0%, #fef3d3 100%);
  border-left: 3px solid #b45309;
}
.pr-intro__title {
  font-family: var(--font-cn);
  font-size: 16px;
  font-weight: 500;
  color: #6a3e09;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.pr-intro__title em {
  font-family: 'Outfit', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #b45309;
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.pr-intro__desc {
  font-family: var(--font-cn);
  font-size: 13.5px;
  color: #7a5a18;
  line-height: 1.8;
}
.pr-intro__desc strong {
  color: #6a3e09;
  font-weight: 500;
}
.pr-intro__hint {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #a37722;
  font-style: italic;
}

/* ---- 卡片网格 ---- */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* ---- 单卡 ---- */
.pr-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 16px;
  background: #fff;
  border: 1px solid var(--line-weak);
  text-decoration: none;
  color: var(--ink-primary);
  transition: all .18s;
  position: relative;
}
.pr-card:hover {
  border-color: #b45309;
  box-shadow: 0 4px 18px -10px rgba(180, 83, 9, .25);
  transform: translateY(-1px);
}

.pr-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pr-card__name {
  font-family: var(--font-cn);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-primary);
  letter-spacing: 0.04em;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-card__del {
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: color .14s;
}
.pr-card__del:hover { color: #c95f6c; }

.pr-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pr-card__source,
.pr-card__cat {
  font-family: var(--font-cn);
  font-size: 11.5px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
}
.pr-card__source {
  color: #b45309;
  background: #fef9e0;
  border: 1px solid #e8d77e;
}
.pr-card__cat {
  color: var(--ink-tertiary);
  background: #f5f5f5;
  border: 1px solid var(--line-weak);
}

.pr-card__desc {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.7;
  flex: 1;
}
.pr-card__desc--empty {
  color: var(--ink-tertiary);
  font-style: italic;
}

.pr-card__templates {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 4px;
}
.pr-card__tpl {
  font-family: var(--font-cn);
  font-size: 11px;
  padding: 3px 7px;
  background: #fafafa;
  border: 1px solid var(--line-weak);
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
}
.pr-card__tpl--rev {
  background: #fef3f1;
  border-color: #f0cfc4;
  color: #a04428;
}

.pr-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--line-weak);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
}
.pr-card__usage {
  color: #b45309;
  font-weight: 500;
}

/* ---- 详情页 ---- */
.pr-detail__meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 12px 0 14px;
}
.pr-detail__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pr-detail__label {
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}
.pr-detail__input {
  padding: 8px 12px;
  border: 1px solid var(--line-weak);
  background: #fafafa;
  font-family: var(--font-cn);
  font-size: 13.5px;
  color: var(--ink-primary);
  outline: none;
  transition: border-color .14s, background .14s;
}
.pr-detail__input:hover { border-color: var(--line-standard); }
.pr-detail__input:focus { border-color: var(--ink-primary); background: #fff8e8; }

.pr-detail__desc {
  width: 100%;
  margin-bottom: 28px;
  padding: 14px 18px;
  border: 1px solid var(--line-weak);
  background: #fafafa;
  font-family: var(--font-cn);
  font-size: 14px;
  color: var(--ink-primary);
  line-height: 1.8;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color .14s, background .14s;
}
.pr-detail__desc:hover { border-color: var(--line-standard); }
.pr-detail__desc:focus { border-color: var(--ink-primary); background: #fff8e8; }

/* ---- 案例区 ---- */
.pr-cases {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pr-case {
  position: relative;
  padding: 16px 18px 14px;
  background: #fbfaf6;
  border: 1px solid var(--line-weak);
  border-left: 3px solid #b45309;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.pr-case:hover {
  border-color: var(--line-standard);
  border-left-color: #b45309;
  background: #fdfcf5;
  box-shadow: 0 2px 12px -8px rgba(180, 83, 9, .25);
}
.pr-case:focus-within {
  border-color: var(--ink-primary);
  border-left-color: #b45309;
  background: #fff8e8;
}

.pr-case__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pr-case__title {
  flex: 1;
  padding: 6px 8px;
  border: none;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-primary);
  letter-spacing: 0.03em;
  outline: none;
  border-bottom: 1px solid transparent;
  transition: border-color .14s;
}
.pr-case__title:hover { border-bottom-color: var(--line-weak); }
.pr-case__title:focus { border-bottom-color: var(--ink-primary); }
.pr-case__title::placeholder {
  color: var(--ink-tertiary);
  font-weight: 400;
  font-style: italic;
}

.pr-case__del {
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  transition: all .14s;
}
.pr-case__del:hover {
  color: #c95f6c;
  background: #fef2f2;
}

.pr-case__content {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-weak);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 13.5px;
  color: var(--ink-primary);
  line-height: 1.75;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color .14s;
  min-height: 80px;
}
.pr-case__content:hover { border-color: var(--line-standard); }
.pr-case__content:focus { border-color: var(--ink-primary); }
.pr-case__content::placeholder {
  color: var(--ink-tertiary);
  font-style: italic;
  line-height: 1.7;
}

.pr-case__meta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  text-align: right;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .pr-intro { padding: 18px; }
  .pr-grid { grid-template-columns: 1fr; }
  .pr-detail__meta-row { grid-template-columns: 1fr; }
}

/* ============================================================
   决策机器（MCDA）模块
   ============================================================ */

/* ============== 决策详情 · 双列布局（dc-twocol） ============== */

.dc-twocol {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}

.dc-twocol__left {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  padding: 18px 18px 22px;
  background: #fafaf6;
  border: 1px solid var(--line-weak);
}

.dc-twocol__right {
  min-width: 0; /* 防止 grid 子元素撑出去 */
}

@media (max-width: 1100px) {
  .dc-twocol { grid-template-columns: 1fr; }
  .dc-twocol__left {
    position: static;
    max-height: none;
  }
}

/* ============== 左侧原则面板（pp-panel · pp-row） ============== */

.pp-panel__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-weak);
  position: relative;
}
.pp-panel__title {
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-primary);
  letter-spacing: 0.06em;
}
.pp-panel__title em {
  font-family: 'Outfit', Georgia, serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-tertiary);
  font-weight: 400;
  margin-left: 6px;
  letter-spacing: 0.06em;
}
.pp-panel__hint {
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--ink-tertiary);
  line-height: 1.65;
}
.pp-panel__manage {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-cn);
  font-size: 11px;
  color: #b45309;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.pp-panel__manage:hover { text-decoration: underline; }

.pp-panel__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  padding: 10px 0 8px;
  letter-spacing: 0.04em;
}
.pp-panel__count strong {
  color: #b45309;
  font-weight: 600;
  font-size: 13px;
  margin-right: 2px;
}

.pp-panel__empty {
  padding: 28px 16px;
  text-align: center;
}
.pp-panel__empty-title {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.pp-panel__empty-hint {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-tertiary);
  line-height: 1.7;
}
.pp-panel__empty-hint a {
  color: #b45309;
  text-decoration: none;
  border-bottom: 1px solid #b45309;
}

.pp-panel__list {
  display: flex;
  flex-direction: column;
}

/* ---- 单条原则行 ---- */

.pp-row {
  --pp-color: #888;
  padding: 12px 0 14px;
  border-bottom: 1px dashed var(--line-weak);
}
.pp-row:last-child { border-bottom: none; }

.pp-row__head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.pp-row__check {
  margin: 0;
  cursor: pointer;
  accent-color: var(--pp-color);
  width: 14px; height: 14px;
}
.pp-row__color {
  width: 4px;
  height: 18px;
  background: var(--pp-color);
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity .14s;
}
.pp-row--on .pp-row__color { opacity: 1; }

.pp-row__name {
  font-family: var(--font-cn);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-secondary);
  letter-spacing: 0.03em;
  flex: 1;
  transition: color .14s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-row--on .pp-row__name { color: var(--ink-primary); }

.pp-row__src {
  font-family: var(--font-cn);
  font-size: 10.5px;
  color: var(--ink-tertiary);
  padding: 1px 5px;
  background: #fff;
  border: 1px solid var(--line-weak);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.pp-row__minihint {
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--ink-tertiary);
  margin: 4px 0 0 30px;
  line-height: 1.6;
  font-style: italic;
}

.pp-row__body {
  margin: 10px 0 0 18px;
  padding-left: 12px;
  border-left: 2px solid var(--pp-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-row__weight {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-row__wlabel {
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pp-row__slider {
  flex: 1;
  accent-color: var(--pp-color);
  cursor: pointer;
  min-width: 60px;
  margin: 0;
}
.pp-row__wval {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-color);
  min-width: 28px;
  text-align: right;
}

.pp-row__desc {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.7;
  letter-spacing: 0.02em;
  padding: 4px 0;
}

.pp-row__derive {
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid var(--pp-color);
  background: #fff;
  color: var(--pp-color);
  font-family: var(--font-cn);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all .14s;
}
.pp-row__derive:hover {
  background: var(--pp-color);
  color: #fff;
}

.pp-row__derived {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--pp-color);
  font-style: italic;
}
.pp-row__derived-icon {
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
}

.pp-row__notpl {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-tertiary);
  font-style: italic;
  line-height: 1.6;
  padding: 4px 0;
}

.pp-row__cases {
  margin-top: 2px;
}
.pp-row__cases-sum {
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--ink-secondary);
  cursor: pointer;
  list-style: none;
  letter-spacing: 0.02em;
  padding: 4px 0;
  transition: color .14s;
}
.pp-row__cases-sum:hover { color: var(--pp-color); }
.pp-row__cases-sum::-webkit-details-marker { display: none; }
.pp-row__cases[open] .pp-row__cases-sum {
  color: var(--pp-color);
  font-weight: 500;
}

.pp-row__cases-body {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-row__case {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line-weak);
  border-left: 2px solid var(--pp-color);
}
.pp-row__case-title {
  font-family: var(--font-cn);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-primary);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}
.pp-row__case-body {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============== 准则区按原则分组（dc-criteria-group） ============== */

.dc-criteria-group {
  --pp-color: #888;
  margin-bottom: 16px;
  padding: 12px 14px 10px;
  background: #fafaf6;
  border: 1px solid var(--line-weak);
  border-left: 3px solid var(--pp-color);
}
.dc-criteria-group:last-child { margin-bottom: 0; }

.dc-criteria-group--orphan {
  background: #fafafa;
  border-style: dashed;
  border-left-style: solid;
}

/* 待恢复：原则曾被勾选过派生准则，但当前 ref 已被取消 — 警示色 */
.dc-criteria-group--dangling {
  background: #fff8ed;
  border-color: #f5d2a0;
  border-left: 3px solid var(--pp-color);
}
.dc-criteria-group--dangling .dc-criteria-group__head {
  border-bottom-color: #f5d2a0;
}

.dc-criteria-group__restore {
  padding: 4px 10px;
  border: 1px solid var(--pp-color);
  background: #fff;
  color: var(--pp-color);
  font-family: var(--font-cn);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all .14s;
}
.dc-criteria-group__restore:hover {
  background: var(--pp-color);
  color: #fff;
}

.dc-criteria-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--line-weak);
  flex-wrap: wrap;
}
.dc-criteria-group__color {
  width: 8px;
  height: 8px;
  background: var(--pp-color);
  border-radius: 50%;
  flex-shrink: 0;
}
.dc-criteria-group__name {
  font-family: var(--font-cn);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-primary);
  letter-spacing: 0.04em;
}
.dc-criteria-group__src {
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--ink-tertiary);
  font-style: italic;
  letter-spacing: 0.02em;
}
.dc-criteria-group__pweight {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--pp-color);
  font-weight: 600;
  padding: 2px 7px;
  background: #fff;
  border: 1px solid var(--pp-color);
  letter-spacing: 0.04em;
}
.dc-criteria-group__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary);
  letter-spacing: 0.04em;
}
.dc-criteria-group__empty {
  padding: 12px;
  font-family: var(--font-cn);
  font-size: 11.5px;
  color: var(--ink-tertiary);
  font-style: italic;
  text-align: center;
  line-height: 1.7;
}

.dc-empty__hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-tertiary);
  font-style: italic;
}

/* 决策详情：撑满整屏（左原则面板 + 右 MCDA 矩阵都需要宽度）
   关键点：
   1. .page__body.analysis-body--wide 解除 max-width 让综合分析撑满 viewport
   2. .dc-detail 自身不再 max-width，width: 100% 占满父级
   3. 滚动条永远预留位（scrollbar-gutter: stable），杜绝页面抖动 */
html {
  scrollbar-gutter: stable;
}
.page__body.analysis-body--wide {
  max-width: none;
  width: 100%;
}
.dc-detail {
  max-width: none;
  width: 100%;
  margin: 0;
}

/* 左侧 sticky 面板：滚动条预留位，避免内部内容随滚动条出现而抖动 */
.dc-twocol__left {
  scrollbar-gutter: stable;
}

/* 但其他综合分析子页面（事件走向 / 复利可视化）保留中等宽度，避免拉得太开 */
.page__body.analysis-body--wide .timeline-detail:not(.dc-detail),
.page__body.analysis-body--wide .cmp-detail {
  max-width: 1400px;
  margin: 0 auto;
}

/* 描述 textarea */
.dc-desc {
  width: 100%;
  margin: 10px 0 28px;
  padding: 14px 18px;
  border: 1px solid var(--line-weak);
  background: #fafafa;
  font-family: var(--font-cn);
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.8;
  resize: vertical;
  outline: none;
  transition: border-color .14s, background .14s;
  box-sizing: border-box;
}
.dc-desc:hover { border-color: var(--line-standard); }
.dc-desc:focus { background: #fff8e8; border-color: var(--ink-primary); color: var(--ink-primary); }

/* 区块 */
.dc-section {
  margin-bottom: 34px;
}
.dc-section__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-weak);
}
.dc-section__title {
  font-family: var(--font-cn);
  font-size: 15.5px;
  color: var(--ink-primary);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.dc-section__title em {
  font-family: 'Outfit', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-tertiary);
  margin-left: 8px;
  letter-spacing: 0.06em;
}
.dc-section__hint {
  flex: 1;
  font-size: 13px;
  color: var(--ink-tertiary);
  line-height: 1.6;
}
.dc-section__add {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--line-standard);
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all .14s;
}
.dc-section__add:hover {
  background: var(--ink-primary);
  color: #fff;
  border-color: var(--ink-primary);
}

.dc-empty {
  padding: 22px 18px;
  font-size: 13.5px;
  color: var(--ink-tertiary);
  background: #fafafa;
  border: 1px dashed var(--line-weak);
  text-align: center;
}

/* ---- 选项行 ---- */
.dc-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #fafafa;
  border: 1px solid var(--line-weak);
  transition: border-color .14s, background .14s;
}
.dc-option:hover { border-color: var(--line-standard); background: #fff; }

.dc-option__dot-wrap {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dc-option__color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line-standard);
  background: transparent;
  cursor: pointer;
}
.dc-option__color::-webkit-color-swatch-wrapper { padding: 1px; }
.dc-option__color::-webkit-color-swatch { border: none; }

.dc-option__name {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 14.5px;
  color: var(--ink-primary);
  outline: none;
}
.dc-option__name:hover { border-color: var(--line-weak); background: #fff; }
.dc-option__name:focus { border-color: var(--ink-primary); background: #fff8e8; }

.dc-option__del {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  font-size: 15px;
  cursor: pointer;
  transition: color .14s;
}
.dc-option__del:hover { color: #c95f6c; }

/* ---- 准则行 ---- */
.dc-criteria {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-criterion {
  display: grid;
  grid-template-columns: 260px 36px 1fr 64px 30px;
  gap: 16px;
  align-items: center;
  padding: 10px 16px;
  background: #fafafa;
  border: 1px solid var(--line-weak);
  transition: border-color .14s, background .14s;
}
.dc-criterion:hover { border-color: var(--line-standard); background: #fff; }

.dc-criterion__name {
  padding: 6px 12px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-cn);
  font-size: 14.5px;
  color: var(--ink-primary);
  outline: none;
}
.dc-criterion__name:hover { border-color: var(--line-weak); background: #fff; }
.dc-criterion__name:focus { border-color: var(--ink-primary); background: #fff8e8; }

.dc-criterion__reverse {
  width: 32px;
  height: 30px;
  border: 1px solid var(--line-weak);
  background: #fff;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all .14s;
}
.dc-criterion__reverse:hover { border-color: var(--line-standard); color: var(--ink-secondary); }
.dc-criterion__reverse--on {
  background: var(--ink-primary);
  color: #fff;
  border-color: var(--ink-primary);
}

.dc-criterion__slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--line-standard);
  outline: none;
  cursor: pointer;
}
.dc-criterion__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--ink-primary);
  cursor: pointer;
}
.dc-criterion__slider::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--ink-primary);
  cursor: pointer;
  border: none;
}

.dc-criterion__pct {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-secondary);
  text-align: right;
}

.dc-criterion__del {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  font-size: 15px;
  cursor: pointer;
  transition: color .14s;
}
.dc-criterion__del:hover { color: #c95f6c; }

/* ---- 打分矩阵 ---- */
.dc-matrix-wrap {
  overflow-x: auto;
}
.dc-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-cn);
  font-size: 14.5px;
}
.dc-matrix th, .dc-matrix td {
  border: 1px solid var(--line-weak);
  padding: 0;
}
.dc-matrix__corner {
  background: #fafafa;
  width: 220px;
}
.dc-matrix__crh {
  padding: 14px 16px !important;
  background: #fafafa;
  font-weight: 500;
  color: var(--ink-primary);
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
.dc-matrix__crname { font-weight: 500; }
.dc-matrix__rev {
  margin-left: 6px;
  color: var(--ink-tertiary);
  font-size: 12px;
  font-weight: 400;
}
.dc-matrix__opt {
  padding: 14px 18px !important;
  background: #fafafa;
  color: var(--ink-primary);
  font-size: 14.5px;
  white-space: nowrap;
}
.dc-matrix__dot {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 10px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.08);
}
.dc-matrix__cell {
  text-align: center;
  background: #fff;
  transition: background .12s;
}
.dc-matrix__cell:hover { background: #fff8e8; }
.dc-matrix__cell--empty { background: #fcfcfc; }

.dc-matrix__input {
  width: 100%;
  height: 52px;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--ink-primary);
  outline: none;
  -moz-appearance: textfield;
}
.dc-matrix__input::-webkit-outer-spin-button,
.dc-matrix__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dc-matrix__input:focus {
  background: #fff8e8;
}

/* ---- 结果对比柱图 ---- */
.dc-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dc-result {
  display: grid;
  grid-template-columns: 36px 16px 240px 1fr 80px 100px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: #fafafa;
  border: 1px solid var(--line-weak);
  transition: all .18s;
}
.dc-result--best {
  background: #fff8e8;
  border-color: var(--ink-primary);
}
.dc-result__rank {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink-tertiary);
  text-align: center;
}
.dc-result--best .dc-result__rank { color: var(--ink-primary); font-weight: 500; }

.dc-result__dot {
  width: 14px; height: 14px;
  border: 1px solid rgba(0,0,0,0.08);
}
.dc-result__name {
  font-family: var(--font-cn);
  font-size: 14.5px;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-result__bar {
  height: 20px;
  background: #f0f0f0;
  position: relative;
  overflow: hidden;
}
.dc-result__fill {
  display: block;
  height: 100%;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.dc-result__score {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-primary);
  text-align: right;
}
.dc-result__crown {
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--ink-primary);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  background: #fff;
  border: 1px solid var(--ink-primary);
  padding: 4px 8px;
}

.dc-results__warn {
  margin-top: 14px;
  padding: 12px 16px;
  background: #fef9e0;
  border: 1px solid #e8d77e;
  font-size: 13px;
  color: #7a5a18;
  line-height: 1.7;
}

/* ---- 最终决策区 ---- */
.dc-conclusion {
  background: #fafafa;
  border: 1px solid var(--line-weak);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dc-conclusion__choose {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dc-conclusion__label {
  font-family: var(--font-cn);
  font-size: 14px;
  color: var(--ink-secondary);
  white-space: nowrap;
}
.dc-conclusion__select {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line-standard);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 14.5px;
  color: var(--ink-primary);
  outline: none;
  cursor: pointer;
}
.dc-conclusion__select:focus { border-color: var(--ink-primary); }
.dc-conclusion__when {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-tertiary);
  white-space: nowrap;
}
.dc-conclusion__rationale {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-weak);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 14.5px;
  color: var(--ink-primary);
  line-height: 1.8;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color .14s;
}
.dc-conclusion__rationale:hover { border-color: var(--line-standard); }
.dc-conclusion__rationale:focus { border-color: var(--ink-primary); background: #fff8e8; }
.dc-conclusion__review {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dc-conclusion__review-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line-standard);
  background: #fff;
  font-family: var(--font-cn);
  font-size: 14.5px;
  color: var(--ink-primary);
  outline: none;
}
.dc-conclusion__review-input:focus { border-color: var(--ink-primary); background: #fff8e8; }

/* ============== 决策列表卡片（dc-card） ============== */

.dc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line-weak);
  text-decoration: none;
  color: var(--ink-primary);
  transition: all .18s;
}
.dc-card:hover {
  border-color: var(--ink-primary);
  box-shadow: 0 4px 16px -8px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

.dc-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.dc-card__title {
  font-family: var(--font-cn);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-card__del {
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--ink-tertiary);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: color .14s;
}
.dc-card__del:hover { color: #c95f6c; }

.dc-card__opts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-card__opt {
  display: grid;
  grid-template-columns: 8px 1fr 60px 36px 14px;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
}
.dc-card__opt--best { color: var(--ink-primary); font-weight: 500; }
.dc-card__dot {
  width: 8px; height: 8px;
  border: 1px solid rgba(0,0,0,0.08);
}
.dc-card__opt-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-secondary);
}
.dc-card__opt--best .dc-card__opt-name { color: var(--ink-primary); }

.dc-card__opt-bar {
  height: 6px;
  background: #f0f0f0;
  overflow: hidden;
}
.dc-card__opt-fill {
  display: block;
  height: 100%;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.dc-card__opt-score {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-secondary);
  text-align: right;
}
.dc-card__opt--best .dc-card__opt-score { color: var(--ink-primary); }

.dc-card__crown {
  font-size: 12px;
  color: var(--ink-primary);
  text-align: center;
}

.dc-card__more {
  font-size: 11px;
  color: var(--ink-tertiary);
  padding-left: 16px;
  font-style: italic;
}

.dc-card__empty {
  padding: 12px;
  font-size: 11.5px;
  color: var(--ink-tertiary);
  background: #fafafa;
  text-align: center;
}

.dc-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--line-weak);
  font-size: 11px;
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
}
.dc-card__progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dc-card__progress-bar {
  display: inline-block;
  width: 50px;
  height: 4px;
  background: #e8e8e8;
  overflow: hidden;
}
.dc-card__progress-fill {
  display: block;
  height: 100%;
  background: var(--ink-primary);
  transition: width .3s;
}

@media (max-width: 960px) {
  .dc-criterion {
    grid-template-columns: 1fr 36px 1fr 60px 30px;
    gap: 10px;
  }
  .dc-result {
    grid-template-columns: 30px 14px 140px 1fr 70px;
    gap: 10px;
  }
  .dc-result__crown { display: none; }
  .dc-matrix__corner { width: 130px; }
  .dc-matrix__opt { padding: 10px 10px !important; font-size: 13.5px; }
  .dc-matrix__crh { padding: 10px 10px !important; font-size: 13px; }
  .dc-matrix__input { height: 44px; font-size: 15px; }
}

/* 窄屏 / 中屏 */
@media (max-width: 960px) {
  .analysis-grid {
    grid-template-columns: 1fr;
  }
  .timeline-config {
    grid-template-columns: 1fr 1fr;
  }
  .timeline-config__row {
    justify-content: flex-start;
  }
  .compound-config {
    grid-template-columns: 1fr 1fr;
  }
  .cmp-sc__name {
    width: 80px;
  }
}

/* =========================================================
   上 工 治 未 病 · 风 险 预 警 系 统（化工厂储罐风）
   ========================================================= */

/* ---------- 入口卡片：警示色调 + 红角标 ---------- */
.analysis-card--warning {
  --card-accent: #dc2626;
}
.analysis-card--warning:hover {
  border-color: rgba(220, 38, 38, 0.35);
  box-shadow: 0 6px 24px rgba(220, 38, 38, 0.12);
}
.analysis-card__alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 8px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 11px;
  vertical-align: middle;
  animation: warning-alert-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
}
@keyframes warning-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* ---------- 列表：空状态 ---------- */
.warning-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 30px 80px;
  text-align: center;
}
.warning-empty__icon {
  width: 200px;
  height: 280px;
  margin-bottom: 24px;
  opacity: 0.85;
}
.warning-empty__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-primary);
  margin: 0 0 14px;
}
.warning-empty__hint {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-secondary);
  max-width: 540px;
  margin: 0;
}

/* ---------- 列表：储罐网格 ---------- */
.warning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 12px;
}
.warning-card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 18px 18px 18px 14px;
  background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}
.warning-card:hover {
  border-color: rgba(15, 23, 42, 0.2);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.warning-card__del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 4px;
  color: var(--ink-tertiary, #94a3b8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  z-index: 2;
}
.warning-card:hover .warning-card__del { opacity: 1; }
.warning-card__del:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.warning-card__tank {
  flex: 0 0 110px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.warning-card__tank .tank-wrap {
  width: 100%;
  height: 100%;
}
.warning-card__tank .tank-status {
  display: none;
}
.warning-card__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.warning-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-primary);
  letter-spacing: 0.01em;
}
.warning-card__desc {
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.warning-card__nums {
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  color: var(--ink-tertiary, #94a3b8);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.warning-card__nums b {
  color: var(--ink-primary);
  font-weight: 700;
  font-size: 14px;
}

/* ---------- 详情页 ---------- */
.warning-detail {
  background: #fff;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 8px;
  padding: 20px 24px 28px;
}
.warning-detail__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-light, #e5e7eb);
  margin-bottom: 20px;
}
.warning-detail__back {
  font-size: 13px;
  color: var(--ink-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.warning-detail__back:hover { color: var(--ink-primary); }
.warning-detail__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  border: 0;
  border-bottom: 1.5px dashed transparent;
  background: transparent;
  padding: 4px 0;
  color: var(--ink-primary);
  outline: none;
  transition: border-color 0.15s;
}
.warning-detail__title:hover,
.warning-detail__title:focus {
  border-color: var(--ink-tertiary, #94a3b8);
}
.warning-detail__del {
  padding: 6px 14px;
  background: transparent;
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.warning-detail__del:hover {
  background: #dc2626;
  color: #fff;
}

.warning-detail__body {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1100px) {
  .warning-detail__body {
    grid-template-columns: 1fr;
  }
}
.warning-detail__tank-col {
  position: sticky;
  top: 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
}
.warning-detail__edit {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---------- 储罐 SVG 容器 ---------- */
.tank-wrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tank-wrap--small { width: 110px; }
.tank-wrap--large {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.tank-svg {
  width: 100%;
  height: auto;
  display: block;
}
.tank-wave {
  animation: tank-wave-flow 4s linear infinite;
}
@keyframes tank-wave-flow {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-40px); }
}
.tank-light--green  { animation: tank-light-green  2.4s ease-in-out infinite; }
.tank-light--yellow { animation: tank-light-yellow 1.5s ease-in-out infinite; }
.tank-light--red    { animation: tank-light-red    0.7s ease-in-out infinite; }
@keyframes tank-light-green {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(34, 197, 94, 0.3)); }
  50%      { filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.7)); }
}
@keyframes tank-light-yellow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(234, 179, 8, 0.4)); }
  50%      { filter: drop-shadow(0 0 10px rgba(234, 179, 8, 0.9)); }
}
@keyframes tank-light-red {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(220, 38, 38, 0.5)); opacity: 0.85; }
  50%      { filter: drop-shadow(0 0 16px rgba(220, 38, 38, 1));   opacity: 1; }
}
.tank-probe-pulse {
  animation: tank-probe-pulse 0.9s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes tank-probe-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.tank-wrap.is-breach .tank-svg {
  animation: tank-breach-shake 0.5s ease-in-out infinite;
}
@keyframes tank-breach-shake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-1px, 0); }
  75%      { transform: translate(1px, 0); }
}

/* 状态横条 */
.tank-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.tank-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.tank-status--green  .tank-status__dot { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.55); }
.tank-status--yellow .tank-status__dot { background: #eab308; box-shadow: 0 0 6px rgba(234, 179, 8, 0.55); }
.tank-status--red    .tank-status__dot { background: #dc2626; box-shadow: 0 0 8px rgba(220, 38, 38, 0.7); animation: tank-light-red 0.7s ease-in-out infinite; }
.tank-status__label { font-weight: 700; color: var(--ink-primary); }
.tank-status--green  .tank-status__label { color: #15803d; }
.tank-status--yellow .tank-status__label { color: #a16207; }
.tank-status--red    .tank-status__label { color: #991b1b; }
.tank-status__type {
  color: var(--ink-tertiary, #94a3b8);
  font-size: 11px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--line-light, #e5e7eb);
}

/* ---------- 右侧编辑面板 ---------- */
.warning-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.warning-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.02em;
}
.warning-field__hint {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-tertiary, #94a3b8);
}
.warning-field__current {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 14px;
  background: #f1f5f9;
  letter-spacing: 0.05em;
}
.warning-field__current--green  { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.warning-field__current--yellow { background: rgba(234, 179, 8, 0.18); color: #a16207; }
.warning-field__current--red    { background: rgba(220, 38, 38, 0.15); color: #991b1b; }

.warning-field__textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-primary);
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 6px;
  background: #fafbfc;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.warning-field__textarea:focus {
  border-color: #dc2626;
  background: #fff;
}

/* 类型切换 */
.warning-type-toggle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.warning-type-toggle__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  background: #fafbfc;
  border: 1.5px solid var(--line-light, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.warning-type-toggle__btn:hover {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.2);
}
.warning-type-toggle__btn.is-active {
  background: #fff;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}
.warning-type-toggle__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.warning-type-toggle__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
}
.warning-type-toggle__hint {
  font-size: 11px;
  color: var(--ink-tertiary, #94a3b8);
}

/* 阈值行 */
.warning-threshold-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.warning-threshold {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-secondary);
  padding: 8px 14px;
  background: #fafbfc;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 6px;
}
.warning-threshold__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.warning-threshold__dot--yellow { background: #eab308; }
.warning-threshold__dot--red    { background: #dc2626; }
.warning-threshold input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  outline: none;
  background: #fff;
  margin-left: 4px;
}

/* 当前值模式 + 滑块 */
.warning-current-mode {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}
.warning-current-mode__opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-secondary);
  cursor: pointer;
}
.warning-current-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fafbfc;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 6px;
  margin-top: 6px;
}
.warning-current-input input[type="range"] {
  flex: 1;
  accent-color: #dc2626;
}
.warning-current-input input[type="number"] {
  width: 70px;
  padding: 6px 10px;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  outline: none;
}

/* 二元型阈值说明 */
.warning-binary-note {
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(34,197,94,0.05), rgba(220,38,38,0.05));
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-secondary, #475569);
}
.warning-binary-note__no  { color: #15803d; }
.warning-binary-note__yes { color: #991b1b; }

/* 二元型当前值大按钮 */
.warning-binary-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.warning-binary-toggle__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 14px;
  background: #fff;
  border: 2px solid var(--line-light, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
}
.warning-binary-toggle__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.warning-binary-toggle__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px #cbd5e1;
}
.warning-binary-toggle__btn--no .warning-binary-toggle__dot {
  background: #22c55e;
  box-shadow: 0 0 0 1.5px #22c55e;
}
.warning-binary-toggle__btn--yes .warning-binary-toggle__dot {
  background: #dc2626;
  box-shadow: 0 0 0 1.5px #dc2626;
}
.warning-binary-toggle__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-primary, #0f172a);
  letter-spacing: 0.04em;
}
.warning-binary-toggle__sub {
  font-size: 11.5px;
  color: var(--ink-tertiary, #94a3b8);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.warning-binary-toggle__btn.is-active.warning-binary-toggle__btn--no {
  background: rgba(34, 197, 94, 0.08);
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}
.warning-binary-toggle__btn.is-active.warning-binary-toggle__btn--no .warning-binary-toggle__sub {
  color: #15803d;
}
.warning-binary-toggle__btn.is-active.warning-binary-toggle__btn--yes {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
  animation: binary-pulse 1.6s ease-in-out infinite;
}
.warning-binary-toggle__btn.is-active.warning-binary-toggle__btn--yes .warning-binary-toggle__sub {
  color: #991b1b;
  font-weight: 700;
}
@keyframes binary-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.18); }
}

/* 因素行 */
.warning-factors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.warning-factors__empty {
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-tertiary, #94a3b8);
  background: #fafbfc;
  border: 1px dashed var(--line-light, #e5e7eb);
  border-radius: 6px;
  font-style: italic;
}
/* 因素卡片：两层结构（head 横向 + body 内容） */
.warning-factor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  background: #fafbfc;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.warning-factor:hover {
  border-color: rgba(15, 23, 42, 0.15);
  background: #fff;
}
.warning-factor__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 28px;
  gap: 10px;
  align-items: center;
}
.warning-factor__name {
  padding: 5px 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  border-radius: 4px;
  min-width: 0;
}
.warning-factor__name:hover,
.warning-factor__name:focus {
  border-color: var(--line-light, #e5e7eb);
  background: #fff;
}

/* kind 三选按钮组（小段） */
.warning-factor__kind-seg {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.warning-factor__kind-seg button {
  padding: 4px 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--ink-secondary, #475569);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  letter-spacing: 0.04em;
}
.warning-factor__kind-seg button:hover {
  color: var(--ink-primary);
}
.warning-factor__kind-seg button.is-active {
  background: #fff;
  color: #dc2626;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* 权重小输入 */
.warning-factor__weight-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-tertiary, #94a3b8);
}
.warning-factor__weight {
  width: 52px;
  padding: 4px 6px;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  outline: none;
  background: rgba(220, 38, 38, 0.06);
  color: #991b1b;
}
.warning-factor__del {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 4px;
  color: var(--ink-tertiary, #94a3b8);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.warning-factor__del:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* factor body —— 不同 kind 共享外框 */
.warning-factor__body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.warning-factor__contrib {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-tertiary, #94a3b8);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 3px 8px;
  background: #f1f5f9;
  border-radius: 10px;
}

/* numeric body */
.warning-factor__numeric {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
}
.warning-factor__val {
  accent-color: #dc2626;
  flex: 1;
}
.warning-factor__num {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  outline: none;
  background: #fff;
}

/* binary body */
.warning-factor__binary {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 280px;
}
.warning-factor__bin-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--line-light, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.warning-factor__bin-btn:hover {
  border-color: rgba(15, 23, 42, 0.2);
}
.warning-factor__bin-btn.is-active.warning-factor__bin-btn--no {
  background: rgba(34, 197, 94, 0.08);
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.08);
}
.warning-factor__bin-btn.is-active.warning-factor__bin-btn--yes {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}
.warning-factor__bin-label {
  padding: 2px 4px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  outline: none;
  border-radius: 3px;
}
.warning-factor__bin-label:hover,
.warning-factor__bin-label:focus {
  background: #f1f5f9;
}
.warning-factor__bin-val {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--ink-tertiary, #94a3b8);
  font-family: var(--font-mono);
}
.warning-factor__bin-val input {
  width: 38px;
  padding: 1px 4px;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  text-align: center;
  background: #fff;
  outline: none;
}

/* level body */
.warning-factor__level {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 320px;
}
.warning-factor__level-segs {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.warning-factor__level-btn {
  flex: 1;
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 6px;
  background: #fff;
  border: 1.5px solid var(--line-light, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  /* 用 lv-pos 控制底部色条颜色（绿→红渐变）*/
  position: relative;
  overflow: hidden;
}
.warning-factor__level-btn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #22c55e 0%, #eab308 50%, #dc2626 100%);
  background-size: 100% 100%;
  /* 用 lv-pos 决定显示哪一段：通过 mask 截取 */
  clip-path: inset(0 calc(100% - var(--lv-pos, 50%)) 0 0);
}
.warning-factor__level-btn:hover {
  border-color: rgba(15, 23, 42, 0.2);
}
.warning-factor__level-btn.is-active {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.04);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}
.warning-factor__level-name {
  padding: 1px 3px;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  color: var(--ink-primary);
  outline: none;
  border-radius: 3px;
}
.warning-factor__level-name:hover,
.warning-factor__level-name:focus {
  background: #f1f5f9;
}
.warning-factor__level-val {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  color: var(--ink-tertiary, #94a3b8);
  font-family: var(--font-mono);
}
.warning-factor__level-val input {
  width: 30px;
  padding: 0 2px;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 10.5px;
  text-align: center;
  outline: none;
  border-radius: 2px;
}
.warning-factor__level-val input:hover,
.warning-factor__level-val input:focus {
  background: #fff;
  border-color: var(--line-light, #e5e7eb);
}
.warning-factor__level-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.warning-factor__level-add,
.warning-factor__level-rm {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 4px;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.warning-factor__level-add:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
  color: #15803d;
}
.warning-factor__level-rm:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
  color: #991b1b;
}

/* "+加因素" 按钮组（三种 kind） */
.warning-factors__add-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.warning-factors__add {
  padding: 8px 16px;
  background: transparent;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  color: var(--ink-secondary);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.warning-factors__add:hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: #dc2626;
  color: #dc2626;
}

/* 历史快照 */
.warning-snapshot-btn {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 4px;
  color: #991b1b;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.warning-snapshot-btn:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.warning-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.warning-history__empty {
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-tertiary, #94a3b8);
  background: #fafbfc;
  border: 1px dashed var(--line-light, #e5e7eb);
  border-radius: 6px;
  font-style: italic;
}
.warning-history__row {
  display: grid;
  grid-template-columns: 12px 50px 130px 1fr 28px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: #fafbfc;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 5px;
  font-size: 12.5px;
}
.warning-history__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.warning-history__dot--green  { background: #22c55e; }
.warning-history__dot--yellow { background: #eab308; }
.warning-history__dot--red    { background: #dc2626; }
.warning-history__val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-primary);
}
.warning-history__time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-tertiary, #94a3b8);
}
.warning-history__note {
  color: var(--ink-secondary);
  font-size: 12.5px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warning-history__del {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-tertiary, #94a3b8);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.warning-history__del:hover {
  background: #dc2626;
  color: #fff;
}

/* ============================================================
   上工治未病 v2 —— 已废弃（罐子方案）。下方样式保留但已无 HTML 引用。
   v3 样式在文件最末尾。
   ============================================================ */

/* 顶部描述输入（单行） */
.warning-detail__desc {
  display: block;
  width: 100%;
  font-size: 13px;
  color: var(--ink-secondary, #475569);
  border: 0;
  border-bottom: 1px dashed var(--line-light, #e5e7eb);
  background: transparent;
  padding: 6px 0 10px;
  margin: -8px 0 24px;
  outline: none;
  transition: border-color 0.15s;
}
.warning-detail__desc:hover,
.warning-detail__desc:focus { border-color: #94a3b8; }
.warning-detail__desc::placeholder { color: #cbd5e1; }

/* 主画布：罐子 + 卡片浮层 */
.warning-canvas {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 28px;
}
@media (max-width: 1100px) {
  .warning-canvas { grid-template-columns: 1fr; }
}

.warning-canvas__tank-col {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
}
.warning-canvas__tank-col .tank-wrap--large {
  /* SVG 容器：固定 aspect ratio = 360/520 */
}
.warning-canvas__tank-col .tank-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 520;
  display: block;
}

/* 参考线 hover 强化 */
.tank-ref__handle rect:hover,
.tank-ref__del:hover circle { filter: brightness(0.92); }
.tank-ref { transition: opacity 0.15s; }
.tank-ref:hover { opacity: 1; }
.tank-ref__del { opacity: 0.65; }
.tank-ref:hover .tank-ref__del { opacity: 1; }
.tank-ref__label:hover { text-decoration: underline dotted; }

/* 卡片浮层容器 */
.warning-canvas__cards {
  position: relative;
  /* 高度 = 罐子 SVG 实际渲染高度。
     SVG aspect-ratio 360/520，宽度由父容器扣去 padding 决定。
     用 padding-bottom 模拟 + min-height 兜底。 */
  min-height: 560px;
  background: #fff;
  border: 1px dashed transparent;
  border-radius: 12px;
  padding: 0;
}

.warning-canvas__cards-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-tertiary, #94a3b8);
  font-size: 14px;
  border: 1.5px dashed var(--line-light, #e5e7eb);
  border-radius: 10px;
  text-align: center;
  padding: 0 24px;
}
.warning-canvas__cards-empty-arrow {
  font-size: 32px;
  color: #cbd5e1;
  animation: empty-arrow-bounce 1.6s ease-in-out infinite;
}
.warning-canvas__cards-empty-hint {
  font-size: 12px;
  color: #cbd5e1;
  max-width: 320px;
  line-height: 1.5;
}
@keyframes empty-arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}

/* 单张卡片：absolute 定位
   罐身在 SVG viewBox 的 y=90~445（共 355px），在 viewBox 520 中占 17.3%~85.6%。
   y=100 在罐顶（top ≈ 17.3%），y=0 在罐底（top ≈ 85.6%）。 */
.wcard {
  --tank-top-pct: 17.31%;
  --tank-h-pct:   68.27%;
  position: absolute;
  left: 0;
  right: 0;
  /* center vertically on the y line */
  top: calc(var(--tank-top-pct) + (100 - var(--card-y)) * var(--tank-h-pct) / 100);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  z-index: 2;
}
.wcard__line {
  width: 60px;
  height: 20px;
  flex-shrink: 0;
}
.wcard__body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--line-light, #e5e7eb);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.wcard__body:hover {
  border-color: #94a3b8;
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.wcard.is-achieved .wcard__body {
  background: linear-gradient(135deg, #fef2f2, #fff);
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1), 0 4px 12px rgba(220, 38, 38, 0.15);
}
.wcard__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.wcard.is-achieved .wcard__check {
  background: #dc2626;
  border-color: #dc2626;
  animation: wcard-check-pop 0.4s ease-out;
}
@keyframes wcard-check-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.wcard__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wcard__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary, #0f172a);
  border: 0;
  background: transparent;
  outline: none;
  padding: 0;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}
.wcard__label:hover,
.wcard__label:focus { border-color: #cbd5e1; }
.wcard.is-achieved .wcard__label {
  color: #991b1b;
  text-decoration: line-through;
  text-decoration-color: rgba(153, 27, 27, 0.5);
}
.wcard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-tertiary, #94a3b8);
}
.wcard__y {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: text;
}
.wcard__y input {
  width: 38px;
  padding: 1px 4px;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-secondary);
  background: #fafbfc;
  outline: none;
}
.wcard__y input:focus { border-color: #94a3b8; background: #fff; }
.wcard__del {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.wcard__del:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* 工具栏（加参考线 / 加卡片） */
.warning-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 14px 18px;
  background: #fafbfc;
  border: 1px solid var(--line-light, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 24px;
}
.warning-tools__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.warning-tools__label {
  font-size: 11.5px;
  color: var(--ink-tertiary, #94a3b8);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-right: 4px;
}
.warning-tools__btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid var(--line-light, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-secondary, #475569);
  cursor: pointer;
  transition: all 0.15s;
}
.warning-tools__btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); }
.warning-tools__btn--red    { color: #dc2626; border-color: rgba(220, 38, 38, 0.4); }
.warning-tools__btn--red:hover    { background: #dc2626; color: #fff; border-color: #dc2626; }
.warning-tools__btn--yellow { color: #a16207; border-color: rgba(234, 179, 8, 0.5); }
.warning-tools__btn--yellow:hover { background: #eab308; color: #fff; border-color: #eab308; }
.warning-tools__btn--green  { color: #15803d; border-color: rgba(34, 197, 94, 0.4); }
.warning-tools__btn--green:hover  { background: #22c55e; color: #fff; border-color: #22c55e; }
.warning-tools__btn--gray   { color: #475569; border-color: rgba(148, 163, 184, 0.5); }
.warning-tools__btn--gray:hover   { background: #94a3b8; color: #fff; border-color: #94a3b8; }
.warning-tools__btn--card {
  background: var(--ink-primary, #0f172a);
  color: #fff;
  border-color: var(--ink-primary, #0f172a);
}
.warning-tools__btn--card:hover {
  background: #1e293b;
  border-color: #1e293b;
}

/* 预案 / 历史 section */
.warning-section {
  margin-bottom: 22px;
}
.warning-section__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary, #0f172a);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.warning-section__hint {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-tertiary, #94a3b8);
}
.warning-section__action {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 12px;
  border: 1px solid var(--line-light, #e5e7eb);
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  color: var(--ink-secondary, #475569);
  transition: all 0.15s;
}
.warning-section__action:hover {
  background: var(--ink-primary, #0f172a);
  color: #fff;
  border-color: var(--ink-primary, #0f172a);
}
.warning-section__textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line-light, #e5e7eb);
  border-radius: 6px;
  background: #fafbfc;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-primary, #0f172a);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.warning-section__textarea:focus {
  border-color: #94a3b8;
  background: #fff;
}

/* ============================================================
   上工治未病 v3 — 极简编辑部风（白底 / 黑墨 / 单 accent）
   原则：
     · 全 #ffffff 背景，不用米色/纸黄
     · 档位本身不上底色，只在 dot 颜色和当前档下划线区分
     · 中文为主，几乎不用英文标签
     · 一条粗黑顶线 + 大量留白 + 衬线大标题，节奏稳
   inline 注入变量：--bk-accent
   ============================================================ */

.warning-detail,
.warning-grid,
.warning-empty {
  --w-paper:        #ffffff;
  --w-tint:         #fafafa;
  --w-ink:          #0a0a0a;
  --w-ink-2:        #404040;
  --w-ink-3:        #737373;
  --w-ink-4:        #a3a3a3;
  --w-line:         #e5e5e5;
  --w-line-2:       #d4d4d4;
  --w-line-strong:  #0a0a0a;
  --w-accent:       #b8000f;
  --w-serif:        'Noto Serif SC', Georgia, 'Songti SC', serif;
  --w-sans:         'Noto Sans SC', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --w-mono:         'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}

/* dot · 印刷感纯色圆点 */
.bk-dot {
  display: inline-block;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.7em;
  line-height: 1;
  vertical-align: 0.1em;
  letter-spacing: 0;
}

/* ---------- 详情页：刊头 ---------- */
.warning-detail {
  background: var(--w-paper);
  font-family: var(--w-sans);
  color: var(--w-ink);
}

.warning-detail__masthead {
  border-top: 3px solid var(--w-line-strong);
  padding: 18px 0 22px;
  margin-bottom: 40px;
}
.warning-detail__masthead-top {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--w-ink-3);
  margin-bottom: 16px;
}
.warning-detail__back {
  color: var(--w-ink-2);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.15s, color 0.15s;
}
.warning-detail__back:hover {
  color: var(--w-ink);
  border-bottom-color: var(--w-ink);
}
.warning-detail__masthead-meta {
  flex: 1;
  color: var(--w-ink-4);
}
.warning-detail__del {
  background: transparent;
  border: 0;
  color: var(--w-ink-3);
  font-family: var(--w-sans);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s;
}
.warning-detail__del:hover { color: var(--w-accent); }

.warning-detail__title {
  display: block;
  width: 100%;
  font-family: var(--w-serif);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--w-ink);
  border: 0;
  outline: none;
  background: transparent;
  padding: 2px 0 4px;
  margin: 0;
}
.warning-detail__title:focus { background: var(--w-tint); }
.warning-detail__title::placeholder { color: var(--w-ink-4); font-weight: 500; }

.warning-detail__desc {
  display: block;
  width: 100%;
  font-family: var(--w-serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--w-ink-3);
  border: 0;
  outline: none;
  background: transparent;
  padding: 4px 0;
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}
.warning-detail__desc::placeholder { color: var(--w-ink-4); }

/* ---------- 章节标题（仅中文衬线 + 一条细线） ---------- */
.warning-section { margin-bottom: 44px; }
.warning-section__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--w-line-strong);
  font-weight: 700;
}
.warning-section__title-zh {
  font-family: var(--w-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--w-ink);
  letter-spacing: 0.02em;
}
.warning-section__rule { flex: 1; }
.warning-section__count {
  font-family: var(--w-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--w-ink-3);
  letter-spacing: 0.02em;
}
.warning-section__action {
  font-family: var(--w-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--w-ink-3);
  background: transparent;
  border: 0;
  padding: 2px 6px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.warning-section__action:hover { color: var(--w-accent); }

/* ---------- Hero · 评估走势折线图 ---------- */
.status-hero {
  background: var(--w-paper);
  border-top: 1px solid var(--w-line-strong);
  border-bottom: 1px solid var(--w-line-strong);
  padding: 18px 22px 14px;
  margin-bottom: 44px;
}
.status-hero__top {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--w-sans);
  margin-bottom: 4px;
}
.status-hero__top-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.status-hero__label {
  font-family: var(--w-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--w-ink-3);
  text-transform: uppercase;
}
.status-hero__sep {
  color: var(--w-line-2);
  font-size: 12px;
}
.status-hero__dot { font-size: 13px; line-height: 1; }
.status-hero__name {
  font-family: var(--w-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--bk-accent);
  letter-spacing: 0.02em;
}
.status-hero__time {
  font-family: var(--w-mono);
  font-size: 11.5px;
  color: var(--w-ink-3);
  letter-spacing: 0.04em;
}
.status-hero__from {
  font-family: var(--w-sans);
  font-size: 12px;
  color: var(--w-ink-3);
  font-style: italic;
  padding-left: 8px;
  border-left: 1px solid var(--w-line);
}
.status-hero__update {
  flex-shrink: 0;
  background: var(--bk-accent, var(--w-ink));
  color: #ffffff;
  border: 0;
  padding: 8px 16px;
  font-family: var(--w-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 0;
  transition: filter 0.15s, transform 0.15s;
}
.status-hero__update:hover {
  filter: brightness(0.88);
  transform: translateY(-1px);
}
.status-hero__why {
  font-family: var(--w-serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--w-ink-3);
  letter-spacing: 0;
  margin: 6px 2px 0;
  padding: 0;
  border: 0;
}

/* ---------- 折线图 ---------- */
.status-chart {
  margin-top: 8px;
  background: transparent;
}
.status-chart--empty {
  padding: 32px 12px;
  text-align: center;
  font-family: var(--w-sans);
  font-size: 13px;
  color: var(--w-ink-4);
  letter-spacing: 0.04em;
  font-style: italic;
}
.status-chart__svg {
  width: 100%;
  height: 240px;
  display: block;
  overflow: visible;
}
.status-chart__svg .chart-pt circle:nth-child(2):hover,
.status-chart__svg .chart-pt:not(.is-current) circle:hover {
  r: 6;
}

/* ---------- 分档条（白底 + 细线 + 当前档下划线） ---------- */
.status-buckets {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid var(--w-line);
  border-bottom: 1px solid var(--w-line);
  background: var(--w-paper);
}
.status-bucket {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  background: var(--w-paper);
  border-right: 1px solid var(--w-line);
  text-align: center;
  position: relative;
  transition: background 0.15s;
}
.status-bucket:last-child { border-right: 0; }
.status-bucket__dot {
  font-size: 11px;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.status-bucket__name {
  font-family: var(--w-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--w-ink-3);
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.status-bucket.is-current {
  background: var(--w-paper);
}
.status-bucket.is-current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--bk-accent, var(--w-ink));
}
.status-bucket.is-current .status-bucket__dot { opacity: 1; }
.status-bucket.is-current .status-bucket__name {
  color: var(--w-ink);
  font-weight: 700;
}

/* small 版（列表卡用） */
.status-buckets--small {
  border-top: 0;
  border-bottom: 0;
}
.status-buckets--small .status-bucket {
  padding: 6px 4px;
  gap: 4px;
  border-right: 1px solid var(--w-line);
}
.status-buckets--small .status-bucket:last-child { border-right: 0; }
.status-buckets--small .status-bucket__dot { font-size: 8px; }
.status-buckets--small .status-bucket__name { font-size: 11px; }
.status-buckets--small .status-bucket.is-current::after {
  height: 1.5px;
}

/* ---------- CTA · 「＋ 记一笔」 ---------- */
.warning-cta {
  display: flex;
  align-items: stretch;
  margin-bottom: 44px;
  gap: 20px;
}
.warning-cta__btn {
  background: var(--w-ink);
  color: var(--w-paper);
  border: 0;
  padding: 14px 28px;
  font-family: var(--w-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.warning-cta__btn:hover { background: var(--w-accent); }
.warning-cta__hint {
  flex: 1;
  align-self: center;
  font-family: var(--w-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--w-ink-3);
  line-height: 1.5;
}

/* ---------- 事件时间线 ---------- */
.status-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.status-timeline__empty {
  padding: 32px 0;
  font-family: var(--w-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--w-ink-4);
  border-bottom: 1px solid var(--w-line);
}

.status-event {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--w-line);
  transition: background 0.15s;
}
.status-event:last-child { border-bottom: 0; }
.status-event:hover .status-event__actions { opacity: 1; }
.status-event__dot {
  /* 左侧空间已经留给 body 的 padding-left，这个 dot 就在 head 行内 */
  display: none;  /* 由 head 内的 bk-dot 接管 */
}
.status-event__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.status-event__head {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--w-sans);
  font-size: 12px;
  color: var(--w-ink-3);
}
.status-event__time {
  font-family: var(--w-mono);
  font-size: 11.5px;
  color: var(--w-ink-2);
  letter-spacing: 0.03em;
  cursor: help;
}
.status-event__bucket {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--w-serif);
  font-size: 13px;
  color: var(--w-ink);
  font-weight: 600;
  padding: 1px 0;
}
.status-event__change {
  font-family: var(--w-sans);
  font-size: 12px;
  color: var(--w-ink-3);
  font-style: italic;
}
.status-event__what {
  font-family: var(--w-serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--w-ink);
  word-break: break-word;
  font-weight: 400;
}
.status-event__what-empty {
  color: var(--w-ink-4);
  font-style: italic;
}
.status-event__actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  align-self: start;
  padding-top: 1px;
}
.status-event__edit,
.status-event__del {
  background: transparent;
  border: 0;
  color: var(--w-ink-3);
  font-family: var(--w-sans);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s;
}
.status-event__edit:hover { color: var(--w-ink); }
.status-event__del:hover { color: var(--w-accent); }

/* ---------- 预案 textarea ---------- */
.warning-section__textarea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--w-serif);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--w-ink);
  background: var(--w-tint);
  border: 1px solid var(--w-line);
  border-left: 2px solid var(--w-line-strong);
  border-radius: 0;
  outline: none;
  resize: vertical;
  transition: background 0.15s, border-color 0.15s;
}
.warning-section__textarea:focus {
  background: var(--w-paper);
  border-color: var(--w-line-2);
  border-left-color: var(--w-accent);
}
.warning-section__textarea::placeholder {
  color: var(--w-ink-4);
  font-style: italic;
}

/* ---------- 列表页 toolbar ---------- */
.timeline-sub-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0 14px;
  border-top: 3px solid #0a0a0a;
  border-bottom: 1px solid #0a0a0a;
  margin-bottom: 28px;
  background: transparent;
}
.timeline-sub-back {
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  font-size: 13px;
  color: #404040;
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.timeline-sub-back:hover { color: #0a0a0a; border-bottom-color: #0a0a0a; }
.timeline-sub-title {
  flex: 1;
  font-family: 'Noto Serif SC', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.005em;
}
.timeline-sub-add {
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: #0a0a0a;
  border: 0;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0;
}
.timeline-sub-add:hover { background: #b8000f; }

/* ---------- 列表卡 · 档案夹风格 ---------- */
.warning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.warning-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 16px 22px;
  background: var(--w-paper);
  border: 1px solid var(--w-line);
  border-left: 4px solid var(--bk-accent);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.warning-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.warning-card__del {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  color: var(--w-ink-4);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  z-index: 2;
}
.warning-card:hover .warning-card__del { opacity: 1; }
.warning-card__del:hover { color: var(--w-accent); }

/* 当前档头部小标签（替代原来的 rating） */
.warning-card__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--w-sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.warning-card__head-dot { font-size: 11px; line-height: 1; }
.warning-card__head-name {
  font-family: var(--w-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--bk-accent);
  letter-spacing: 0.04em;
}
.warning-card__head-sep { color: var(--w-line-2); }
.warning-card__head-level {
  font-family: var(--w-mono);
  font-size: 11px;
  color: var(--w-ink-4);
  letter-spacing: 0.04em;
}

/* 标题 */
.warning-card__title {
  font-family: var(--w-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--w-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.warning-card__desc {
  font-family: var(--w-sans);
  font-size: 12.5px;
  color: var(--w-ink-3);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.warning-card__what {
  font-family: var(--w-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--w-ink-3);
  line-height: 1.55;
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--w-line);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* mini 折线图 */
.warning-card__chart {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.012);
  padding: 4px 4px;
}
.status-chart-mini__svg {
  width: 100%;
  height: 72px;
  display: block;
}
.status-chart-mini__empty {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--w-sans);
  font-size: 11.5px;
  color: var(--w-ink-4);
  font-style: italic;
}

/* 底部 meta */
.warning-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--w-line);
  font-family: var(--w-sans);
  font-size: 12px;
  color: var(--w-ink-4);
  letter-spacing: 0.02em;
}
.warning-card__foot-num b {
  font-weight: 700;
  color: var(--w-ink-2);
  font-family: var(--w-mono);
  font-size: 13px;
  margin-right: 2px;
}
.warning-card__foot-sep { color: var(--w-line-2); }
.warning-card__foot-time {
  font-family: var(--w-mono);
  font-size: 11.5px;
  color: var(--w-ink-3);
  letter-spacing: 0.04em;
}

/* ---------- 空状态 ---------- */
.warning-empty {
  max-width: 560px;
  margin: 80px auto;
  text-align: center;
  font-family: var(--w-sans);
}
.warning-empty__demo {
  margin: 0 auto 36px;
  text-align: left;
  background: var(--w-paper);
}
.warning-empty__title {
  font-family: var(--w-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--w-ink);
  margin: 0 0 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.warning-empty__hint {
  font-family: var(--w-serif);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--w-ink-3);
  line-height: 1.7;
  margin: 0;
}
.warning-empty__hint b {
  color: var(--w-ink);
  font-weight: 700;
}

/* ---------- 预警分档 · 内容主角卡（横排） ---------- */
.bucket-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.bucket-card {
  position: relative;
  padding: 20px 22px 16px;
  background: var(--w-paper);
  border: 1px solid var(--w-line);
  border-top: 4px solid var(--bk-accent);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: box-shadow 0.18s;
}
.bucket-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
.bucket-card.is-current {
  background: var(--bk-soft);
  border-top-width: 6px;
  padding-top: 36px;  /* 给 current-band 让位 */
}
.bucket-card__current-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bk-accent);
  color: #ffffff;
  font-family: var(--w-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 4px 0 5px;
  line-height: 1;
}

/* ---------- 字段 ---------- */
.bucket-card__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bucket-card__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bucket-card__label {
  font-family: var(--w-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--w-ink);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.bucket-card__expand {
  background: transparent;
  border: 0;
  font-size: 14px;
  color: var(--w-ink-4);
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  font-family: var(--w-mono);
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.bucket-card__expand:hover {
  color: var(--bk-accent);
  background: rgba(0, 0, 0, 0.04);
}
.bucket-card.is-current .bucket-card__expand:hover {
  background: rgba(255, 255, 255, 0.5);
}
.bucket-card__textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--w-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--w-ink);
  background: #ffffff;
  border: 1px solid var(--w-line);
  border-left: 2px solid var(--bk-accent);
  border-radius: 0;
  outline: none;
  resize: vertical;
  transition: background 0.15s, border-color 0.15s;
}
.bucket-card.is-current .bucket-card__textarea {
  background: #ffffff;
}
.bucket-card__textarea:focus {
  background: #fafafa;
  border-color: var(--w-line-2);
  border-left-color: var(--bk-accent);
}
.bucket-card__textarea::placeholder {
  color: var(--w-ink-4);
  font-style: italic;
  font-size: 13px;
  line-height: 1.65;
}

/* ---------- 底部小角标（档名+档位） ---------- */
.bucket-card__foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--w-line);
}
.bucket-card.is-current .bucket-card__foot {
  border-top-color: rgba(0, 0, 0, 0.08);
}
.bucket-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--w-sans);
  font-size: 12px;
  color: var(--w-ink-3);
  letter-spacing: 0.02em;
}
.bucket-card__dot {
  font-size: 11px;
  line-height: 1;
}
.bucket-card__name {
  font-weight: 700;
  color: var(--bk-accent);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.bucket-card__sep {
  color: var(--w-ink-4);
  font-weight: 400;
}
.bucket-card__level {
  font-family: var(--w-mono);
  font-size: 11px;
  color: var(--w-ink-4);
  letter-spacing: 0.04em;
}

/* ---------- 抽屉：单档 criteria/playbook 编辑 ---------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.42);
  backdrop-filter: blur(2px);
  cursor: pointer;
  animation: drawerFade 0.22s ease;
}
@keyframes drawerFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.drawer__panel {
  position: relative;
  width: min(560px, 92vw);
  height: 100vh;
  background: var(--w-paper);
  border-left: 4px solid var(--bk-accent);
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.22);
  animation: drawerSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes drawerSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.drawer__head {
  border-bottom: 1px solid var(--w-line);
  padding: 20px 26px 16px;
  background: var(--bk-soft);
}
.drawer__head-meta {
  font-family: var(--w-mono);
  font-size: 10.5px;
  color: var(--w-ink-4);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.drawer__head-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer__dot {
  font-size: 18px;
  line-height: 1;
}
.drawer__name {
  font-family: var(--w-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--bk-accent);
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1;
}
.drawer__current-tag {
  background: var(--bk-accent);
  color: #ffffff;
  font-family: var(--w-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 9px;
  margin-left: 2px;
}
.drawer__close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--w-ink-3);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 0;
  transition: color 0.15s, background 0.15s;
}
.drawer__close:hover {
  color: var(--w-ink);
  background: rgba(0, 0, 0, 0.05);
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.drawer__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drawer__section-title {
  font-family: var(--w-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--w-ink);
  margin: 0;
  letter-spacing: 0.01em;
}
.drawer__section-help {
  font-family: var(--w-sans);
  font-size: 12.5px;
  color: var(--w-ink-3);
  margin: 0 0 4px;
  line-height: 1.55;
}
.drawer__textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--w-serif);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--w-ink);
  background: #ffffff;
  border: 1px solid var(--w-line);
  border-left: 3px solid var(--bk-accent);
  border-radius: 0;
  outline: none;
  resize: vertical;
  min-height: 160px;
  transition: border-color 0.15s, background 0.15s;
}
.drawer__textarea:focus {
  border-color: var(--w-line-2);
  border-left-color: var(--bk-accent);
  background: #fafafa;
}
.drawer__textarea::placeholder {
  color: var(--w-ink-4);
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
}
.drawer__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--w-line);
  padding: 14px 26px;
  background: var(--w-paper);
}
.drawer__autosave {
  font-family: var(--w-sans);
  font-size: 11px;
  color: var(--w-ink-4);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.drawer__autosave.is-saved {
  color: var(--bk-accent);
  font-weight: 600;
}

/* ---------- Modal · 共同重置 ---------- */
.modal__card.event-modal,
.modal__card.bucket-editor {
  background: #ffffff;
  border-radius: 0;
  border: 1px solid #0a0a0a;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}
.event-modal .modal__header,
.bucket-editor .modal__header {
  background: #ffffff;
  color: #0a0a0a;
  border-bottom: 1px solid #0a0a0a;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.event-modal .modal__title,
.bucket-editor .modal__title {
  font-family: 'Noto Serif SC', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: 0.01em;
}
.event-modal .modal__title::before,
.bucket-editor .modal__title::before { content: none; }
.event-modal .icon-btn,
.bucket-editor .icon-btn {
  background: transparent;
  border: 0;
  color: #737373;
  width: 24px;
  height: 24px;
  border-radius: 0;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.15s;
}
.event-modal .icon-btn:hover,
.bucket-editor .icon-btn:hover { color: #b8000f; }
.event-modal .modal__footer,
.bucket-editor .modal__footer {
  background: #fafafa;
  border-top: 1px solid #e5e5e5;
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.event-modal .btn,
.bucket-editor .btn {
  border-radius: 0;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 8px 18px;
  border: 1px solid #d4d4d4;
  background: #ffffff;
  color: #0a0a0a;
  cursor: pointer;
  transition: all 0.15s;
}
.event-modal .btn--ghost,
.bucket-editor .btn--ghost {
  background: transparent;
  border-color: #e5e5e5;
  color: #404040;
}
.event-modal .btn--ghost:hover,
.bucket-editor .btn--ghost:hover {
  background: #fafafa;
  border-color: #d4d4d4;
  color: #0a0a0a;
}
.event-modal .btn--primary,
.bucket-editor .btn--primary {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #ffffff;
}
.event-modal .btn--primary:hover,
.bucket-editor .btn--primary:hover {
  background: #b8000f;
  border-color: #b8000f;
}
.event-modal .btn--danger,
.bucket-editor .btn--danger {
  background: transparent;
  border-color: #e5e5e5;
  color: #b8000f;
}
.event-modal .btn--danger:hover,
.bucket-editor .btn--danger:hover {
  background: #b8000f;
  border-color: #b8000f;
  color: #ffffff;
}
.event-modal .field-label,
.bucket-editor .field-label {
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0a0a0a;
  letter-spacing: 0.02em;
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 10px;
}
.event-modal .field-hint,
.bucket-editor .field-hint {
  font-family: 'Noto Serif SC', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: #a3a3a3;
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------- Modal: 记一笔 ---------- */
.event-modal {
  width: 520px;
  max-width: 95vw;
}
.event-modal__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 24px;
}
.event-modal__what {
  width: 100%;
  min-height: 90px;
  padding: 12px 14px;
  font-family: 'Noto Serif SC', Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  color: #0a0a0a;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-left: 2px solid #0a0a0a;
  border-radius: 0;
  outline: none;
  resize: vertical;
}
.event-modal__what:focus {
  background: #ffffff;
  border-left-color: #b8000f;
}
.event-modal__what::placeholder { color: #a3a3a3; font-style: italic; }
.event-modal__picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background: #e5e5e5;
  border: 1px solid #e5e5e5;
}
.event-modal__pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  background: #ffffff;
  border: 0;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
  border-radius: 0;
  position: relative;
}
.event-modal__pick:hover { background: #fafafa; }
.event-modal__pick.is-selected {
  background: #ffffff;
}
.event-modal__pick.is-selected::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--bk-accent);
}
.event-modal__pick-mark {
  font-size: 10px;
  line-height: 1;
}
.event-modal__pick-name {
  font-family: 'Noto Serif SC', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: #0a0a0a;
  letter-spacing: 0.02em;
}
.event-modal__pick.is-selected .event-modal__pick-name { font-weight: 700; }
.event-modal__time {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 13px;
  padding: 8px 12px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  color: #0a0a0a;
  outline: none;
}
.event-modal__time:focus {
  border-color: #0a0a0a;
  background: #ffffff;
}

/* ---------- Modal: 编辑分档 ---------- */
.bucket-editor {
  width: 620px;
  max-width: 95vw;
}
.bucket-editor__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
}
.bucket-editor__hint {
  margin: 0;
  padding: 12px 16px;
  font-family: 'Noto Serif SC', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #404040;
  line-height: 1.65;
  background: #fafafa;
  border-left: 2px solid #0a0a0a;
}
.bucket-editor__hint b {
  font-style: normal;
  font-weight: 700;
  color: #0a0a0a;
}
.bucket-editor__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e5e5;
}
.bucket-editor__row {
  display: grid;
  grid-template-columns: 30px 18px minmax(80px, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}
.bucket-editor__row:last-child { border-bottom: 0; }
.bucket-editor__order {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #a3a3a3;
  text-align: center;
}
.bucket-editor__mark {
  font-size: 11px;
  line-height: 1;
  text-align: center;
}
.bucket-editor__name {
  font-family: 'Noto Serif SC', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: #0a0a0a;
  border: 1px solid transparent;
  background: #fafafa;
  padding: 5px 10px;
  border-radius: 0;
  outline: none;
}
.bucket-editor__name:focus {
  border-color: #d4d4d4;
  background: #ffffff;
}
.bucket-editor__colors {
  display: flex;
  gap: 4px;
}
.bucket-editor__color {
  width: 20px;
  height: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  padding: 0;
}
.bucket-editor__color:hover { border-color: #0a0a0a; }
.bucket-editor__color.is-active {
  border: 2px solid #0a0a0a;
  outline: 1px solid #ffffff;
  outline-offset: -3px;
}
.bucket-editor__move {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bucket-editor__mv,
.bucket-editor__mv-ph {
  width: 22px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  cursor: pointer;
  font-size: 9px;
  color: #737373;
  transition: all 0.15s;
  padding: 0;
  font-family: inherit;
}
.bucket-editor__mv:hover {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #0a0a0a;
}
.bucket-editor__mv-ph {
  cursor: default;
  border-color: transparent;
}
.bucket-editor__del {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #e5e5e5;
  color: #737373;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  border-radius: 0;
}
.bucket-editor__del:hover:not(:disabled) {
  background: #b8000f;
  color: #ffffff;
  border-color: #b8000f;
}
.bucket-editor__del:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.bucket-editor__add {
  align-self: flex-start;
  padding: 8px 16px;
  background: transparent;
  border: 1px dashed #d4d4d4;
  border-radius: 0;
  color: #404040;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.15s;
}
.bucket-editor__add:hover {
  background: #fafafa;
  border-color: #0a0a0a;
  border-style: solid;
  color: #0a0a0a;
}
.bucket-editor__max {
  font-family: 'Noto Serif SC', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: #737373;
}





/* issuer ledger toolbar */
.issuer-ledger-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.issuer-ledger-search { min-width: 200px; padding: 6px 10px; border: 1px solid var(--border, #d8d8e0); border-radius: 8px; font-size: 13px; }
.issuer-ledger-filter { padding: 6px 10px; border: 1px solid var(--border, #d8d8e0); border-radius: 8px; font-size: 13px; background: #fff; }

/* =========================================================================
   授权中心 v2（lc-*）
   ========================================================================= */

.lc-page {
  min-height: calc(100vh - 56px);
  background: #f6f7f8;
  padding: 40px clamp(28px, 5vw, 72px) 72px;
  color: #171a1f;
}

.lc-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 28px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto 22px;
  padding: 30px 28px;
  border: 1px solid #d8dde4;
  background: linear-gradient(135deg, #10141b 0%, #1d2634 62%, #27364d 100%);
  color: #f2f5f9;
  overflow: hidden;
}

.lc-hero__glow {
  position: absolute;
  right: -120px;
  top: -140px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(51, 112, 255, 0.4) 0%, rgba(51, 112, 255, 0) 70%);
  pointer-events: none;
}

.lc-hero__eyebrow {
  margin-bottom: 10px;
  color: #8fa4c4;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
}

.lc-hero h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 650;
  color: #ffffff;
}

.lc-hero p {
  max-width: 620px;
  margin: 12px 0 0;
  color: #b8c2d1;
  font-size: 13.5px;
  line-height: 1.75;
}

.lc-status-card {
  position: relative;
  justify-self: end;
  min-width: 168px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
}

.lc-status-card span {
  display: block;
  color: #93a0b4;
  font-size: 12px;
}

.lc-status-card strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  line-height: 1;
  color: #ffffff;
}

.lc-status-card[data-license-mode="licensed"] strong { color: #59d6a5; }
.lc-status-card[data-license-mode="invalid"] strong { color: #ff8a80; }

.lc-layout {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
}

.lc-panel {
  background: #ffffff;
  border: 1px solid #dfe4ea;
  padding: 22px;
  box-shadow: 0 12px 32px rgba(24, 29, 38, 0.05);
}

.lc-panel__head { margin-bottom: 14px; }
.lc-panel__head h2 { margin: 0; font-size: 17px; font-weight: 650; }
.lc-panel__head p { margin: 6px 0 0; color: #7b8490; font-size: 12px; line-height: 1.6; }

.lc-input {
  width: 100%;
  min-height: 122px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #dfe4ea;
  outline: none;
  background: #fbfcfd;
  color: #171a1f;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
}

.lc-input:focus { border-color: var(--brand-blue); background: #ffffff; }

.lc-actions { display: flex; gap: 8px; margin-top: 12px; }
.lc-activate-btn { min-width: 128px; }

.lc-message {
  min-height: 20px;
  margin-top: 10px;
  color: #66707e;
  font-size: 12px;
  line-height: 1.5;
}

.lc-steps {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.lc-steps li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e7ebef;
  background: #fbfcfd;
  color: #4a5260;
  font-size: 12.5px;
  line-height: 1.6;
}

.lc-steps li strong {
  flex: 0 0 auto;
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-size: 13px;
}

.lc-steps code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: #eef2f7;
  padding: 1px 5px;
}

.lc-detail { display: grid; gap: 8px; }

.lc-faq {
  max-width: 1040px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lc-faq article {
  padding: 16px;
  border: 1px solid #e2e6ec;
  background: #ffffff;
}

.lc-faq h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 650; }
.lc-faq p { margin: 0; color: #66707e; font-size: 12px; line-height: 1.7; }

@media (max-width: 900px) {
  .lc-hero { grid-template-columns: 1fr; }
  .lc-status-card { justify-self: start; }
  .lc-layout { grid-template-columns: 1fr; }
  .lc-faq { grid-template-columns: 1fr; }
}

/* =========================================================================
   Pliant 品牌字标 + 统一弹窗 + 语言切换
   ========================================================================= */

.brand-wordmark { font-family: var(--font-display); letter-spacing: 0.01em; }
.brand-wordmark em {
  font-style: normal;
  font-weight: 650;
  color: inherit;
}
.home__title.brand-wordmark { letter-spacing: 0.02em; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 5px 12px;
  min-width: 52px;
  border: 1px solid #d3d8df;
  background: linear-gradient(180deg, #f6f7f9 0%, #e8eaee 100%);
  color: #4a5260;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(15, 20, 25, 0.10),
    0 3px 8px rgba(15, 20, 25, 0.06);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.lang-toggle:hover {
  border-color: #b9c1cb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(15, 20, 25, 0.14),
    0 6px 16px rgba(15, 20, 25, 0.10);
  transform: translateY(-1px);
}

.lang-toggle:active { transform: translateY(0); }

.lang-toggle__icon {
  font-size: 12px;
  line-height: 1;
  opacity: 0.65;
}

.home__meta-line {
  margin-top: 10px;
  display: block;
}

.ui-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 25, 0);
  transition: background 0.14s ease;
}

.ui-dialog-backdrop--open { background: rgba(15, 20, 25, 0.42); }
.ui-dialog-backdrop--closing { background: rgba(15, 20, 25, 0); }
.ui-dialog-backdrop--closing .ui-dialog { opacity: 0; transform: translateY(6px); }

.ui-dialog {
  width: min(430px, calc(100vw - 48px));
  padding: 22px 24px 20px;
  border: 1px solid #d8dde4;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(15, 20, 25, 0.22);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.ui-dialog-backdrop--open .ui-dialog { opacity: 1; transform: translateY(0); }

.ui-dialog__mark {
  width: 26px;
  height: 4px;
  margin-bottom: 14px;
  background: var(--brand-blue);
}

.ui-dialog__mark--danger { background: var(--vermilion); }

.ui-dialog__title {
  font-size: 15px;
  font-weight: 650;
  color: #171a1f;
}

.ui-dialog__message {
  margin-top: 10px;
  color: #4a5260;
  font-size: 13px;
  line-height: 1.7;
  max-height: 46vh;
  overflow: auto;
  word-break: break-word;
}

.ui-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.ui-dialog__danger-btn {
  background: var(--vermilion) !important;
  border-color: var(--vermilion) !important;
}

.ui-dialog__danger-btn:hover {
  background: var(--vermilion-deep) !important;
  border-color: var(--vermilion-deep) !important;
}

/* ---------- Language dropdown menu ---------- */
.lang-toggle-wrap { position: relative; display: inline-block; }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 6px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lang-menu__item {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: #2a2a2a;
  transition: background 0.12s ease;
}
.lang-menu__item:hover { background: rgba(0, 0, 0, 0.05); }
.lang-menu__item.is-active {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 600;
}
.lang-menu__item.is-active::after { content: ' ✓'; opacity: 0.55; }
.lang-menu[hidden] { display: none; }

/* =========================================================================
   弹窗/滚动区 · 全局滚动可视化
   滚动容器统一显示细滚动条，避免长内容看起来像被"截断"
   ========================================================================= */
.modal__body,
.step-modal__body,
.restore-dialog__list,
.opinion-form--floating,
.opinions-sidebar,
.dc-twocol__left,
.ui-dialog__message,
.detail-floating {
  scrollbar-width: thin;
  scrollbar-color: #c9c3b6 transparent;
}
.modal__body::-webkit-scrollbar,
.step-modal__body::-webkit-scrollbar,
.restore-dialog__list::-webkit-scrollbar,
.opinion-form--floating::-webkit-scrollbar,
.opinions-sidebar::-webkit-scrollbar,
.dc-twocol__left::-webkit-scrollbar,
.ui-dialog__message::-webkit-scrollbar,
.detail-floating::-webkit-scrollbar {
  width: 8px;
}
.modal__body::-webkit-scrollbar-thumb,
.step-modal__body::-webkit-scrollbar-thumb,
.restore-dialog__list::-webkit-scrollbar-thumb,
.opinion-form--floating::-webkit-scrollbar-thumb,
.opinions-sidebar::-webkit-scrollbar-thumb,
.dc-twocol__left::-webkit-scrollbar-thumb,
.ui-dialog__message::-webkit-scrollbar-thumb,
.detail-floating::-webkit-scrollbar-thumb {
  background: #c9c3b6;
  border-radius: 4px;
}
.modal__body::-webkit-scrollbar-thumb:hover,
.step-modal__body::-webkit-scrollbar-thumb:hover {
  background: #aaa393;
}
.modal__body::-webkit-scrollbar-track,
.step-modal__body::-webkit-scrollbar-track {
  background: transparent;
}

/* 弹窗底部滚动提示：内容未滚到底时，body 底部渐隐提示还有更多 */
.modal__card {
  max-height: 92vh;
}
.modal__body {
  overscroll-behavior: contain;
  scroll-padding-bottom: 12px;
}

/* 算法说明弹窗黄框（最后一节）被 last-child 去内边距规则误伤，恢复内边距避免文字贴底 */
.algo-info__sec--note.algo-info__sec:last-child,
.algo-info__sec--note {
  padding: 14px 16px !important;
  margin-bottom: 4px;
}

/* 算法说明弹窗：单栏紧凑化，目标一屏完整显示、无需滚动 */
.modal__card.algo-info { max-height: 96vh; }
.algo-info__body { gap: 12px; padding: 14px 24px 16px; }
.algo-info__sec { padding-bottom: 10px; }
.algo-info__h { margin: 0 0 6px; font-size: 13.5px; }
.algo-info__sec p, .algo-info__ul li { line-height: 1.5; font-size: 12.5px; }
.algo-info__ul { margin: 4px 0 0; }
.algo-info__table td, .algo-info__table th { padding: 4px 10px; font-size: 12.5px; }
.algo-info .modal__header { padding: 12px 24px; }
.algo-info .modal__footer { padding: 8px 24px; }
.algo-info__body { gap: 8px; padding: 12px 22px 14px; }
.algo-info__sec { padding-bottom: 8px; }
.algo-info__sec p, .algo-info__ul li { line-height: 1.45; font-size: 12px; }
.algo-info__table td, .algo-info__table th { padding: 3px 9px; font-size: 12px; }
.algo-info__sec--note { padding: 10px 14px !important; margin-bottom: 0; }
.algo-info .modal__header { padding: 10px 22px; }
.algo-info .modal__footer { padding: 7px 22px; }
.algo-info .modal__title { font-size: 14px; }
/* 未滚到底时底部渐隐提示，避免文字被硬切一半的观感 */
.algo-info .modal__footer { position: relative; }
.algo-info .modal__footer::before {
  content: '';
  position: absolute;
  top: -34px;
  left: 0;
  right: 10px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg-primary, #fff));
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
}
.algo-info__body.has-more + .modal__footer::before { opacity: 1; }
/* 字号恢复正常，保持舒适阅读；放不下时滚动 + 底部渐隐 */
.algo-info__sec p, .algo-info__ul li { font-size: 13px; line-height: 1.6; }
.algo-info__table td, .algo-info__table th { font-size: 12.5px; padding: 5px 10px; }
.algo-info__h { font-size: 14px; margin: 0 0 8px; }
.algo-info__body { gap: 14px; padding: 16px 26px 18px; }
.algo-info__sec { padding-bottom: 12px; }
.algo-info__sec--note { padding: 12px 16px !important; }
.algo-info .modal__title { font-size: 15px; }

/* =========================================================================
   弹窗滚动区未到底时底部渐隐提示（全局，配合 app.js 的 has-more 类）
   ========================================================================= */
.modal__footer, .step-modal__footer { position: relative; }
.modal__body.has-more + .modal__footer::before,
.step-modal__body.has-more + .step-modal__footer::before {
  content: '';
  position: absolute;
  top: -34px;
  left: 0;
  right: 10px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg-primary, #fff));
  pointer-events: none;
}
.restore-dialog { position: relative; }
.restore-dialog__list.has-more::after {
  content: '';
  position: sticky;
  display: block;
  bottom: -8px;
  height: 34px;
  margin-top: -34px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

/* =========================================================================
   用户画像 · Persona Engine
   ========================================================================= */

/* 首页入口菱形（深红） */
.home__persona-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .18s ease-out;
}
.home__persona-diamond {
  width: 50px;
  height: 32px;
  display: block;
  filter: drop-shadow(2px 2px 0 rgba(139, 35, 50, 0.28)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.10));
  transition: filter .18s ease-out, transform .18s ease-out;
}
.home__persona-diamond polygon {
  fill: #8b2332;
  transition: fill .18s ease-out;
}
.home__persona-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s ease-out, transform .22s ease-out, color .18s ease-out;
}
.home__persona-btn:hover .home__persona-diamond {
  transform: translate(-1px, -1px);
  filter: drop-shadow(3px 3px 0 rgba(139, 35, 50, 0.38)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.10));
}
.home__persona-btn:hover .home__persona-diamond polygon { fill: #6d1a26; }
.home__persona-btn:hover .home__persona-label { opacity: 1; transform: translateX(0); color: #8b2332; }

/* ---- 页面 ---- */
.persona {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 40px 80px;
}

/* Hero */
.persona-hero {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 34px 38px;
  background:
    radial-gradient(1200px 320px at 8% -40%, rgba(139, 35, 50, 0.07), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfafa 100%);
  border: 1px solid var(--line-standard);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.persona-hero::after {
  content: 'PERSONA';
  position: absolute;
  right: 18px;
  bottom: -18px;
  font-family: var(--font-mono);
  font-size: 74px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(20, 20, 24, 0.035);
  pointer-events: none;
}
.persona-hero__ring { position: relative; flex: 0 0 auto; }
.persona-hero__ring svg { transform: rotate(-90deg); display: block; }
.persona-ring__bg {
  fill: none;
  stroke: #eee9ea;
  stroke-width: 8;
}
.persona-ring__fg {
  fill: none;
  stroke: #8b2332;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1);
}
.persona-hero__ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: -0.02em;
}
.persona-hero__ring-num em {
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-tertiary);
  margin-left: 2px;
}
.persona-hero__main { flex: 1; min-width: 0; }
.persona-hero__title {
  font-family: var(--font-cn);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink-primary);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.persona-hero__en {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8b2332;
  margin-left: 10px;
  vertical-align: 3px;
}
.persona-hero__sub {
  font-size: 13px;
  color: var(--ink-tertiary);
  margin: 0 0 14px;
}
.persona-hero__stats {
  display: flex;
  gap: 22px;
  font-size: 12.5px;
  color: var(--ink-secondary);
}
.persona-hero__stats strong {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--ink-primary);
  margin-right: 3px;
}
.persona-hero__stats .is-warn strong { color: #b45309; }
.persona-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

/* 按钮 */
.persona-btn {
  appearance: none;
  border: 1px solid var(--line-standard);
  background: #fff;
  color: var(--ink-primary);
  font-family: var(--font-cn);
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .16s ease-out;
  white-space: nowrap;
}
.persona-btn:hover { border-color: #c9bfc1; background: #faf7f7; transform: translateY(-1px); }
.persona-btn--primary {
  background: #8b2332;
  border-color: #8b2332;
  color: #fff;
}
.persona-btn--primary:hover { background: #6d1a26; border-color: #6d1a26; }
.persona-btn--sm { padding: 6px 13px; font-size: 12px; }

/* 冲突区 */
.persona-conflicts { margin-top: 30px; }
.persona-sec__title {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 14px;
}
.persona-sec__hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-tertiary);
  margin-left: 10px;
}
.persona-conflicts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.persona-conflict {
  border: 1px solid #f3e0c0;
  background: linear-gradient(180deg, #fffdf7, #fdf8ec);
  border-radius: 10px;
  padding: 16px 18px;
}
.persona-conflict__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #92400e;
  margin-bottom: 10px;
}
.persona-conflict__pair {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 8px;
}
.persona-conflict__old, .persona-conflict__new {
  flex: 1;
  font-size: 13px;
  color: var(--ink-primary);
  background: #fff;
  border: 1px solid var(--line-standard);
  border-radius: 7px;
  padding: 8px 10px;
}
.persona-conflict__new { border-color: #ecc588; background: #fffaf0; }
.persona-conflict__old span, .persona-conflict__new span {
  display: block;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-tertiary);
  margin-bottom: 3px;
}
.persona-conflict__arrow { align-self: center; color: #b45309; font-family: var(--font-mono); }
.persona-conflict__src {
  font-size: 11px;
  color: var(--ink-tertiary);
  margin-bottom: 10px;
}
.persona-conflict__btns { display: flex; gap: 8px; }

/* 空状态 */
.persona-empty {
  margin-top: 60px;
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--line-standard);
  border-radius: 14px;
}
.persona-empty__mark {
  width: 46px;
  height: 30px;
  margin: 0 auto 18px;
  background: #8b2332;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: .85;
}
.persona-empty__title {
  font-family: var(--font-cn);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-primary);
  margin-bottom: 8px;
}
.persona-empty__hint { font-size: 13px; color: var(--ink-tertiary); }

/* 卡片墙 */
.persona-wall { margin-top: 34px; display: flex; flex-direction: column; gap: 34px; }
.persona-cat__title {
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-primary);
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.persona-cat__en {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.persona-cat__n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8b2332;
  background: rgba(139, 35, 50, 0.07);
  border-radius: 20px;
  padding: 1px 9px;
}
.persona-cat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 13px;
}
.persona-facet {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-standard);
  border-radius: 10px;
  padding: 15px 17px 13px;
  transition: all .18s ease-out;
}
.persona-facet:hover {
  border-color: #d9c6c9;
  box-shadow: 0 8px 22px -12px rgba(60, 20, 28, 0.25);
  transform: translateY(-2px);
}
.persona-facet__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #8b2332;
  margin-bottom: 6px;
}
.persona-facet__value {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-primary);
  margin-bottom: 10px;
  word-break: break-word;
}
.persona-facet__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
}
.persona-facet__conf { color: #8b2332; letter-spacing: 2px; font-size: 8px; }
.persona-facet__time { margin-left: auto; }
.persona-facet__tools {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .16s ease-out;
}
.persona-facet:hover .persona-facet__tools { opacity: 1; }
.persona-facet__tools button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-standard);
  background: #fff;
  border-radius: 6px;
  font-size: 11px;
  color: var(--ink-tertiary);
  cursor: pointer;
  transition: all .14s ease-out;
}
.persona-facet__tools button:hover { color: #8b2332; border-color: #d9c6c9; }

/* 表单 */
.persona-form__row { display: flex; flex-direction: column; gap: 6px; }
.persona-form__row > span {
  font-size: 12px;
  color: var(--ink-secondary);
  font-family: var(--font-cn);
}
.persona-form__row > span em { font-style: normal; font-family: var(--font-mono); color: #8b2332; }
.persona-form__row input[type="text"],
.persona-form__row textarea,
.persona-form__row select {
  border: 1px solid var(--line-standard);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: var(--font-cn);
  color: var(--ink-primary);
  background: #fff;
  resize: vertical;
}
.persona-form__row input:focus,
.persona-form__row textarea:focus,
.persona-form__row select:focus { outline: none; border-color: #8b2332; }
.persona-form__row input[readonly] { background: var(--bg-secondary); color: var(--ink-tertiary); }
.persona-form__row input[type="range"] { accent-color: #8b2332; }

/* 历史 */
.persona-hist__cur {
  font-size: 13.5px;
  color: var(--ink-primary);
  background: #faf7f7;
  border: 1px solid var(--line-standard);
  border-radius: 8px;
  padding: 10px 13px;
}
.persona-hist__cur span {
  display: block;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: #8b2332;
  margin-bottom: 3px;
}
.persona-hist__list { display: flex; flex-direction: column; gap: 10px; }
.persona-hist__row {
  border-left: 2px solid var(--line-standard);
  padding: 2px 0 2px 12px;
}
.persona-hist__row--evidence { border-left-color: #8b2332; }
.persona-hist__row--reject { border-left-color: #d97706; }
.persona-hist__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
}
.persona-hist__text { font-size: 13px; color: var(--ink-primary); margin: 2px 0; }
.persona-hist__text em { font-style: normal; color: var(--ink-tertiary); font-size: 12px; }
.persona-hist__meta { font-size: 10.5px; color: var(--ink-tertiary); font-family: var(--font-mono); }
.persona-hist__empty { font-size: 12.5px; color: var(--ink-tertiary); text-align: center; padding: 16px 0; }

/* AI 接入弹窗 */
.persona-ai__intro { font-size: 13px; line-height: 1.7; color: var(--ink-secondary); }
.persona-ai__block {
  border: 1px solid var(--line-standard);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.persona-ai__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #8b2332;
}
.persona-ai__code {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  background: #faf7f7;
  border-radius: 6px;
  padding: 8px 11px;
  color: var(--ink-primary);
  word-break: break-all;
}
.persona-ai__note { font-size: 12px; color: var(--ink-tertiary); line-height: 1.6; }

@media (max-width: 860px) {
  .persona { padding: 22px 18px 60px; }
  .persona-hero { flex-direction: column; text-align: center; gap: 20px; }
  .persona-hero__stats { justify-content: center; }
  .persona-hero__actions { flex-direction: row; }
}