:root {
  --bg: #f5f6f4;
  --bg-warm: #f7f6f1;
  --panel: #ffffff;
  --panel-soft: #fafaf8;
  --surface-muted: #f2f4f1;
  --surface-cool: #f4f6f7;
  --surface-warm: #faf7ef;
  --text: #202421;
  --muted: #69716c;
  --subtle: #9aa39c;
  --line: #e3e6e1;
  --line-strong: #d1d7cf;
  --blue: #314a63;
  --blue-soft: #eef3f6;
  --green: #5f7567;
  --green-soft: #eef3ef;
  --orange: #a66f2c;
  --orange-soft: #f8efde;
  --red: #bd5b53;
  --red-soft: #fff1ef;
  --accent-deep: #314a63;
  --accent-sage: #6f8476;
  --panel-blue: #eef5fb;
  --panel-green: #eff8f1;
  --panel-rose: #fbf0f1;
  --framework-theme: #eef5fb;
  --framework-theme-rgb: 238, 245, 251;
  --framework-title-color: #202421;
  /* === Knowledge 鑺傜偣瀛愯皟鑹叉澘锛坴1 鏀舵暃鍚?11 涓紝2026-06-09 鍒?3 涓?0 鐢?token锛?===
     瑙勫垯锛氫互鍚庢柊澧炲姞瀛愪富棰橈紝**鏈€澶?4 涓?token**锛坰urface / surface-rgb / 1 涓?contrast銆? 涓?border锛夈€?
     涓嶈缁欐瘡涓?chip / button / card 鍗曠嫭鍐?token銆?*/
  --knowledge-theme: #eff8f1;
  --knowledge-theme-rgb: 239, 248, 241;
  --knowledge-title-color: #202421;
  --knowledge-title-muted: rgba(32, 36, 33, 0.62);
  --knowledge-count-chip-bg: rgb(120, 124, 121);
  --knowledge-count-chip-color: #ffffff;
  --knowledge-count-chip-border: rgba(32, 36, 33, 0.14);
  --knowledge-card-bg: rgb(250, 252, 250);
  --knowledge-card-hover-bg: rgb(246, 250, 247);
  --knowledge-card-border: rgba(122, 136, 145, 0.18);
  --knowledge-button-bg: rgba(49, 56, 63, 0.88);
  --knowledge-button-border: rgba(49, 56, 63, 0.16);
  --knowledge-button-color: #ffffff;
  --task-theme: #fbf0f1;
  --task-theme-rgb: 251, 240, 241;
  --task-title-color: #202421;
  --task-title-muted: rgba(32, 36, 33, 0.62);
  --task-count-chip-bg: rgba(236, 239, 241, 0.92);
  --task-count-chip-color: rgba(82, 91, 86, 0.78);
  --task-count-chip-border: rgba(32, 36, 33, 0.14);
  --task-content-bg: rgb(253, 251, 251);
  --task-card-bg: rgb(255, 253, 253);
  --task-card-hover-bg: rgb(254, 250, 250);
  --task-card-border: rgba(122, 136, 145, 0.18);
  --task-button-bg: rgba(49, 56, 63, 0.88);
  --task-button-border: rgba(49, 56, 63, 0.16);
  --task-button-color: #ffffff;
  --task-button-hover-bg: rgba(32, 36, 33, 0.95);
  --panel-blue-deep: #d9e9f5;
  --panel-green-deep: #d8ecdd;
  --panel-rose-deep: #f1d9dd;
  --panel-overlap: 18px;
  --panel-top-drop: 8px;
  --panel-overlap-safe-gap: 12px;
  --framework-overlap-reserve: calc((var(--panel-overlap) * 2) + var(--panel-overlap-safe-gap));
  --framework-scroll-rail-gap: 6px;
  --shadow: 0 18px 48px rgba(32, 36, 33, 0.1);
  --soft-shadow: 0 8px 22px rgba(32, 36, 33, 0.055);
  --panel-side-shadow: 0 4px 9px rgba(35, 45, 52, 0.13), 0 1px 2px rgba(35, 45, 52, 0.08);
  --panel-center-shadow: 0 8px 16px rgba(35, 45, 52, 0.14), 0 2px 5px rgba(35, 45, 52, 0.08);
  --panel-content-shadow: 0 -5px 10px rgba(35, 45, 52, 0.1);
  --panel-scrollbar-thumb: rgba(92, 105, 99, 0.34);
  --panel-scrollbar-thumb-hover: rgba(72, 84, 79, 0.48);
  --panel-scrollbar-size: 6px;
  --panel-scroll-start-offset: 18px;
  --panel-scroll-end-offset: 18px;
  --shadow-menu: 0 16px 42px rgba(32, 36, 33, 0.12);
  --shadow-hover: 0 8px 18px rgba(32, 36, 33, 0.075);
  --radius-panel: 10px;
  --radius-control: 8px;
  --radius-row: 10px;
  /* P1-1: 鍦嗚鍥涙。浣撶郴锛堟敹鏁?17 绉嶆暎钀藉€硷級 */
  --radius-input: 6px;        /* 鎸夐挳銆佽緭鍏ユ銆佸垪琛ㄨ */
  --radius-card: 10px;        /* 闈㈡澘銆佸崱鐗囥€乼ag 瀹瑰櫒锛堜笌 --radius-panel 涓€鑷达級 */
  --radius-modal: 12px;       /* 寮圭獥 */
  --radius-pill: 999px;       /* chip銆佺姸鎬佸窘绔?*/
  --control-height: 34px;
  --control-height-sm: 24px;
  --toolbar-control-height: 23px;
  --focus-ring: 0 0 0 1.5px rgba(63, 95, 143, 0.32);
  --dialog-width: 520px;
  --field-height: 34px;

  /* === 宸ュ叿鏍忚璁?Token锛坴1锛?=== */
  --toolbar-control-fs: 11px;                              /* 鎺т欢缁熶竴瀛楀彿 */
  --toolbar-control-fw: 650;
  --toolbar-control-padding-x: 9px;
  --toolbar-control-radius: 8px;
  --toolbar-control-gap: 8px;
  --toolbar-bg: rgba(244, 246, 245, 0.92);
  --toolbar-border: 1px solid rgba(122, 136, 145, 0.22);
  --toolbar-color: rgba(32, 36, 33, 0.88);

  /* === Filter dropdown design tokens (P0-1: 抽取共享样式，消除两套重复) === */
  --filter-surface-bg: #ffffff;
  --filter-surface-border: 1px solid rgba(122, 136, 145, 0.18);
  --filter-surface-radius: var(--radius-control);
  --filter-surface-blur: blur(12px);
  --filter-surface-shadow: 0 4px 12px rgba(32, 36, 33, 0.08), 0 1px 3px rgba(32, 36, 33, 0.04);
  --filter-tag-width: 170px;
  --filter-priority-width: 100px;
  --toolbar-bg-hover: rgba(250, 251, 250, 0.98);
  --toolbar-chip-bg: rgba(223, 226, 229, 0.72);  /* chip瀹瑰櫒榛樿娴呯伆鑹?*/
  --toolbar-chip-active: rgba(244, 246, 245, 0.92);  /* chip閫変腑鐘舵€佽儗鏅?*/
  --toolbar-border-hover: rgba(122, 136, 145, 0.32);

  /* === 寮圭獥闂磋窛 token锛?026-06-09 鏀舵暃浼樺寲锛?=== */
  --dialog-padding: 24px;           /* 寮圭獥鍐呰竟璺?*/
  --form-gap: 24px;                 /* 瀛楁涔嬮棿闂磋窛 */
  --form-section-gap: 8px;          /* 鍖哄潡鍐呭皬闂磋窛 */
  --label-to-input: 6px;            /* 鏍囩鍒拌緭鍏ユ */
  --toolbar-inner-gap: 4px;         /* 宸ュ叿鏍忔寜閽棿璺?*/
  --tag-picker-gap: 6px;            /* 鏍囩閫夋嫨鍣ㄩ棿璺?*/
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --workspace-grid-padding-x: var(--space-24);
  --workspace-grid-padding-bottom: 20px;
  --topbar-inline-end: 24px;
  --panel-header-padding-x: 16px;
  --panel-header-padding-y: 8px;
  --panel-toolbar-gap: 8px;
  --panel-toolbar-padding-x: 16px;
  --panel-toolbar-padding-bottom: 8px;
  --panel-content-padding-x: 16px;
  --panel-content-padding-bottom: 16px;
  --card-padding-x: 16px;
  --card-padding-y: 14px;
  --task-list-gap: 6px;
  --modal-header-gap: 16px;
  --modal-heading-gap: 8px;
  --modal-body-padding-x: 24px;
  --modal-body-padding-top: 24px;
  --modal-footer-padding-y: 16px;
  --modal-footer-gap: 12px;
  --form-item-gap: 24px;
  --form-label-gap: 8px;
  --dialog-subtitle-gap-top: 8px;
  --dialog-section-gap: 24px;
  --dialog-section-gap-tight: 16px;
  --manage-panel-gap: 8px;
  --manage-section-padding: 12px;
  --manage-section-gap: 12px;
  --manage-row-gap: 8px;
  --manage-row-padding: 8px;
  --manage-list-gap: 8px;
  --dialog-tab-gap: 4px;
  --dialog-tab-padding: 4px;
  --section-heading-gap: 4px;
  --danger-zone-gap: 12px;
  --danger-zone-padding: 12px;
  --settings-section-gap: 8px;
  --settings-section-padding: 12px;
  --toolbar-color-hover: rgba(32, 36, 33, 0.92);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 1180px;
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Microsoft YaHei", sans-serif;
  position: relative;
  min-height: 100vh;
  /* 2026-06-11 瑙嗚鍗囩骇锛氭瀬閫氶€忕殑娴呭喎鐧藉簳鑹?*/
  isolation: isolate;
  background: #f7f8fa;
}

/* 绗簩灞傦細娓愬彉鍏夋檿 + 鐜荤拑妯＄硦锛堝浐瀹氫笉闅忎富棰樺彉鍖栵級*/
body::before {
  display: none;
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 1200px 700px at 15% 0%, rgba(255, 255, 255, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse 900px 600px at 85% 100%, rgba(232, 240, 248, 0.5) 0%, transparent 55%),
    linear-gradient(135deg, #F0F2F5 0%, #EDEFF2 50%, #EAEDF0 100%);
  pointer-events: none;
}

/* Legacy texture layer disabled; ambient mesh now handles the page background. */
body::after {
  display: none;
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

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

.app-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: var(--space-12);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
  margin-bottom: var(--space-8);
  padding-right: var(--topbar-inline-end);
}

.cloud-save-status {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(78, 84, 90, 0.72);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}

.module-scope-status {
  position: fixed;
  left: calc(var(--space-12) + var(--space-24));
  bottom: 14px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(78, 84, 90, 0.72);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}

.cloud-save-status::before,
.module-scope-status::before {
  content: "[";
  margin-right: 2px;
}

.cloud-save-status::after,
.module-scope-status::after {
  content: "]";
  margin-left: 2px;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 52px;
}

.brand-logo {
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand-kicker {
  margin: 0;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.topbar h1,
.panel h2,
.dialog h3 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 22px;
  font-weight: 720;
  line-height: 1.2;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: nowrap;
  margin-left: auto;
  justify-content: flex-end;
}

.settings-gear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--control-height);
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0;
  border: 1px solid rgba(122, 136, 145, 0.28);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
  color: rgba(78, 84, 90, 0.88);
  cursor: pointer;
}

.settings-gear-button:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(122, 136, 145, 0.4);
}

.settings-gear-button svg {
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 auto;
}

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

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.workspace-switcher {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.topbar-actions > label.workspace-switcher {
  display: none;
}

.workspace-switcher span {
  flex: 0 0 auto;
}

.workspace-switcher select {
  min-width: 136px;
  border: 0;
  padding: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.workspace-menu-button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  column-gap: 4px;
  min-width: 148px;
  max-width: 220px;
  border: 0;
  padding: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.workspace-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: none;
  width: 260px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: var(--shadow-menu);
}

.workspace-menu-button::after {
  content: "";
  position: static;
  justify-self: center;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  color: var(--muted);
  font-size: 0;
  transform: translateY(-2px) rotate(45deg);
}

.workspace-switcher.is-open .workspace-menu {
  display: block;
}

.workspace-menu-list {
  max-height: 240px;
  overflow: auto;
  padding: 6px;
}

.workspace-menu-readonly-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: var(--radius-input);
  background: var(--surface-muted);
  font-size: 11px;
}

.workspace-menu-readonly-banner .readonly-label {
  color: var(--subtle);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-menu-exit-readonly {
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-input);
  padding: 4px 10px;
  background: var(--accent-deep, #1a8754);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.workspace-menu-exit-readonly:hover {
  opacity: 0.85;
}

.workspace-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  border-radius: var(--radius-input);
}

.workspace-menu-item.is-active {
  background: var(--green-soft);
}

.workspace-menu-item.is-active::before {
  content: "";
  position: absolute;
  left: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-deep);
}

.workspace-menu-name {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 8px 36px;
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-menu-name:hover,
.workspace-menu-add:hover {
  background: var(--surface-muted);
}

.workspace-menu-item.is-active .workspace-menu-name:hover {
  background: var(--green-soft);
}

.workspace-menu-rename {
  position: absolute;
  right: 6px;
  top: 50%;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-input);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--subtle);
  line-height: 1;
  transform: translateY(-50%);
}

.workspace-menu-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.workspace-menu-rename:hover {
  background: var(--green-soft);
  color: var(--accent-deep);
}

.workspace-menu-add {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}

.search-popover-anchor {
  position: relative;
  display: flex;
  align-items: center;
}

.search-trigger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  border: 1px solid rgba(122, 136, 145, 0.28);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
  color: rgba(78, 84, 90, 0.88);
  cursor: pointer;
  transition: 0.16s ease;
}

.search-trigger-button:hover,
.search-trigger-button.is-active {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(78, 84, 90, 0.98);
  border-color: rgba(122, 136, 145, 0.4);
}

.search-trigger-button svg {
  width: 17px;
  height: 17px;
  display: block;
}

.search-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 8px;
  width: 280px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 8px 20px rgba(32, 36, 33, 0.08),
    0 2px 8px rgba(32, 36, 33, 0.06);
}

.search-popover[hidden] {
  display: none;
}

.search-popover-field {
  display: grid;
  gap: 5px;
}

.search-popover-field select,
.search-popover-field input {
  width: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 0 10px;
  background: #fff;
  font-size: 12px;
  color: var(--text);
}

.search-popover-field select {
  font-weight: 650;
}

.workspace-grid {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(300px, 350px) minmax(420px, 1fr) minmax(360px, 430px);
  grid-template-rows: minmax(0, 1fr);
  --center-focus-width: calc(150% + (var(--panel-overlap) * 3));
  align-items: stretch;
  gap: 0;
  height: 100%;
  margin-top: -8px;
  min-height: 0;
  padding: 0 var(--workspace-grid-padding-x) var(--workspace-grid-padding-bottom);
  isolation: isolate;
  overflow-x: clip;
}

.panel {
  position: relative;
  min-height: 0;
  border: 1px solid rgba(122, 136, 145, 0.22);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow: var(--panel-side-shadow);
  overflow: hidden;
}

.framework-panel {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin: calc(16px + var(--panel-top-drop)) calc(-1 * var(--panel-overlap)) 10px 0;
  padding-right: var(--framework-overlap-reserve);
  --divider-left: 18px;
  --divider-right: 12px;
  background: var(--framework-theme);
  border-color: rgba(122, 136, 145, 0.18);
  box-shadow: var(--panel-side-shadow);
}

.knowledge-panel {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  z-index: 4;
  margin: var(--panel-top-drop) calc(-1 * var(--panel-overlap)) 0;
  border: 0;
  --divider-left: 18px;
  --divider-right: 18px;
  --knowledge-layer-top: 126px;
  background:
    linear-gradient(180deg, rgba(var(--knowledge-theme-rgb), 0.88) 0, rgba(var(--knowledge-theme-rgb), 0.78) var(--knowledge-layer-top), rgba(255, 255, 255, 0.62) var(--knowledge-layer-top), rgba(255, 255, 255, 0.48) 100%),
    var(--knowledge-theme);
  box-shadow: var(--panel-center-shadow);
}

.knowledge-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--knowledge-layer-top);
  background: linear-gradient(180deg, rgba(var(--knowledge-theme-rgb), 0.92), rgba(var(--knowledge-theme-rgb), 0.52));
  pointer-events: none;
}

.knowledge-panel .panel-header,
.knowledge-panel .workspace-control-row,
.knowledge-panel .content-board,
.knowledge-panel .knowledge-list {
  position: relative;
  z-index: 1;
}

.task-panel {
  grid-column: 3;
  grid-row: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin: calc(16px + var(--panel-top-drop)) 0 10px calc(-1 * var(--panel-overlap));
  padding-left: 0;
  border: 0;
  --divider-left: 12px;
  --divider-right: 18px;
  --task-layer-top: 126px;
  --task-content-inset-left: calc((var(--panel-overlap) * 2) + 18px);
  background:
    linear-gradient(180deg, rgba(var(--task-theme-rgb), 0.88) 0, rgba(var(--task-theme-rgb), 0.78) var(--task-layer-top), rgba(255, 255, 255, 0.62) var(--task-layer-top), rgba(255, 255, 255, 0.48) 100%),
    var(--task-theme);
  box-shadow: var(--panel-side-shadow);
}

.task-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--task-layer-top);
  background: linear-gradient(180deg, rgba(var(--task-theme-rgb), 0.92), rgba(var(--task-theme-rgb), 0.52));
  pointer-events: none;
}

.task-panel .panel-header,
.task-panel .task-control-row,
.task-panel .task-list {
  position: relative;
  z-index: 1;
}

.column-rotate-button {
  --switch-thumb-color: var(--knowledge-theme);
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 106px;
  height: 30px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: none;
  color: rgba(32, 36, 33, 0.58);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  opacity: 1;
  transform: translate(0, -32px);
  transform-origin: center;
  transition: none;
}

.column-rotate-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.column-rotate-track {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 18px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(224, 228, 230, 0.96) 0%, rgba(202, 208, 211, 0.96) 48%, rgba(190, 198, 202, 0.94) 100%),
    #cdd3d6;
  box-shadow:
    inset 0 2px 4px rgba(35, 45, 52, 0.2),
    inset 0 -1px 2px rgba(255, 255, 255, 0.38),
    inset 0 0 0 1px rgba(35, 45, 52, 0.11),
    0 1px 2px rgba(255, 255, 255, 0.72);
  transition: none;
}

.column-rotate-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--switch-thumb-color);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(35, 45, 52, 0.22);
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.column-rotate-button:hover,
.column-rotate-button:focus-visible,
.column-rotate-button.is-peeking {
  box-shadow: none;
  transform: translate(0, -32px);
}

.workspace-grid.is-panel-swapping .knowledge-panel,
.workspace-grid.is-panel-swapping .task-panel {
  will-change: transform;
}

.workspace-grid.is-panel-swapping .column-rotate-button {
  pointer-events: none;
  transform: translate(0, -32px);
}

.workspace-grid.is-center-expanded:not(.is-task-center) .knowledge-panel,
.workspace-grid.is-center-expanded.is-task-center .task-panel {
  width: var(--center-focus-width);
  max-width: none;
  z-index: 4;
  box-shadow: 0 18px 36px rgba(35, 45, 52, 0.18), var(--panel-center-shadow);
}

.workspace-grid.is-task-center .column-rotate-button {
  --switch-thumb-color: var(--task-theme);
}

.workspace-grid.is-task-center .column-rotate-thumb {
  transform: translateX(16px);
}

.workspace-grid.is-task-center .task-panel {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  z-index: 4;
  margin: var(--panel-top-drop) calc(-1 * var(--panel-overlap)) 0;
  padding-left: 0;
  border: 0;
  --divider-left: 18px;
  --divider-right: 18px;
  --task-content-inset-left: 18px;
  box-shadow: var(--panel-center-shadow);
}

.workspace-grid.is-task-center .task-panel .panel-header {
  padding-left: var(--task-content-inset-left);
  padding-right: 18px;
}

.workspace-grid.is-task-center .task-panel .task-list {
  flex: 1 1 auto;
  max-height: none;
}

.workspace-grid.is-task-center .knowledge-panel {
  grid-column: 3;
  z-index: 2;
  margin: calc(16px + var(--panel-top-drop)) 0 10px calc(-1 * var(--panel-overlap));
  padding-left: 0;
  border: 0;
  --right-slot-content-inset-left: calc((var(--panel-overlap) * 2) + 18px);
  --divider-left: 12px;
  --divider-right: 18px;
  box-shadow: var(--panel-side-shadow);
}

.workspace-grid.is-task-center .knowledge-panel .panel-header {
  padding-left: var(--right-slot-content-inset-left);
  padding-right: 18px;
}

.workspace-grid.is-task-center .knowledge-panel .workspace-control-row,
.workspace-grid.is-task-center .knowledge-panel .knowledge-list {
  padding-left: var(--right-slot-content-inset-left);
}

.workspace-grid.is-task-center .knowledge-panel .content-board-scroll {
  padding-left: var(--right-slot-content-inset-left);
}

.panel-header {
  position: relative;
  display: flex;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 44px;
  padding: var(--panel-header-padding-y) var(--panel-header-padding-x);
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(6px);
}

.panel-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 680;
  line-height: 1.25;
}

.framework-panel .panel-header {
  position: relative;
  z-index: 2;
  padding-left: var(--panel-header-padding-x);
  background: transparent;
  backdrop-filter: none;
}

.framework-panel .panel-header h2 {
  color: var(--framework-title-color);
}

.knowledge-panel .panel-header {
  padding-left: var(--panel-content-padding-x);
  padding-right: var(--panel-content-padding-x);
  background: transparent;
  backdrop-filter: none;
}

.knowledge-panel .panel-header h2 {
  color: var(--knowledge-title-color);
}

.task-panel .panel-header {
  padding-left: var(--task-content-inset-left);
  padding-right: var(--panel-header-padding-x);
  padding-bottom: var(--space-8);
  background: transparent;
  backdrop-filter: none;
}

.task-panel .panel-header h2 {
  color: var(--task-title-color);
}

.panel-title-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.panel-icon-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.panel-icon-actions .icon-button,
.panel-title-actions .icon-button {
  width: 19px;
  height: 19px;
  min-height: 19px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(229, 231, 235, 0.82);
  color: rgba(107, 114, 128, 0.96);
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.panel-icon-actions .icon-button:hover,
.panel-title-actions .icon-button:hover {
  background: rgba(209, 213, 219, 0.92);
}

/* === 中间栏、右边栏按钮：白色背景 + 高级质感 === */
/* 复合阴影：一层模拟物理厚度，一层模拟悬浮弥散 */
.knowledge-panel .panel-icon-actions .icon-button,
.knowledge-panel .panel-title-actions .icon-button,
.task-panel .panel-icon-actions .icon-button,
.task-panel .panel-title-actions .icon-button {
  background: #FFFFFF;
  color: rgba(107, 114, 128, 0.96);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.04),   /* 物理厚度层 */
    0 8px 16px rgba(0, 0, 0, 0.08);  /* 悬浮弥散层 */
}

.knowledge-panel .panel-icon-actions .icon-button:hover,
.knowledge-panel .panel-title-actions .icon-button:hover,
.task-panel .panel-icon-actions .icon-button:hover,
.task-panel .panel-title-actions .icon-button:hover {
  background: #FFFFFF;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 中间栏：绿色主题图标 */
.knowledge-panel .panel-icon-actions .icon-button.is-primary,
.knowledge-panel .panel-title-actions .icon-button.is-primary {
  background: #FFFFFF;
  color: var(--knowledge-theme);
  font-weight: 600;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.08);
}

.knowledge-panel .panel-icon-actions .icon-button.is-primary:hover,
.knowledge-panel .panel-title-actions .icon-button.is-primary:hover {
  background: #FFFFFF;
  color: var(--knowledge-theme);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 右边栏：橙褐色主题图标 */
.task-panel .panel-icon-actions .icon-button.is-primary,
.task-panel .panel-title-actions .icon-button.is-primary {
  background: #FFFFFF;
  color: var(--task-theme);
  font-weight: 600;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.08);
}

.task-panel .panel-icon-actions .icon-button.is-primary:hover,
.task-panel .panel-title-actions .icon-button.is-primary:hover {
  background: #FFFFFF;
  color: var(--task-theme);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 左栏保持原有蓝色主题 */
.panel-icon-actions .icon-button.is-primary,
.panel-title-actions .icon-button.is-primary {
  background: #3B82F6;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}

.panel-icon-actions .icon-button.is-primary:hover,
.panel-title-actions .icon-button.is-primary:hover {
  background: #2563EB;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
  transform: translateY(-1px);
}

.panel-icon-actions .icon-button.is-active,
.panel-title-actions .icon-button.is-active {
  background: #3B82F6;
  color: #FFFFFF;
}

.panel-icon-actions .icon-button.is-active:hover,
.panel-title-actions .icon-button.is-active:hover {
  background: #2563EB;
}

.panel-icon-actions .icon-button .material-symbols-outlined,
.panel-title-actions .icon-button .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

.panel-icon-actions .icon-button:focus-visible,
.panel-title-actions .icon-button:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

.task-panel .summary-chip {
  border: 1px solid var(--task-count-chip-border);
  background: var(--task-count-chip-bg);
  color: var(--task-count-chip-color);
}

.primary-button,
.ghost-button,
.icon-button {
  border: 0;
  cursor: pointer;
  transition: 0.16s ease;
}

.primary-button {
  min-height: var(--toolbar-control-height);
  height: var(--toolbar-control-height);
  padding: 0 10px;
  border-radius: var(--radius-control);
  background: var(--accent-deep);
  color: #fff;
  font-size: var(--toolbar-control-fs);
  font-weight: var(--toolbar-control-fw);
  box-shadow: 0 6px 14px rgba(49, 74, 99, 0.16);
}

.primary-button:hover {
  background: #263d55;
  box-shadow: none;
}

.ghost-button {
  min-height: var(--toolbar-control-height);
  height: var(--toolbar-control-height);
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: var(--toolbar-control-fs);
}

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

button:disabled,
select:disabled,
input:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.form-field {
  display: grid;
  gap: var(--form-section-gap, 8px);
}

.field-label {
  margin-top: 8px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.rich-text-toolbar {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: 28px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: rgba(248, 250, 251, 0.92);
  gap: var(--toolbar-inner-gap);
  overflow: visible;
}

.rich-text-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border: 0;
  border-radius: 4px;
  background: rgba(240, 242, 244, 0.6);
  color: rgba(32, 36, 33, 0.75);
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rich-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.rich-icon-italic {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-style: italic;
  font-weight: 700;
  transform: skew(-8deg);
}

.rich-icon-underline {
  align-items: flex-start;
  font-size: 14px;
  font-weight: 700;
}

.rich-icon-underline::after {
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.rich-icon-ordered,
.rich-icon-bullets {
  align-items: stretch;
  justify-content: flex-start;
  width: 18px;
  height: 16px;
  flex-direction: column;
  gap: 2px;
}

.rich-icon-ordered span,
.rich-icon-bullets span {
  position: relative;
  display: block;
  height: 4px;
}

.rich-icon-ordered span {
  padding-left: 7px;
  font-size: 6px;
  font-weight: 800;
  line-height: 4px;
}

.rich-icon-ordered span::after,
.rich-icon-bullets span::after {
  position: absolute;
  top: 1px;
  right: 0;
  left: 8px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.rich-icon-bullets span::before {
  position: absolute;
  top: 0;
  left: 1px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.rich-text-toolbar button:hover,
.rich-text-toolbar button:focus-visible {
  background: rgba(232, 235, 237, 0.95);
  color: rgba(32, 36, 33, 0.92);
  outline: 0;
  transform: translateY(-1px);
}

.rich-text-toolbar button:active {
  background: rgba(220, 224, 227, 1);
  transform: translateY(0);
}

/* === Material Symbols 宸ュ叿鏍忓浘鏍囷紙2026-06-10锛?=== */
.rich-text-toolbar .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
  color: inherit;
}

.rich-text-toolbar .toolbar-divider {
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: rgba(122, 136, 145, 0.28);
}

.rich-text-toolbar .color-picker-wrap {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border-radius: 4px;
  background: rgba(240, 242, 244, 0.6);
  color: rgba(32, 36, 33, 0.75);
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: visible;
}

.rich-text-toolbar .color-picker-wrap .color-trigger {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.rich-text-toolbar .color-picker-wrap:hover {
  background: rgba(232, 235, 237, 0.95);
  color: rgba(32, 36, 33, 0.92);
  transform: translateY(-1px);
}

.rich-text-toolbar .color-palette {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 3000;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(32, 36, 33, 0.14);
  min-width: 132px;
}

.rich-text-toolbar .color-palette[hidden] {
  display: none;
}

.rich-text-toolbar .color-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(122, 136, 145, 0.32);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  background-clip: padding-box;
  transition: transform 0.1s ease;
}

.rich-text-toolbar .color-swatch:hover {
  transform: scale(1.12);
  border-color: rgba(32, 36, 33, 0.4);
}

.rich-text-toolbar .color-swatch-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f4f6f7 !important;
  border: 1px solid rgba(122, 136, 145, 0.32);
}

.rich-text-toolbar .color-swatch-custom .material-symbols-outlined {
  font-size: 14px;
  color: rgba(32, 36, 33, 0.6);
}

.rich-text-toolbar .color-swatch-custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

.rich-text-editor {
  min-height: 96px;
  max-height: 240px;
  overflow: auto;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}

.rich-text-editor:focus-visible {
  border-color: rgba(63, 95, 143, 0.6);
  box-shadow: var(--focus-ring);
  outline: 0;
}

.rich-text-editor:empty::before {
  font-weight: 400;
  font-size: 12px;
  color: rgba(32, 36, 33, 0.35);
  content: attr(data-placeholder);
  pointer-events: none;
}

.rich-text-editor p,
.rich-text-content p {
  margin: 0 0 4px;
}

.rich-text-editor p:last-child,
.rich-text-content p:last-child {
  margin-bottom: 0;
}

.rich-text-editor blockquote,
.rich-text-content blockquote {
  margin: 8px 0;
  padding: 6px 12px;
  border-left: 3px solid var(--line-strong);
  background: rgba(244, 246, 247, 0.6);
  color: var(--muted);
  font-style: italic;
  border-radius: 0 4px 4px 0;
}

.rich-text-editor ul,
.rich-text-editor ol,
.rich-text-content ul,
.rich-text-content ol {
  margin: 4px 0 2px;
  padding-left: 22px;
  list-style-position: outside;
}

.rich-text-editor li,
.rich-text-content li {
  margin: 2px 0;
  padding-left: 2px;
}

.rich-text-editor li p,
.rich-text-content li p {
  margin: 0;
}

.panel-title-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.task-title-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.task-title-actions .primary-button {
  min-width: 68px;
}

.summary-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 6px;
  border-radius: var(--radius-pill);
  background: rgba(236, 239, 241, 0.92);
  color: rgba(82, 91, 86, 0.78);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.summary-chip strong {
  color: inherit;
  font-size: 11px;
  line-height: 1;
}

.filter-row {
  position: relative;
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 0;
}

.filter-row::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.compact-filter-row {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 0;
  border-bottom: 0;
}

.compact-filter-row::after {
  display: none;
}

/* 鍙虫爮宸ュ叿鏍忕壒鍖栵細浠呭啓鐙湁閮ㄥ垎锛坓ap 8 / padding 3 10 8 / 閫忔槑鑳屾櫙锛?*/
.task-control-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--panel-toolbar-gap);
  min-height: 28px;
  padding: var(--space-4) var(--panel-toolbar-padding-x) 12px;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
  font-size: 11px;
  flex-wrap: nowrap;
}

.task-control-row::after {
  content: none;
  position: absolute;
  right: var(--divider-right, 8px);
  left: var(--divider-left, 8px);
  height: 1px;
  background: rgba(122, 136, 145, 0.18);
  pointer-events: none;
}

.task-control-row::after {
  bottom: 0;
}

.task-panel .task-control-row {
  padding-left: var(--task-content-inset-left);
  padding-right: var(--panel-toolbar-padding-x);
  z-index: 40;
  overflow: visible;
}

.task-control-row .compact-filter-row {
  justify-content: flex-start;
  min-width: 0;
}

.task-priority-filter {
  position: relative;
  flex: 0 0 var(--filter-priority-width);
  width: var(--filter-priority-width);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  color: var(--muted);
  z-index: 50;
}

/* (合并到上方 .tag-filter-trigger 共享 base —— P0-1 消除重复) */

.task-priority-filter__trigger::before {
  content: "";
  width: 12px;
}

.toolbar-control.is-select-multi.is-empty .tag-filter-trigger,
.task-priority-filter.is-empty .task-priority-filter__trigger {
  color: rgba(32, 36, 33, 0.66);
}

.task-priority-filter__trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.tag-filter-trigger:hover,
.tag-filter-trigger:focus-visible,
[aria-expanded="true"].tag-filter-trigger,
.task-priority-filter__trigger:hover,
.task-priority-filter__trigger:focus-visible,
.task-priority-filter.is-open .task-priority-filter__trigger {
  border-color: rgba(122, 136, 145, 0.26);
  background: var(--filter-surface-bg);
  outline: 0;
}

/* (合并到上方 .tag-filter-popover 共享 base —— P0-1 消除重复) */

.task-priority-filter__popover[hidden] {
  display: none;
}

.task-priority-filter__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
}

.task-priority-filter__item {
  display: block;
}

/* Priority-specific color dots */
.task-priority-filter__option::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c0c5c0;
  flex-shrink: 0;
}

.task-priority-filter__option[data-task-priority-option="urgent"]::before {
  background: #bd5b53;
}

.task-priority-filter__option[data-task-priority-option="high"]::before {
  background: #a66f2c;
}

.task-priority-filter__option[data-task-priority-option="medium"]::before {
  background: #5f7567;
}

.task-priority-filter__option[data-task-priority-option="low"]::before {
  background: #c0c5c0;
}

.task-priority-filter__popover > .tag-filter-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 6px 8px;
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(122, 136, 145, 0.18);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.task-priority-filter__popover > .tag-filter-clear:hover {
  background: rgba(49, 74, 99, 0.06);
  color: var(--accent-deep);
}

/* === filter-chip-count 浠嶆槸璁℃暟寰芥爣鐨勮浇浣擄紙琚?renderStatusFilterCounts 杩藉姞锛?=== */
.filter-chip-count {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
  padding: 0;
  margin: 0;
  background: transparent;
}

.task-list,
.knowledge-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  padding: var(--space-8) var(--panel-content-padding-x) var(--panel-content-padding-bottom);
  overflow: auto;
}

.task-panel .task-list {
  position: relative;
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--task-content-bg);
  box-shadow: var(--panel-content-shadow);
  overflow: hidden;
}

.panel-scroll-content {
  display: flex;
  position: absolute;
  top: var(--panel-scroll-start-offset);
  right: 0;
  bottom: var(--panel-scroll-end-offset);
  left: 0;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-scrollbar-thumb) transparent;
}

.content-board-scroll {
  gap: 8px;
  padding: 0 calc(var(--panel-content-padding-x) - var(--panel-scrollbar-size)) 0 var(--panel-content-padding-x);
}

.content-board-count-float {
  position: absolute;
  top: 6px;
  right: calc(var(--panel-content-padding-x) - var(--panel-scrollbar-size));
  z-index: 2;
  pointer-events: none;
}

.content-board-count-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid rgba(93, 117, 126, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.24);
  color: rgba(68, 88, 95, 0.88);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  backdrop-filter: blur(2px);
}

.content-board-count-chip strong {
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.task-list-scroll {
  gap: var(--task-list-gap);
  padding: 0 calc(var(--panel-content-padding-x) - var(--panel-scrollbar-size)) 0 var(--task-content-inset-left);
}

.panel-scroll-content::-webkit-scrollbar {
  width: var(--panel-scrollbar-size);
  height: var(--panel-scrollbar-size);
}

.panel-scroll-content::-webkit-scrollbar-track {
  margin-block: 0 10px;
  background: transparent;
}

.panel-scroll-content::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--panel-scrollbar-thumb);
  background-clip: padding-box;
}

.panel-scroll-content::-webkit-scrollbar-thumb:hover {
  background: var(--panel-scrollbar-thumb-hover);
  background-clip: padding-box;
}

.panel-scroll-content::-webkit-scrollbar-button,
.panel-scroll-content::-webkit-scrollbar-corner {
  display: none;
}

.is-hidden {
  display: none !important;
}

.inline-create {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 7px 10px;
  border-bottom: 0;
  background: rgba(250, 250, 248, 0.72);
}

.inline-create::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.module-create {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.module-create select,
.module-create .inline-submit {
  grid-column: span 1;
}

.column-create {
  grid-template-columns: minmax(0, 1fr) 76px;
}

.copy-columns {
  grid-template-columns: minmax(0, 1fr) 76px;
}

.card-create {
  grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 0.9fr) 76px;
}

.card-create textarea {
  grid-column: 1 / span 3;
  min-height: 42px;
  padding: 6px 7px;
  font-size: 12px;
}

.card-create input[name="url"] {
  grid-column: 1 / span 3;
}

.task-create {
  grid-template-columns: minmax(0, 1fr) 92px 70px 52px;
}

.inline-create input,
.inline-create select,
.inline-create textarea {
  min-width: 0;
  padding: 5px 7px;
  font-size: 12px;
}

.inline-create input,
.inline-create select {
  height: 30px;
}

.inline-submit,
.inline-delete {
  border: 0;
  cursor: pointer;
  transition: 0.16s ease;
}

.inline-submit {
  height: var(--control-height-sm);
  border-radius: var(--radius-control);
  background: var(--accent-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}

.inline-submit:hover {
  background: #263d55;
}

.inline-delete {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-input);
  background: var(--surface-cool);
  color: var(--subtle);
  font-size: 13px;
}

.inline-delete:hover {
  background: var(--red-soft);
  color: var(--red);
}

.task-card,
.knowledge-card {
  padding: var(--card-padding-y) var(--card-padding-x);
  border: 1px solid rgba(122, 136, 145, 0.18);
  border-radius: var(--radius-row);
  background: rgba(255, 255, 255, 0.9);
  /* === 2026-06-10 3D 娴捣鏁堟灉锛堜笌妗嗘灦鍗＄墖淇濇寔涓€鑷达級=== */
  transition:
    transform 0.14s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.14s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.16s ease,
    background-color 0.16s ease;
}

.task-card {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--card-padding-y) var(--card-padding-x);
  border-color: var(--task-card-border);
  background: var(--task-card-bg);
  box-shadow: 0 1px 2px rgba(35, 45, 52, 0.045);
  overflow: visible;
  cursor: pointer;
}

.task-card.status-done {
  background: var(--task-card-bg);
}

/* === 2026-06-10 娴捣锛歨over 鏃朵笂绉?+ 绔嬩綋闃村奖 === */
.task-card:hover:not(:active),
.knowledge-card:hover:not(:active) {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(32, 36, 33, 0.04),
    0 6px 14px rgba(32, 36, 33, 0.085),
    0 14px 28px rgba(32, 36, 33, 0.04);
  z-index: 1;
}

.task-card:hover {
  background: var(--task-card-hover-bg);
  transform: translateY(-1px);
}

.task-card:hover,
.task-card:focus-within {
  z-index: 12;
  overflow: visible;
}

.task-card .item-actions {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 14;
  cursor: default;
}

.task-row {
  cursor: pointer;
}

.task-title-row,
.knowledge-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.task-card .task-title-row {
  display: block;
  padding-right: 128px;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.task-title-row h3,
.knowledge-title-row h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}

.task-title-row h3 {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-link {
  color: var(--blue);
  text-decoration: none;
}

.source-link:hover {
  text-decoration: underline;
}

/* 涓爮宸ュ叿鏍忕壒鍖栵細浠呭啓鐙湁閮ㄥ垎锛坓ap 6 / padding 1.8 18 8锛?*/
.workspace-control-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--panel-toolbar-gap);
  min-height: 28px;
  padding: var(--space-4) var(--panel-toolbar-padding-x) 12px;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
  font-size: 12px;
  flex-wrap: nowrap;
}

.knowledge-panel .workspace-control-row {
  justify-content: space-between;
  background: transparent;
  box-shadow: none;
  z-index: 5;  /* 楂樹簬 .content-board锛坺-index:1锛夛紝璁?popover 涓嶈绗簩灞傝儗鏅伄浣?*/
}

.node-path-inline {
  flex: 1 1 auto;
  min-width: 0;
  max-width: clamp(190px, 48%, 360px);
  overflow: hidden;
  color: var(--knowledge-title-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: var(--toolbar-control-height);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-actionbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  padding: 0;
}

.compact-field {
  gap: 0;
  width: var(--filter-tag-width);
  min-width: var(--filter-tag-width);
  flex-shrink: 0;
}

.compact-field:has(#cardTagFilter) {
  width: var(--filter-tag-width);
  min-width: var(--filter-tag-width);
}

.compact-field select {
  height: var(--toolbar-control-height);
  min-height: var(--toolbar-control-height);
  padding: 0 7px;
}

.tag-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px;
  gap: 6px;
}

.tag-create input {
  height: var(--control-height-sm);
  padding: 4px 7px;
  font-size: 12px;
}

.content-board {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--knowledge-content-bg);
  box-shadow: var(--panel-content-shadow);
  transform: none;
  overflow: hidden;
}

.content-column {
  --divider-left: 0;
  --divider-right: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.framework-content-group {
  margin-left: calc(var(--group-indent-level, 0) * 14px);
}

.framework-content-group.is-child-group {
  margin-top: 2px;
}

.framework-group-header h3 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-column-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 7px;
  border-bottom: 0;
  background: transparent;
}

.content-column-header::after {
  content: "";
  position: absolute;
  right: auto;
  bottom: 0;
  left: var(--divider-left, 7px);
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, rgba(105, 126, 139, 0.18) 0%, rgba(105, 126, 139, 0.18) 60%, rgba(105, 126, 139, 0.07) 82%, transparent 100%);
  transform: scaleY(0.6);
  transform-origin: left center;
  pointer-events: none;
}

.content-column-header h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}

.content-column-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 0;
}

.content-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: 200px;
  padding: var(--card-padding-y) var(--card-padding-x);
  border: 1px solid var(--knowledge-card-border);
  border-radius: var(--radius-row);
  background: var(--knowledge-card-bg);
  box-shadow: 0 2px 5px rgba(35, 45, 52, 0.055);
  overflow: visible;
  cursor: pointer;
  /* === 2026-06-10 3D 娴捣鏁堟灉锛堜笌妗嗘灦/浠诲姟鍗＄墖缁熶竴锛?== */
  transition:
    transform 0.14s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.14s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.16s ease,
    background-color 0.16s ease;
}

.content-card:hover {
  border-color: var(--line-strong);
  background: var(--knowledge-card-hover-bg);
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(32, 36, 33, 0.04),
    0 6px 14px rgba(32, 36, 33, 0.085),
    0 14px 28px rgba(32, 36, 33, 0.04);
}

.content-card:hover,
.content-card:focus-within {
  z-index: 12;
  overflow: visible;
}

.content-card.is-dragging,
.module-row.is-dragging {
  opacity: 0.55;
}

.content-card.is-drag-over,
.module-row.is-drag-over {
  border-color: rgba(63, 95, 143, 0.6);
  box-shadow: inset 0 0 0 1px rgba(63, 95, 143, 0.16);
}

.content-column-body.is-drop-zone {
  border-radius: var(--radius-row);
  background: rgba(238, 243, 246, 0.72);
  box-shadow: inset 0 0 0 1px rgba(63, 95, 143, 0.18);
}

.content-card.is-drop-before::before,
.content-card.is-drop-after::after,
.module-row.is-drop-before::before,
.module-row.is-drop-after::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  z-index: 3;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(63, 95, 143, 0.12), 0 4px 12px rgba(63, 95, 143, 0.28);
  pointer-events: none;
}

.content-card.is-drop-before::before,
.module-row.is-drop-before::before {
  top: -6px;
}

.content-card.is-drop-after::after,
.module-row.is-drop-after::after {
  bottom: -6px;
}

.content-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 20px;
}

.content-card.is-title-empty .content-card-header {
  min-height: 0;
}

.content-card h4 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-actions {
  position: relative;
  flex: 0 0 auto;
  gap: 4px;
}

.content-card.is-title-empty .card-actions {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
}

.gear-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-height: 24px;
  border: 0;
  border-radius: var(--radius-input);
  padding: 0;
  background: transparent;
  color: var(--subtle);
  cursor: pointer;
  line-height: 1;
}

.gear-button:hover {
  background: var(--green-soft);
  color: var(--accent-deep);
}

.card-actions .gear-button,
.content-column-header [data-delete-column],
.task-title-row .task-gear-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-height: 20px;
  border: 0;
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--subtle);
  padding: 0;
  font-size: 0;
  line-height: 1;
}

.card-actions .gear-button:hover,
.task-title-row .task-gear-button:hover {
  background: var(--green-soft);
  color: var(--accent-deep);
}

.content-column-header [data-delete-column]:hover {
  background: var(--red-soft);
  color: var(--red);
}

.card-actions .workspace-menu-icon,
.task-title-row .task-gear-button .workspace-menu-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.card-actions .card-expand-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-height: 20px;
  border: 0;
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--subtle);
  padding: 0;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.card-actions .card-expand-button:hover,
.card-actions .card-expand-button:focus-visible {
  background: var(--green-soft);
  color: var(--accent-deep);
}

.card-actions .card-expand-button.is-expanded {
  color: var(--accent-deep);
}

.card-actions .card-expand-button .card-expand-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.content-column-header [data-delete-column]::before,
.content-column-header [data-delete-column]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.8px;
  border-radius: var(--radius-pill);
  background: currentColor;
  content: "";
  transform-origin: center;
}

.content-column-header [data-delete-column]::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.content-column-header [data-delete-column]::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.item-action-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 80;
  display: grid;
  width: 64px;
  padding: 4px;
  border: 1px solid rgba(207, 216, 221, 0.88);
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 24px rgba(25, 35, 45, 0.12), 0 2px 6px rgba(25, 35, 45, 0.08);
  opacity: 0;
  transform: translateY(-3px);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.item-actions.is-menu-above .item-action-menu {
  top: auto;
  bottom: calc(100% + 5px);
  transform: translateY(3px);
  transform-origin: bottom right;
}

.item-action-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.item-action-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 24px;
  border: 0;
  border-radius: var(--radius-input);
  background: transparent;
  color: #50605c;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 560;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}

.item-action-menu-item:hover,
.item-action-menu-item:focus-visible {
  background: rgba(18, 99, 82, 0.08);
  color: #126352;
  outline: 0;
}

.item-action-menu-item.is-danger:hover,
.item-action-menu-item.is-danger:focus-visible {
  background: rgba(199, 93, 93, 0.1);
  color: #b54848;
}

.content-card p,
.content-card-preview {
  margin: 6px 0 0;
  overflow: hidden;
  color: #404040;
  font-size: 12px;
  line-height: 1.6;
  max-height: calc((12px * 1.6 * 6) + 3px);
}

.content-card.is-title-empty .content-card-preview {
  margin-top: 0;
  padding-right: 24px;
  max-height: calc(12px * 1.6 * 8);
}

.content-card.is-card-expanded {
  max-height: none;
  z-index: 15;
  border-color: var(--line-strong);
  box-shadow:
    0 1px 2px rgba(32, 36, 33, 0.05),
    0 6px 18px rgba(32, 36, 33, 0.12),
    0 14px 32px rgba(32, 36, 33, 0.06);
}

.content-card.is-card-expanded .content-card-preview {
  overflow: visible;
  max-height: none;
}

.content-card .tag-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  height: 28px;
  margin: 8px calc(-1 * var(--card-padding-x)) calc(-1 * var(--card-padding-y));
  padding: 0 var(--card-padding-x);
  background: rgba(240, 242, 240, 0.8);
  border-radius: 0 0 var(--radius-row) var(--radius-row);
  overflow: hidden;
}

.content-card .tag {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100px;
  overflow: hidden;
  padding: 3px 8px 3px;
  font-size: 10px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-order {
  display: flex;
  gap: 4px;
}

.order-button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.94);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.order-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.opinion-bullet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  align-items: start;
}

.opinion-bullet::before {
  width: 7px;
  height: 7px;
  margin-top: 6.5px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

.task-card p,
.knowledge-card p {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.task-card .task-description {
  margin: 2px 0 5px 1px;
  padding-right: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.28;
  max-height: calc((11px * 1.28 * 2) + 5px);
  overflow: hidden;
}

.task-card .task-description p,
.task-card .task-description blockquote,
.task-card .task-description ul,
.task-card .task-description ol {
  margin-top: 0;
  margin-bottom: 0;
}

.task-card .task-description ul,
.task-card .task-description ol {
  padding-left: 18px;
}

.task-card .task-description li {
  margin: 0;
  padding-left: 1px;
}

.status-select {
  width: 68px;
  height: 22px;
  min-height: 22px;
  margin-right: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.94);
  padding: 1px 5px;
  color: var(--text);
  font-size: 9.5px;
  line-height: 1;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
}

.task-meta-row {
  flex-wrap: nowrap;
  gap: 3px;
  margin-top: 1px;
  min-width: 0;
  overflow: hidden;
}

/* 任务关联框架 hover 浮窗：解除 .task-meta-row 的 overflow:hidden 截断
 *（popover 在 .task-node-more-tag 之上需要溢出显示）*/
.task-meta-row:has(.task-node-more-tag:hover),
.task-meta-row:has(.task-node-more-tag:focus),
.task-meta-row:has(.task-node-more-tag:focus-visible) {
  overflow: visible;
}

.task-meta-row .tag {
  font-size: 9.5px;
}

.task-meta-row .tag.task-node-tag {
  flex: 0 1 auto;
  max-width: 150px;
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-meta-row .task-node-tag.is-first-node-tag {
  margin-left: auto;
}

.tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.content-tag,
.tag-preview {
  background: var(--tag-bg, var(--surface-muted));
  color: var(--tag-color, var(--muted));
}

.content-card .content-tag,
.card-detail-meta .content-tag {
  border: 1px solid color-mix(in srgb, var(--tag-bg, var(--surface-muted)) 78%, #c7cdd4 22%);
  background: color-mix(in srgb, var(--tag-bg, var(--surface-muted)) 90%, #ffffff 10%);
  color: var(--tag-color, var(--muted));
}

.task-meta-row .tag {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 110px;
  overflow: hidden;
  padding: 2px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

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

.framework-panel {
  position: relative;
}

/* 宸︽爮宸ュ叿鏍忕壒鍖栵細浠呭啓鐙湁閮ㄥ垎锛坓ap 6 / padding 6 12 8 / 娴呰壊鑳屾櫙 / 搴曞垎鍓茬嚎锛?*/
.framework-panel::after,
.framework-panel::before {
  content: "";
  position: absolute;
  right: calc((var(--panel-overlap) * 2) + var(--framework-scroll-rail-gap));
  z-index: 5;
  width: var(--panel-scrollbar-size);
  border-radius: var(--radius-pill);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease, background 0.14s ease;
}

.framework-panel::after {
  top: var(--framework-scroll-track-top, 0);
  height: var(--framework-scroll-track-height, 0);
  background: transparent;
}

.framework-panel::before {
  top: var(--framework-scroll-thumb-top, 0);
  height: var(--framework-scroll-thumb-height, 0);
  background: var(--panel-scrollbar-thumb);
}

.framework-panel.has-framework-scrollbar::after,
.framework-panel.has-framework-scrollbar::before {
  opacity: 1;
}

.framework-panel.has-framework-scrollbar:hover::before {
  background: var(--panel-scrollbar-thumb-hover);
}

.framework-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--panel-toolbar-gap);
  min-height: 28px;
  padding: var(--space-8) var(--panel-toolbar-padding-x) var(--panel-toolbar-padding-bottom);
  border-top: 0;
  border-bottom: 0;
  background: rgba(var(--framework-theme-rgb), 0.28);
  color: var(--muted);
  font-size: 12px;
  flex-wrap: nowrap;
}

.framework-toolbar::after {
  content: "";
  position: absolute;
  right: var(--divider-right, 8px);
  left: var(--divider-left, 8px);
  height: 1px;
  background: rgba(122, 136, 145, 0.18);
  pointer-events: none;
}

.framework-toolbar::after {
  bottom: 0;
}

.framework-panel .framework-toolbar {
  padding-left: var(--panel-toolbar-padding-x);
}

.framework-view-actions {
  justify-content: flex-start;
}

#selectedNodeHint {
  display: none;
}

.framework-stage {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  margin-right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  background: transparent;
}

.framework-map {
  padding: var(--space-8) var(--panel-content-padding-x) var(--panel-content-padding-bottom);
}

.framework-stage::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.module-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-item {
  --module-accent: #6c8191;
}

.module-item:nth-child(2n) {
  --module-accent: #6f8476;
}

.module-item:nth-child(3n) {
  --module-accent: #a98455;
}

.module-row {
  --module-row-pad-x: 7px;
  --module-row-pad-y: 6px;
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  min-height: 58px;
  margin-left: calc(var(--depth) * 15px);
  padding: 6px 7px;
  border: 1px solid rgba(105, 126, 139, 0.2);
  border-left: 3px solid var(--module-accent);
  border-radius: var(--radius-row);
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  /* === 2026-06-10 3D 娴捣鏁堟灉锛歵ransform 澶嶅悎鏃朵笉浼氬奖鍝嶅師鏈夌殑 transition === */
  transition:
    transform 0.14s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.14s cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 0.16s ease,
    background-color 0.16s ease;
}

.module-row:hover,
.module-row.is-selected {
  border-color: rgba(49, 74, 99, 0.28);
  border-left-color: var(--accent-deep);
  background: rgba(248, 251, 253, 0.96);
}

/* === 2026-06-10 妗嗘灦鍗＄墖 3D 娴捣鏁堟灉 === */
/* hover 鏃讹細涓婄Щ 2px + 杞诲井缂╂斁 + 绔嬩綋闃村奖 */
.module-row:hover:not(:active) {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(32, 36, 33, 0.04),
    0 6px 14px rgba(32, 36, 33, 0.085),
    0 14px 28px rgba(32, 36, 33, 0.04);
  z-index: 1;
}

.module-row.is-selected {
  box-shadow:
    inset 0 0 0 1px rgba(49, 74, 99, 0.08),
    0 6px 14px rgba(32, 36, 33, 0.055);
  transform: translateY(-1px);
}

.module-toggle,
.module-main {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.module-toggle {
  color: var(--subtle);
}

.module-toggle:not(:disabled):hover {
  background: var(--green-soft);
  color: var(--accent-deep);
}

.module-toggle-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  overflow: visible;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 0.16s ease;
}

.module-toggle-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.module-toggle-icon.is-expanded {
  transform: translate(-50%, -50%) rotate(90deg);
}

.module-main {
  grid-column: 2;
  align-self: center;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.module-title,
.module-desc {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.module-desc {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.module-item.depth-0 .module-row {
  --module-row-pad-y: 6px;
  padding-block: 6px;
}

.module-item.depth-0 .module-title {
  color: #1a201d;
  font-size: 14px;
  font-weight: 800;
}

.module-item.depth-0 .module-desc {
  color: var(--muted);
  font-size: 11.5px;
}

.module-item.depth-1 .module-row {
  --module-row-pad-y: 6px;
  padding-block: 6px;
}

.module-item.depth-1 .module-title {
  color: #2f3833;
  font-size: 13px;
  font-weight: 600;
}

.module-item.depth-1 .module-desc {
  color: #737b76;
  font-size: 11px;
}

.module-item.depth-2 .module-row,
.module-item.depth-3 .module-row {
  --module-row-pad-y: 5px;
  padding-block: 5px;
  background: rgba(255, 255, 255, 0.76);
}

.module-item.depth-2 .module-title {
  color: #4c554f;
  font-size: 12.5px;
  font-weight: 500;
}

.module-item.depth-3 .module-title {
  color: #8a938e;
  font-size: 11.5px;
  font-weight: 400;
}

.module-item.depth-2 .module-desc,
.module-item.depth-3 .module-desc {
  color: var(--subtle);
  font-size: 10.5px;
}

.module-item.depth-2 .module-counts,
.module-item.depth-3 .module-counts {
  opacity: 0.82;
}

.editable-field {
  border-radius: var(--radius-input);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.editable-field:hover {
  background: rgba(49, 74, 99, 0.07);
}

.editable-field.is-editing {
  min-width: 40px;
  outline: 0;
  background: var(--panel);
  box-shadow: 0 0 0 1px rgba(63, 95, 143, 0.38), var(--focus-ring);
  cursor: text;
}

.module-counts {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--subtle);
  font-size: 10px;
  white-space: nowrap;
}

.module-gear-button {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  margin-right: 28px;
}

.module-row > .inline-delete {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
}

.module-counts span {
  padding: 2px 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
}

.module-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 66px;
  --module-row-pad-x: 6px;
  --module-row-pad-y: 3.6px;
  padding: 3.6px 6px 5px;
}

.module-card-body {
  grid-column: 1;
  display: grid;
  grid-template-rows: minmax(34px, 1fr) 21px;
  min-width: 0;
  overflow: hidden;
}

.module-card-top {
  display: grid;
  grid-template-columns: minmax(46px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3.6px 28px 2px 8px;
}

.module-card-bottom {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 21px;
  padding: 0 0 0 6px;
  border-top: 0;
}

.module-tags {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.module-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 17px;
  min-width: 0;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1;
  white-space: nowrap;
}

.module-stat-card,
.module-stat-task {
  min-width: 48px;
}

.module-stat strong {
  color: var(--text);
  font-size: 9.5px;
  line-height: 1;
}

.module-stat-fire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  font-size: 9px;
  line-height: 1;
}

.module-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.module-actions .module-toggle,
.module-actions .module-gear-button,
.module-actions .inline-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  justify-self: auto;
  margin-right: 0;
  width: 20px;
  height: 20px;
  min-height: 20px;
  border-radius: var(--radius-input);
  border: 0;
  background: transparent;
  color: var(--subtle);
  padding: 0;
  line-height: 1;
  font-size: 0;
}

.module-actions .module-toggle:hover,
.module-actions .module-gear-button:hover,
.module-actions .inline-delete:hover {
  background: var(--green-soft);
  color: var(--accent-deep);
}

.module-actions .inline-delete:hover {
  background: var(--red-soft);
  color: var(--red);
}

.module-actions .workspace-menu-icon,
.module-actions .module-delete-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.module-delete-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.module-card-body:focus-visible,
.module-actions button:focus-visible,
.module-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.module-children {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

/* Left framework tree redesign: lightweight, high-density tree rows. */
.framework-map {
  padding: 10px 12px 14px 18px;
}

.module-list {
  gap: 5px;
}

.module-children {
  gap: 5px;
  margin-top: 5px;
}

.module-item {
  --module-accent: #126352;
}

.module-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 15px;
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: 6px;
  min-height: 34px;
  margin-left: calc(var(--depth) * 16px);
  padding: 3px 7px 3px 8px;
  border: 1px solid rgba(107, 123, 135, 0.16);
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: none;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.module-row:hover {
  border-color: rgba(94, 112, 126, 0.24);
  background: rgba(250, 253, 254, 0.96);
  z-index: 1;
}

.module-row.is-selected {
  border-color: rgba(18, 99, 82, 0.24);
  background: rgba(238, 246, 243, 0.95);
  box-shadow: inset 3px 0 0 #126352, inset 0 0 0 1px rgba(18, 99, 82, 0.04);
}

.module-row.is-dragging {
  opacity: 0.55;
}

.module-row.is-drag-over {
  border-color: rgba(63, 95, 143, 0.48);
  box-shadow: inset 0 0 0 1px rgba(63, 95, 143, 0.12);
}

.module-depth-guide {
  display: none;
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: -9px;
  width: 1px;
  border-radius: var(--radius-pill);
  background: rgba(113, 130, 143, 0.18);
  pointer-events: none;
}

.module-item:not(.depth-0) > .module-row .module-depth-guide {
  display: block;
}

.module-leading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.module-toggle,
.module-toggle-spacer,
.module-gear-button,
.module-actions .inline-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border: 0;
  border-radius: var(--radius-input);
  background: transparent;
  color: #7d8b95;
  padding: 0;
  font-size: 0;
  line-height: 1;
}

.module-toggle {
  cursor: pointer;
}

.module-toggle-spacer {
  pointer-events: none;
}

.module-toggle:not(:disabled):hover,
.module-gear-button:hover,
.module-actions .inline-delete:hover {
  background: rgba(18, 99, 82, 0.08);
  color: #126352;
}

.module-actions .inline-delete:hover {
  background: rgba(199, 93, 93, 0.1);
  color: #b54848;
}

.module-toggle-icon {
  width: 13px;
  height: 13px;
}

.module-node-main {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  overflow: visible;
}

.module-title {
  display: block;
  overflow: hidden;
  color: #202a2f;
  font-size: 12.5px;
  font-weight: 680;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-title-tooltip-trigger {
  position: relative;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
  cursor: default;
}

.module-title-tooltip-trigger .module-title {
  max-width: 100%;
}

.module-item.depth-0 > .module-row .module-title {
  color: #17211d;
  font-size: 13px;
  font-weight: 760;
}

.module-item.depth-1 > .module-row .module-title {
  color: #2b3834;
  font-size: 12.5px;
  font-weight: 680;
}

.module-item.depth-2 > .module-row,
.module-item.depth-3 > .module-row,
.module-item.depth-4 > .module-row {
  min-height: 32px;
  background: rgba(255, 255, 255, 0.64);
}

.module-item.depth-2 > .module-row .module-title {
  color: #4c5651;
  font-size: 12px;
  font-weight: 400;
}

.module-item.depth-3 > .module-row .module-title,
.module-item.depth-4 > .module-row .module-title {
  color: #65716b;
  font-size: 11.5px;
  font-weight: 400;
}

.module-desc,
.module-card-top,
.module-card-bottom,
.module-card-body {
  display: contents;
}

.module-tags {
  display: none;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.module-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 40px;
  height: 16px;
  min-width: 40px;
  padding: 0 4px;
  border: 1px solid rgba(128, 143, 154, 0.2);
  border-radius: var(--radius-pill);
  background: rgba(249, 251, 252, 0.9);
  color: #77858f;
  font-size: 9.5px;
  line-height: 1;
  white-space: nowrap;
}

.module-stat strong {
  color: #52616b;
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1;
}

.module-stat-fire {
  width: 8px;
  height: 8px;
  margin-left: -1px;
  font-size: 8px;
}

.module-actions {
  --module-tool-box-size: 12px;
  --module-tool-visual-size: 10px;
  --module-tool-stroke: 1.2px;
  --module-tool-color: #8d9a97;
  --module-tool-hit-width: 15px;
  grid-column: 3;
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 15px;
}

.module-action-menu {
  position: absolute;
  top: calc(50% + 5px);
  right: 0;
  z-index: 20;
  display: grid;
  width: 76px;
  padding: 4px;
  border: 1px solid rgba(207, 216, 221, 0.88);
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 24px rgba(25, 35, 45, 0.12), 0 2px 6px rgba(25, 35, 45, 0.08);
  opacity: 0;
  transform: translateY(-3px);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.module-row:has(.module-actions:hover),
.module-row:has(.module-actions:focus-within),
.module-row:has(.module-action-menu.is-open) {
  z-index: 40;
}

.module-row:has(.module-action-menu.is-open) {
  transform: none;
}

.module-row:has(.module-actions:hover):hover,
.module-row:has(.module-actions:focus-within):hover,
.module-row:has(.module-action-menu.is-open):hover {
  z-index: 40;
}

.module-actions.is-menu-above .module-action-menu {
  top: auto;
  bottom: calc(50% + 5px);
  transform: translateY(3px);
  transform-origin: bottom right;
}

.module-actions:focus-within .module-action-menu,
.module-action-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.module-action-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 24px;
  border: 0;
  border-radius: var(--radius-input);
  background: transparent;
  color: #50605c;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 560;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}

.module-action-menu-item:hover,
.module-action-menu-item:focus-visible {
  background: rgba(18, 99, 82, 0.08);
  color: #126352;
  outline: 0;
}

.module-action-menu-item.is-danger:hover,
.module-action-menu-item.is-danger:focus-visible {
  background: rgba(199, 93, 93, 0.1);
  color: #b54848;
}

.module-title-tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 12;
  width: max-content;
  max-width: 250px;
  padding: 8px 10px;
  border: 1px solid rgba(215, 222, 226, 0.92);
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 18px rgba(25, 35, 45, 0.12), 0 2px 5px rgba(25, 35, 45, 0.08);
  color: #4f5d66;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.module-title-tooltip-trigger.is-tooltip-below .module-title-tooltip {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translateY(-2px);
}

.module-list > .module-item:first-child > .module-row .module-title-tooltip-trigger .module-title-tooltip {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translateY(-2px);
}

.module-title-tooltip-trigger:hover .module-title-tooltip,
.module-title-tooltip-trigger:focus .module-title-tooltip,
.module-title-tooltip-trigger:focus-visible .module-title-tooltip,
.module-title-tooltip-trigger.is-tooltip-visible .module-title-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.module-actions .workspace-menu-icon,
.module-actions .module-delete-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--module-tool-box-size);
  height: var(--module-tool-box-size);
  transform: translate(-50%, -50%);
}

.module-gear-button {
  color: var(--module-tool-color);
}

.module-actions .module-gear-button {
  color: var(--module-tool-color);
  cursor: pointer;
  width: var(--module-tool-hit-width);
  min-width: var(--module-tool-hit-width);
}

.module-delete-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.module-row:focus-visible,
.module-title-tooltip-trigger:focus-visible,
.module-actions button:focus-visible,
.module-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.module-item.depth-2 > .module-row .module-stat,
.module-item.depth-3 > .module-row .module-stat,
.module-item.depth-4 > .module-row .module-stat {
  width: 37px;
  min-width: 37px;
  font-size: 9px;
}

.module-item.depth-2 > .module-row .module-stat strong,
.module-item.depth-3 > .module-row .module-stat strong,
.module-item.depth-4 > .module-row .module-stat strong {
  font-size: 9px;
}

.panel-title-context {
  min-width: 0;
  width: 100%;
}

.node-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.node-context-title {
  min-width: 0;
}

.node-context-title {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 360px; /* 鏈€瀹芥枃瀛楀搴?*/
}

.node-breadcrumb {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb-sep {
  color: var(--knowledge-title-muted);
  margin: 0 2px;
  font-weight: 400;
}

.node-context-title p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--knowledge-title-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-context-meta {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 58%;
}

.node-context-meta .tag strong {
  color: inherit;
  font-size: 11px;
  line-height: 1;
}

.knowledge-panel .node-context-meta .tag {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--knowledge-count-chip-border);
  background: var(--knowledge-count-chip-bg);
  color: var(--knowledge-count-chip-color);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.empty-state {
  display: block;
  width: auto;
  min-height: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

.content-column-body .empty-state {
  padding: 6px 10px;
}

.dialog {
  width: min(var(--dialog-width), calc(100vw - 32px));
  max-height: calc(100vh - 32px);  /* 弹窗内容超长时不让它超出视窗 */
  display: flex;                  /* flex column 让 form-card flex:1 能正确撑出 height context */
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  padding: 0;
  background: var(--panel);
  box-shadow: 0 24px 68px rgba(32, 36, 33, 0.16);
  color: var(--text);
}

/* form-card 自身作为可滚动容器；用 position: sticky 让 header / actions 黏在顶部/底部固定不动，
   中间内容自然滚动。无需改 HTML。 */
.dialog > .form-card {
  flex: 1 1 auto;                 /* 撑满 dialog 剩余空间 */
  min-height: 0;                  /* 关键：让 flex 子元素能正确收缩到容器高度 */
  overflow-y: auto;
  overscroll-behavior: contain;   /* 防止滚动冒泡到外层视窗 */
}

.dialog > .form-card > .dialog-header {
  position: sticky;
  top: 0;
  background: var(--panel);       /* 黏住时挡住下方滚动内容 */
  z-index: 2;
}

.dialog > .form-card > .dialog-actions {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  z-index: 2;
}

/* === 卡片弹窗 sticky header/footer（与 form-card 对齐，2026-06-30）=== */
.dialog > .create-card-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.create-card-modal .modal-header {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 2;
}

.create-card-modal .modal-footer {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  z-index: 2;
}

/* === 纭寮圭獥锛氱揣鍑戝瀷灏忓脊绐楋紙鏂规 A锛?=== */
.confirm-dialog {
  --dialog-width: 420px;
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

.confirm-dialog > .form-card {
  padding: 20px 22px;
  gap: 14px;  /* 鏍囬 鈫?姝ｆ枃锛氭渶瀹?*/
}

.confirm-dialog .dialog-header {
  padding-bottom: 0;
  border-bottom: 0;
}

.confirm-dialog .dialog-actions {
  padding-top: 4px;
  border-top: 0;
  margin-top: 0;  /* 覆盖全局 .dialog-actions 的 18px（confirm 是紧凑型弹窗，不需要额外间距） */
}

.confirm-dialog-message {
  margin: 0 0 8px;  /* 姝ｆ枃 鈫?bullet锛氫腑绛?*/
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

.confirm-dialog-impacts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;  /* bullet 涔嬮棿锛氭渶绱у噾 */
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;  /* bullet 琛岄珮涔熺暐鏀剁揣 */
}

.confirm-dialog-impacts li {
  position: relative;
  padding-left: 14px;
}

.confirm-dialog-impacts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--subtle);
}

.dialog:not([open]):not(.is-open) {
  display: none;
}

.dialog.is-open {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 20;
  display: block;
  max-height: calc(100vh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-scrollbar-thumb) transparent;
  transform: translate(-50%, -50%);
}

.dialog[open] {
  max-height: calc(100vh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-scrollbar-thumb) transparent;
}

.dialog::-webkit-scrollbar,
.dialog .manage-list::-webkit-scrollbar,
.dialog .card-detail-content::-webkit-scrollbar,
.dialog .tag-library-list::-webkit-scrollbar {
  width: var(--panel-scrollbar-size);
  height: var(--panel-scrollbar-size);
}

.dialog::-webkit-scrollbar-track,
.dialog .manage-list::-webkit-scrollbar-track,
.dialog .card-detail-content::-webkit-scrollbar-track,
.dialog .tag-library-list::-webkit-scrollbar-track {
  margin-block: 0 10px;
  background: transparent;
}

.dialog::-webkit-scrollbar-thumb,
.dialog .manage-list::-webkit-scrollbar-thumb,
.dialog .card-detail-content::-webkit-scrollbar-thumb,
.dialog .tag-library-list::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--panel-scrollbar-thumb);
  background-clip: padding-box;
}

.dialog::-webkit-scrollbar-thumb:hover,
.dialog .manage-list::-webkit-scrollbar-thumb:hover,
.dialog .card-detail-content::-webkit-scrollbar-thumb:hover,
.dialog .tag-library-list::-webkit-scrollbar-thumb:hover {
  background: var(--panel-scrollbar-thumb-hover);
  background-clip: padding-box;
}

.dialog::-webkit-scrollbar-button,
.dialog::-webkit-scrollbar-corner,
.dialog .manage-list::-webkit-scrollbar-button,
.dialog .manage-list::-webkit-scrollbar-corner,
.dialog .card-detail-content::-webkit-scrollbar-button,
.dialog .card-detail-content::-webkit-scrollbar-corner,
.dialog .tag-library-list::-webkit-scrollbar-button,
.dialog .tag-library-list::-webkit-scrollbar-corner {
  display: none;
}

.dialog::backdrop {
  background: rgba(32, 36, 33, 0.28);
  backdrop-filter: blur(2px);
}

.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--form-gap, 12px);
}

.form-card label {
  display: flex;
  flex-direction: column;
  gap: var(--label-to-input);
}

/* === P1-3: 鍐呰仈琛ㄥ崟鏍￠獙锛?026-06-09 鍔狅級 ===
   瑙勫垯锛歳equired 瀛楁涓虹┖鏃舵樉绀虹孩杈?+ 杞孩鍏夋檿锛涚敤鎴峰紑濮嬭緭鍏ュ悗绔嬪嵆娓呴櫎銆?
   閰嶅锛歛pp.js 涓殑 capture-phase submit 鐩戝惉浼氭妸棣栦釜鏃犳晥瀛楁 focus銆?*/
.form-card input.is-invalid,
.form-card select.is-invalid,
.form-card textarea.is-invalid,
.create-card-form input.is-invalid,
.create-card-form select.is-invalid,
.create-card-form textarea.is-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
  background: var(--red-soft);
}
.form-card input.is-invalid:focus,
.form-card select.is-invalid:focus,
.form-card textarea.is-invalid:focus,
.create-card-form input.is-invalid:focus,
.create-card-form select.is-invalid:focus,
.create-card-form textarea.is-invalid:focus {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
.form-card .field-error,
.create-card-form .field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
}
.form-card .field-error[hidden],
.create-card-form .field-error[hidden] { display: none; }

/* === 寮圭獥瀹藉害妗ｏ紙2026-06-09 鏀舵暃锛?=== */
.module-dialog    { --dialog-width: 480px; }
.task-dialog      { --dialog-width: 520px; }
#cardDetailDialog { --dialog-width: 780px; }

.is-hidden {
  display: none;
}

.dialog > .form-card {
  gap: 0;
  padding: 0;
  background: #ffffff;
}

.form-card .form-card {
  gap: var(--space-8);
  padding: 0;
  border: none;
  background: transparent;
}

.create-dialog,
.manage-dialog {
  --dialog-width: 880px;
}

.create-card-modal {
  --dialog-width: 880px;
  border-color: #e5e6eb;
  background: #ffffff;
}

.create-card-form {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #ffffff;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--modal-header-gap);
  padding: var(--modal-body-padding-top) var(--modal-body-padding-x) 0;
}

.modal-heading {
  display: grid;
  gap: var(--modal-heading-gap);
  min-width: 0;
}

.modal-title {
  margin: 0;
  color: #1f2329;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.modal-subtitle {
  margin: 0;
  color: #8f959e;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.modal-close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #4f5359;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.modal-close-button:hover,
.modal-close-button:focus-visible {
  background: #f2f3f5;
  color: #1f2329;
  outline: 0;
}

.modal-body {
  display: grid;
  gap: 0;
  padding: var(--modal-body-padding-top) var(--modal-body-padding-x) 0;
}

.form-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0 0 var(--form-item-gap);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.form-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin: 0 0 var(--form-label-gap);
  padding: 0;
  color: #1f2329;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.form-label-optional {
  margin-left: 6px;
  color: #8f959e;
  font-size: 12px;
  font-weight: 400;
}

.modal-input,
.create-card-modal .rich-text-editor {
  border: 1px solid #e5e6eb;
  border-radius: var(--radius-input);
  background-color: #f7f8fa;
  padding-left: 12px;
  color: #1f2329;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.modal-input {
  height: 28px;
  padding-right: 12px;
}

.modal-input:focus,
.modal-input:focus-visible,
.create-card-modal .rich-text-editor:focus,
.create-card-modal .rich-text-editor:focus-visible {
  border-color: rgba(49, 74, 99, 0.78);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(49, 74, 99, 0.12);
  outline: 0;
}

.modal-rich-toolbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-color: #e5e6eb;
  background: #ffffff;
  overflow: visible;
}

.modal-rich-toolbar button,
.modal-rich-toolbar .color-picker-wrap {
  flex: 0 0 auto;
}

.modal-rich-editor {
  position: relative;
  z-index: 1;
  min-height: 128px;
  padding: 10px 12px;
}

.chip-tag-picker {
  min-width: 0;
  margin: 0 0 var(--form-item-gap);
  padding: 0;
  border: 0;
  margin-inline: 0;
  padding-inline: 0;
}

.chip-tag-picker > .form-label {
  width: auto;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-field-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.modal-field-gear:hover {
  background: rgba(49, 74, 99, 0.06);
  color: var(--accent-deep);
}

.modal-field-gear .material-symbols-outlined {
  font-size: 16px;
}

.chip-tag-picker .tag-choice-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.chip-tag-picker .checkbox-option {
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.chip-tag-picker .checkbox-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.chip-tag-picker .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 148px;
  min-height: 28px;
  border: 1px solid #d0d3d6;
  border-radius: 8px;
  padding: 0 10px;
  background: #f2f3f5;
  color: #4f5359;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chip-tag-picker .checkbox-option:hover .tag {
  border-color: #bfc5cc;
  background: #e5e6eb;
}

.chip-tag-picker .checkbox-option input:checked + .tag {
  border-color: color-mix(in srgb, var(--tag-bg, #d0d3d6) 90%, #6f7d89 10%);
  background: color-mix(in srgb, var(--tag-bg, #dfe3e6) 88%, #ffffff 12%);
  color: var(--tag-color, #1f2329);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tag-bg, #dfe3e6) 55%, #ffffff 45%),
    0 6px 14px rgba(31, 35, 41, 0.08);
}

.chip-tag-picker .checkbox-option input:not(:checked) + .tag {
  border-color: #d0d3d6;
  background: #f2f3f5;
  color: #4f5359;
  box-shadow: none;
}

.chip-tag-picker .checkbox-option:active .tag {
  transform: scale(0.96);
}

.chip-tag-picker .checkbox-option input:focus-visible + .tag {
  box-shadow: 0 0 0 3px rgba(49, 74, 99, 0.14);
}

.create-card-modal .tag-picker-empty {
  padding: 0;
  color: #8f959e;
  font-size: 13px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--modal-footer-gap);
  padding: var(--modal-footer-padding-y) var(--modal-body-padding-x);
  border-top: 1px solid #e5e6eb;
}

.modal-secondary-button,
.modal-primary-button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.modal-secondary-button {
  border-color: #c9cdd4;
  background: transparent;
  color: #4f5359;
}

.modal-secondary-button:hover,
.modal-secondary-button:focus-visible {
  border-color: #b8bdc6;
  background: #f7f8fa;
  color: #1f2329;
}

.modal-primary-button {
  background: #314a63;
  color: #ffffff;
}

.modal-primary-button:hover,
.modal-primary-button:focus-visible {
  background: #36536f;
  opacity: 0.9;
}

.action-section {
  gap: 8px;
}

.section-heading {
  display: grid;
  gap: var(--section-heading-gap);
}

.section-heading strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.25;
}

.section-heading span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.dialog-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--dialog-tab-gap);
  width: max-content;
  padding: var(--dialog-tab-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-cool);
}

.dialog-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 76px;
  border: 0;
  border-radius: var(--radius-input);
  padding: 0 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.dialog-tab.is-active {
  background: #fff;
  color: var(--accent-deep);
  box-shadow: 0 1px 4px rgba(32, 36, 33, 0.08);
}

.manage-panel {
  display: grid;
  gap: var(--manage-panel-gap);
}

.manage-dialog .action-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px auto;
  align-items: end;
  gap: var(--manage-section-gap);
  padding: var(--manage-section-padding);
  border: 1px solid #e5e6eb;
  border-radius: var(--radius-control);
  background: #f7f8fa;
}

.manage-dialog .action-section label {
  gap: 0;
}

.manage-dialog .action-section .field-label {
  margin-bottom: 8px;
}

.manage-dialog .action-section input[type="color"] {
  width: 92px;
  height: 28px;
  padding: 3px;
  border: 1px solid #e5e6eb;
  border-radius: var(--radius-input);
  background: #ffffff;
}

.manage-list {
  display: grid;
  gap: var(--manage-list-gap);
  max-height: min(36vh, 320px);
  overflow: auto;
}

.manage-row {
  display: grid;
  align-items: center;
  gap: var(--manage-row-gap);
  min-height: 36px;
  padding: var(--manage-row-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
}

.column-manage-row {
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
}

.tag-manage-row {
  grid-template-columns: minmax(80px, 112px) minmax(0, 1fr) 38px auto auto;
}

.manage-row-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.manage-row input[type="text"],
.manage-row input:not([type]),
.manage-row input[name="title"],
.manage-row input[name="tag"] {
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.manage-row input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #fff;
}

.manage-row .ghost-button {
  min-height: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

.tag-preview {
  min-width: 0;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-header,
.dialog-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--modal-header-gap);
}

.dialog-header {
  padding: var(--modal-body-padding-top) var(--modal-body-padding-x) 0;
  border-bottom: 0;
}

.dialog-header h3 {
  margin: 0;
  color: #1f2329;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.dialog-actions {
  align-items: center;
  justify-content: flex-end;
  gap: var(--modal-footer-gap);
  /* 让 border-top 跟上面内容之间有呼吸空间（用 margin-top 不与内容块自身 margin-bottom 冲突，
     折叠后取较大值 = max(18, 内容块 margin-bottom)，已 label/form-field 24px 内容块自然折叠为 24，
     danger-zone / settings-section 等 0 边距内容块则取 18） */
  margin-top: 18px;
  padding: var(--modal-footer-padding-y) var(--modal-body-padding-x);
  border-top: 1px solid #e5e6eb;
}

.dialog-actions-split {
  align-items: center;
  justify-content: space-between;
}

.dialog-actions-split > div:empty {
  display: none;
}

.dialog-actions-split:has(> div:empty) {
  justify-content: flex-end;
}

.dialog-actions-inline {
  display: flex;
  align-items: center;
  gap: var(--modal-footer-gap);
}

.dialog > .form-card > :not(.dialog-header):not(.dialog-actions),
.dialog > .form-card > .settings-section,
.dialog > .form-card > .card-detail-body,
.dialog > .form-card > .confirm-dialog-body,
.dialog > .form-card > .manage-panel,
.dialog > .form-card > .theme-color-row,
.dialog > .form-card > .theme-advanced,
.dialog > .form-card > .danger-zone {
  margin-left: var(--modal-body-padding-x);
  margin-right: var(--modal-body-padding-x);
}

.dialog > .form-card > .dialog-header + :not(.dialog-actions):not(.dialog-subtitle) {
  margin-top: var(--dialog-section-gap);
}

.dialog > .form-card > label,
.dialog > .form-card > .form-field,
.dialog > .form-card > fieldset:not(.choice-group),
.dialog > .form-card > .choice-group {
  margin-bottom: var(--dialog-section-gap);
}

.dialog > .form-card > .dialog-subtitle {
  margin-top: var(--dialog-subtitle-gap-top);
  margin-bottom: var(--dialog-section-gap);
  color: #8f959e;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.dialog > .form-card > .settings-section + .settings-section {
  margin-top: var(--dialog-section-gap-tight);
}

.dialog > .form-card > .manage-panel,
.dialog > .form-card > .card-detail-body,
.dialog > .form-card > .confirm-dialog-body {
  margin-bottom: var(--dialog-section-gap);
}

.dialog > .form-card > label,
.dialog > .form-card > .form-field,
.dialog > .form-card > fieldset {
  color: #1f2329;
  font-size: 14px;
  font-weight: 600;
}

.dialog .field-label,
.dialog legend {
  display: inline-flex;
  align-items: baseline;
  margin: 0 0 8px;
  padding: 0;
  color: #1f2329;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.dialog input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
.dialog select,
.dialog textarea,
.dialog .rich-text-editor {
  border: 1px solid #e5e6eb;
  border-radius: var(--radius-input);
  background-color: #f7f8fa;
  color: #1f2329;
  font-weight: 400;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dialog input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
.dialog select {
  min-height: 36px;
  padding: 0 12px;
}

.dialog textarea,
.dialog .rich-text-editor {
  padding: 10px 12px;
}

.dialog input:not([type="radio"]):not([type="checkbox"]):not([type="color"]):focus,
.dialog input:not([type="radio"]):not([type="checkbox"]):not([type="color"]):focus-visible,
.dialog select:focus,
.dialog select:focus-visible,
.dialog textarea:focus,
.dialog textarea:focus-visible,
.dialog .rich-text-editor:focus,
.dialog .rich-text-editor:focus-visible,
.dialog .rich-text-editor:focus-within {
  border-color: rgba(49, 74, 99, 0.78);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(49, 74, 99, 0.12);
  outline: 0;
}

.dialog .rich-text-toolbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-color: #e5e6eb;
  background: #ffffff;
  overflow: visible;
}

.dialog .rich-text-toolbar button,
.dialog .rich-text-toolbar .color-picker-wrap {
  flex: 0 0 auto;
}

.dialog .ghost-button,
.dialog .primary-button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
}

.dialog .ghost-button {
  border-color: #c9cdd4;
  background: transparent;
  color: #4f5359;
}

.dialog .ghost-button:hover,
.dialog .ghost-button:focus-visible {
  border-color: #b8bdc6;
  background: #f7f8fa;
  color: #1f2329;
}

.dialog .primary-button {
  background: #314a63;
  color: #ffffff;
}

.dialog .primary-button:hover,
.dialog .primary-button:focus-visible {
  background: #36536f;
  opacity: 0.9;
}

.module-dialog-delete {
  min-height: 28px;
  padding-inline: 10px;
  font-size: 12px;
  font-weight: 650;
}

.danger-ghost-button {
  color: var(--red);
}

.danger-ghost-button:hover {
  background: var(--red-soft);
}

.theme-color-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 34px;
  align-items: end;
  gap: var(--manage-section-gap);
}

.theme-color-picker,
.theme-code-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.theme-color-picker input[type="color"] {
  width: 96px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 3px;
  background: #fff;
}

.theme-code-field input {
  height: 34px;
}

.theme-color-preview {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--knowledge-theme);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.theme-advanced {
  margin-top: var(--dialog-section-gap-tight);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.62);
  overflow: hidden;
}

.theme-advanced-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--manage-section-padding);
  cursor: pointer;
  color: var(--text);
  list-style-position: inside;
}

.theme-advanced-summary:hover {
  background: var(--surface-cool);
}

.theme-advanced-summary:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: -2px;
}

.theme-advanced-title {
  font-size: 13px;
  font-weight: 700;
}

.theme-advanced-hint {
  padding-left: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.theme-token-group { margin-top: 14px; }
.theme-token-group:first-child { margin-top: 0; }
.theme-token-group-title {
  margin: 0 0 8px;
  padding: 0 var(--manage-row-padding-x, 0);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.theme-token-list {
  display: grid;
  gap: var(--manage-list-gap);
  padding: var(--manage-section-padding);
  border-top: 1px solid var(--line);
  background: rgba(250, 250, 248, 0.72);
}

.theme-token-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 42px 104px 74px;
  align-items: center;
  gap: var(--manage-row-gap);
  padding: var(--manage-row-padding);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--panel);
}

.theme-token-row.is-custom {
  border-color: rgba(49, 74, 99, 0.34);
  box-shadow: inset 0 0 0 1px rgba(49, 74, 99, 0.06);
}

.theme-token-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.theme-token-label {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
}

.theme-token-help {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.theme-token-status {
  justify-self: start;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--surface-cool);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.theme-token-status.is-custom {
  border-color: rgba(49, 74, 99, 0.24);
  color: var(--accent-deep);
  background: var(--blue-soft);
}

.theme-token-picker {
  width: 42px;
  height: 32px;
  min-height: 32px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: #fff;
}

.theme-token-code {
  width: 104px;
  min-height: 32px;
  height: 32px;
  padding: 6px 7px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
}

.theme-token-reset {
  min-width: 74px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 11px;
}

.theme-token-reset:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .theme-token-row {
    grid-template-columns: minmax(0, 1fr) 54px 42px;
  }

  .theme-token-code,
  .theme-token-reset {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--danger-zone-gap);
  padding: var(--danger-zone-padding);
  border: 1px solid rgba(217, 72, 72, 0.22);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, #fff5f2 0%, #fffbf8 100%);
}

.danger-zone .danger-button {
  flex: 0 0 auto;
}

.danger-zone-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.danger-zone-copy strong {
  font-size: 12px;
  color: var(--text);
}

.danger-zone-copy span {
  font-size: 11px;
  color: var(--muted);
}

.card-detail-body {
  display: grid;
  gap: var(--manage-section-gap);
}

.card-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.task-node-more-tag {
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* 任务关联框架 `>` 按钮自身：解除父级 .task-meta-row .tag 的 overflow:hidden 截断
 *（需要更高 specificity 才能覆盖父规则）*/
.task-meta-row .tag.task-node-more-tag {
  overflow: visible;
  max-width: none;
  text-overflow: clip;
}

.task-node-more-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 80;
  display: grid;
  gap: 6px;
  width: max-content;
  max-width: min(480px, 80vw);
  padding: 12px;
  border: 1px solid rgba(208, 213, 218, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.task-node-more-popover strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.task-node-more-popover .task-node-more-line {
  color: var(--muted-strong);
  white-space: nowrap;
  overflow: visible;
}

.task-node-more-tag:hover .task-node-more-popover,
.task-node-more-tag:focus .task-node-more-popover,
.task-node-more-tag:focus-visible .task-node-more-popover {
  opacity: 1;
  transform: translateY(0);
}

.task-node-more-tag:focus,
.task-node-more-tag:focus-visible {
  outline: 0;
}

.card-detail-content {
  max-height: min(70vh, 600px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface-cool);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.card-detail-content.rich-text-content {
  white-space: normal;
}

.card-detail-link {
  justify-self: flex-start;
}

.settings-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

.settings-tab-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.settings-tab-button + .settings-tab-button {
  margin-left: 2px;
}

.settings-tab-button:hover {
  color: var(--text);
  background: rgba(15, 23, 42, 0.04);
}

.settings-tab-button.is-active,
.settings-tab-button[aria-selected="true"] {
  color: var(--text);
  background: transparent;
}

.settings-tab-button.is-active::after,
.settings-tab-button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--green);
}

.settings-tab-pane {
  display: grid;
  gap: 10px;
  padding-top: 0;
}

.settings-tab-pane[hidden] {
  display: none;
}

.settings-workspaces-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-theme-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.settings-theme-card:hover {
  border-color: var(--line-strong);
  background: #fff;
}

.settings-theme-card-title {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.form-card label.settings-theme-field {
  display: grid;
  grid-template-columns: 48px 30px minmax(0, 92px);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.settings-theme-field input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-theme-field input[type="color"]:hover {
  border-color: var(--line-strong);
}

.settings-theme-field input[type="text"] {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.settings-theme-field input[type="text"]:focus {
  border-color: var(--line-strong);
  outline: 0;
}

.settings-guide-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding-right: 2px;
}

.settings-guide-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
}

.settings-guide-card h4 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.settings-guide-card p,
.settings-guide-card ul {
  margin: 0;
  color: rgba(32, 36, 33, 0.72);
  font-size: 12px;
  line-height: 1.55;
}

.settings-guide-card ul {
  display: grid;
  gap: 4px;
  padding-left: 18px;
}

.settings-guide-card strong {
  color: var(--text);
  font-weight: 650;
}

.guide-intro-dialog {
  --dialog-width: 460px;
}

.guide-intro-list {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding-left: 18px;
  color: rgba(32, 36, 33, 0.74);
  font-size: 13px;
  line-height: 1.58;
}

.guide-intro-list li::marker {
  color: var(--accent-deep);
}

.settings-theme-presets {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--panel-soft);
}



.settings-theme-presets-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-theme-preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-theme-preset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.settings-theme-preset:hover,
.settings-theme-preset:focus-visible {
  border-color: var(--line-strong);
  background: #fff;
  outline: 0;
  box-shadow: 0 1px 3px rgba(49, 74, 99, 0.08);
}

.settings-theme-preset:active {
  transform: scale(0.98);
}

.settings-theme-preset-swatches {
  display: inline-flex;
  align-items: center;
}

.settings-theme-preset-swatches span {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(122, 136, 145, 0.22);
}

.settings-theme-preset-swatches span + span {
  margin-left: -4px;
}

.settings-theme-actions {
  justify-content: flex-end;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--line);
}

.settings-section-title {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.settings-section-desc {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.settings-section-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-hint {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.01em;
}

.settings-tab-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  padding: 18px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-control);
  background: var(--panel-soft);
  color: var(--muted);
  text-align: center;
}

.settings-tab-placeholder .material-symbols-outlined {
  font-size: 22px;
  color: var(--muted);
  opacity: 0.72;
}

.settings-tab-placeholder-title {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.settings-tab-placeholder-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.settings-workspace-list {
  display: grid;
  gap: 6px;
}

.settings-workspace-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.settings-workspace-item:hover {
  border-color: var(--line-strong);
}

.settings-workspace-item.is-active {
  border-color: var(--line-strong);
  background: var(--green-soft);
}

.settings-workspace-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--green);
}

.settings-workspace-info {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.settings-workspace-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.settings-workspace-name-text {
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  padding: 1px 2px;
  margin: -1px -2px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.settings-workspace-name-text:hover {
  color: var(--green-strong);
  background: rgba(15, 23, 42, 0.04);
}

.settings-workspace-current {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: none;
}

.settings-workspace-current::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

.settings-workspace-stats {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.settings-workspace-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.settings-workspace-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.settings-workspace-mini:hover:not(:disabled) {
  background: var(--green-soft);
  border-color: var(--line-strong);
}

.settings-workspace-mini:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-workspace-mini.is-text-danger {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.settings-workspace-mini.is-text-danger:hover:not(:disabled) {
  background: var(--red-soft);
  color: var(--red);
  border-color: transparent;
}

.settings-workspace-mini.is-primary {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--green-strong);
}

.settings-workspace-mini.is-primary:hover:not(:disabled) {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.settings-workspace-mini.is-share {
  background: var(--blue-soft, #e8f0fe);
  border-color: var(--blue, #4a90d9);
  color: var(--blue-strong, #1a73e8);
}

.settings-workspace-mini.is-share:hover:not(:disabled) {
  background: var(--blue, #4a90d9);
  color: #fff;
  border-color: var(--blue, #4a90d9);
}

.settings-workspace-mini.is-share.is-active {
  background: var(--blue, #4a90d9);
  color: #fff;
  border-color: var(--blue, #4a90d9);
}

/* Share Dialog */
#shareWorkspaceDialog {
  --dialog-width: 420px;
}

.share-dialog-card {
  /* 宽度由 dialog --dialog-width 控制，不单独设 min/max-width */
}

.share-dialog-workspace-name {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.share-dialog-options {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 12px;
}

.share-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  text-align: center;
}

.share-option:hover {
  border-color: var(--line-strong);
  background: rgba(0,0,0,0.015);
}

.share-option:has(input:checked) {
  border-color: var(--blue, #4a90d9);
  background: var(--blue-soft, #e8f0fe);
}

.share-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.share-option-icon {
  font-size: 20px;
  line-height: 1;
}

.share-option-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.share-option:has(input:checked) .share-option-label {
  color: var(--blue-strong, #1a73e8);
}

.share-dialog-friends {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0,0,0,0.015);
}

.share-dialog-friends-hint {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

.share-dialog-friends-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

label.share-friend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.share-friend-item:hover {
  background: rgba(0,0,0,0.03);
}

.share-friend-item:has(input:checked) {
  border-color: var(--blue, #4a90d9);
  background: var(--blue-soft, #e8f0fe);
}

.share-friend-item input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.share-friend-item .share-friend-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.share-friend-item .share-friend-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-no-friends {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}

.share-dialog-status {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  background: var(--green-soft);
  color: var(--green-strong);
  text-align: center;
}

/* ── 广场/发现列表 ── */
.discover-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.discover-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.discover-item:hover {
  border-color: var(--line-strong);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.discover-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.discover-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.discover-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.discover-item-info strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-item-info span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-ws-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill, 999px);
  background: var(--green-soft, #e8f5e9);
  color: var(--accent-deep, #1a8754);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}

.discover-item-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.discover-item-stats span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.discover-item-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* === 紧凑型卡片布局（广场 + 名片共用） === */
.discover-item--compact {
  padding: 12px 14px;
}

.discover-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.discover-item--compact .discover-item-info {
  flex: 1 1 auto;
  min-width: 0;
}

.discover-item-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.discover-item-name-row strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-item-ws-name {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-item-stats-inline {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.discover-item--compact .discover-item-actions {
  flex: 0 0 auto;
  flex-shrink: 0;
}

.discover-item--compact .discover-avatar {
  width: 32px;
  height: 32px;
}

.settings-danger-zone {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 18px 0 14px;
  border-top: 1px solid var(--line);
}

.settings-export-zone {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 18px 0 14px;
  border-top: 1px solid var(--line);
}

.settings-export-zone-title {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.settings-export-zone-desc {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.settings-export-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ghost-button.is-primary {
  border-color: var(--blue, #4a8);
  color: var(--blue, #4a8);
}

.settings-danger-zone-title {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.settings-danger-zone-desc {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.settings-danger-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-top: 6px;
  padding: 0 14px;
  border: 1px solid rgba(189, 91, 83, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--red);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.settings-danger-button:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 2px 6px rgba(189, 91, 83, 0.18);
}

.settings-danger-button:active {
  background: #a84d47;
  border-color: #a84d47;
}

.danger-button {
  color: var(--red);
  border-color: #f0c7c7;
  background: rgba(255, 255, 255, 0.94);
}

.danger-button:hover:not(:disabled) {
  background: var(--red-soft);
  border-color: rgba(217, 72, 72, 0.32);
}

/* 账号设置 */
.settings-account-section {
  display: grid;
  gap: 16px;
  padding-top: 4px;
}

.settings-account-card {
  padding: var(--settings-section-padding);
  border-radius: 10px;
  background: rgba(245, 248, 250, 0.6);
}

.settings-account-card + .settings-account-card {
  margin-top: 8px;
}

.settings-account-info {
  display: grid;
  gap: 10px;
}

.settings-account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.settings-account-label {
  min-width: 64px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.settings-account-value {
  flex: 1;
  color: var(--text);
  font-size: 13px;
  word-break: break-all;
}

.settings-account-copy {
  flex-shrink: 0;
  font-size: 12px;
  padding: 4px 10px;
  min-height: 28px;
}

.settings-account-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0 76px;
}

.settings-account-input {
  flex: 1;
  max-width: 200px;
  padding: 6px 10px;
  border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-md, 6px);
  font-size: 13px;
  color: var(--text);
  background: var(--surface, #fff);
  outline: none;
}

.settings-account-input:focus {
  border-color: var(--accent, #4a90d9);
}

.settings-account-password-reset {
  border-left: 3px solid var(--yellow-soft);
  padding-left: 14px;
}

.settings-account-copy-full {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}

.settings-account-hint {
  margin: 8px 0 0 0;
  color: var(--green);
  font-size: 12px;
  text-align: center;
}

.settings-account-password-reset .settings-section-desc {
  margin-bottom: 4px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  /* background 由更具体的规则定义（如 .panel-title-actions .icon-button） */
  color: #4f5359;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.icon-button:hover,
.icon-button:focus-visible {
  background: #f2f3f5;
  color: #1f2329;
  outline: 0;
}

label,
fieldset {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 10px;
  background: var(--panel-soft);
}

.choice-group {
  gap: 7px;
}

.choice-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.choice-row:hover {
  border-color: var(--line);
  background: var(--surface-cool);
}

.choice-row input[type="radio"] {
  margin: 0;
}

legend {
  padding: 0 6px;
  color: var(--muted);
}

input,
select,
textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  font-weight: 400;
  outline: 0;
}

input::placeholder,
textarea::placeholder {
  font-weight: 400;
  font-size: 12px;
  color: rgba(32, 36, 33, 0.35);
}

input,
select {
  min-height: var(--field-height);
}

textarea {
  min-height: 84px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
.module-main:focus-visible,
.workspace-menu-name:focus-visible {
  border-color: rgba(63, 95, 143, 0.6);
  box-shadow: var(--focus-ring);
  outline: 0;
}

.module-actions button:focus,
.module-actions button:focus-visible {
  outline: 0;
  box-shadow: none;
}

textarea {
  resize: vertical;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

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

.checkbox-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-weight: 500;
}

.checkbox-option:hover {
  border-color: var(--line);
  background: var(--surface-cool);
}

.checkbox-option input {
  width: auto;
}

.card-tag-picker {
  gap: 8px;
}

.compact-card-tag-picker {
  gap: var(--tag-picker-gap);
  padding: 10px 12px;
  border-color: transparent;
  border-radius: 6px;
  background: rgba(244, 246, 247, 0.6);
}

.compact-card-tag-picker legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
}

.tag-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tag-picker-gap);
}

.compact-card-tag-picker .checkbox-option {
  min-width: 0;
  min-height: 20px;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  background: transparent;
  border: none;
  flex-direction: row-reverse;
}

.compact-card-tag-picker .tag {
  max-width: 104px;
  padding: 2px 4px;
  font-size: 10.5px;
  line-height: 1.1;
}

.tag-choice span,
.tag-library-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-library-section {
  display: grid;
  gap: 7px;
}

.dialog-subtitle {
  margin: 0 0 12px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.tag-library-list {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}

.tag-library-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
}

.tag-library-delete {
  width: 22px;
  height: 22px;
}

.tag-library-empty,
.tag-picker-empty {
  padding: 8px 2px;
  color: var(--muted);
  font-size: 12px;
}


.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  width: max-content;
  max-width: min(360px, calc(100vw - 40px));
  padding: 13px 18px 13px 21px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(25, 35, 45, 0.18), 0 4px 12px rgba(25, 35, 45, 0.1);
  color: var(--text);
  font-size: 15px;
  font-weight: 560;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 10px)) scale(0.98);
  transition: 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* === toast 璇箟鑹叉潯锛?026-06-09 鍔狅級 === */
.toast.toast--info    { border-left-color: #6c8aa0; }
.toast.toast--success { border-left-color: #4a8a64; }
.toast.toast--warn    { border-left-color: #c98a3a; }
.toast.toast--error   { border-left-color: var(--red); }

/* === 宸ュ叿鏍忓熀绫伙紙v1锛?=== */
.toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--toolbar-control-gap);
  min-height: var(--toolbar-control-height);
  padding: 6px 12px 8px;
  background: transparent;
  font-size: var(--toolbar-control-fs);
  flex-wrap: nowrap;
}

.toolbar-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--toolbar-control-height);
  min-height: var(--toolbar-control-height);
  padding: 0 var(--toolbar-control-padding-x);
  border: var(--toolbar-border);
  border-radius: var(--toolbar-control-radius);
  background: var(--toolbar-bg);
  color: var(--toolbar-color);
  font-size: var(--toolbar-control-fs);
  font-weight: var(--toolbar-control-fw);
  box-shadow: none;
  cursor: pointer;
  transition: 0.16s ease;
}

.toolbar-control:hover {
  background: var(--toolbar-bg-hover);
  border-color: var(--toolbar-border-hover);
  color: var(--toolbar-color-hover);
}

.toolbar-control.is-primary {
  background: var(--accent-deep);
  color: #fff;
  border-color: var(--accent-deep);
}

.toolbar-control.is-primary:hover {
  background: #263d55;
  border-color: #263d55;
  color: #fff;
}

.toolbar-control.is-select {
  width: 132px;
  appearance: none;
  line-height: 23px;
  font-size: var(--toolbar-control-fs);
  font-weight: var(--toolbar-control-fw);
  text-align: center;
  text-align-last: center;
}

/* === 澶氶€夋爣绛剧瓫閫?popover === */
.toolbar-control.is-select-multi {
  position: relative;
  padding: 0;
  text-align: center;
  text-align-last: center;
  width: 100%;
  border: 0;
  background: transparent;
}

.toolbar-control.is-select-multi.is-empty {
  text-align: center;
  text-align-last: center;
}

/* === Filter trigger shared base (P0-1: 统一两套 trigger 样式) === */
.tag-filter-trigger,
.task-priority-filter__trigger {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 10px;
  align-items: center;
  column-gap: 4px;
  height: var(--toolbar-control-height);
  min-height: var(--toolbar-control-height);
  padding: 0 9px;
  background: var(--filter-surface-bg);
  backdrop-filter: var(--filter-surface-blur);
  -webkit-backdrop-filter: var(--filter-surface-blur);
  border: var(--filter-surface-border);
  border-radius: var(--filter-surface-radius);
  color: var(--text);
  font-size: var(--toolbar-control-fs);
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  caret-color: transparent;
}

/* Per-variant width overrides */
.tag-filter-trigger {
  width: var(--filter-tag-width);
  min-width: var(--filter-tag-width);
}

.task-priority-filter__trigger {
  width: var(--filter-priority-width);
  min-width: var(--filter-priority-width);
}

.toolbar-control.is-select-multi .tag-filter-trigger::before {
  content: "";
  width: 10px;
}

.toolbar-control.is-select-multi.is-empty .tag-filter-trigger {
  justify-content: normal;
}

.tag-filter-trigger-text {
  justify-self: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-align-last: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tag-filter-chevron {
  width: 10px;
  height: 10px;
  justify-self: end;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  opacity: 0.6;
  transition: transform 0.18s ease;
}

[aria-expanded="true"] .tag-filter-chevron {
  transform: rotate(180deg);
}

/* === Filter popover shared base (P0-1: 统一两套 popover 样式) === */
.tag-filter-popover,
.task-priority-filter__popover {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  padding: 8px;
  background: var(--filter-surface-bg);
  backdrop-filter: var(--filter-surface-blur);
  -webkit-backdrop-filter: var(--filter-surface-blur);
  border: var(--filter-surface-border);
  border-radius: var(--filter-surface-radius);
  box-shadow: var(--filter-surface-shadow);
}

.tag-filter-popover {
  width: var(--filter-tag-width);
  max-height: 280px;
  overflow: auto;
}

.task-priority-filter__popover {
  width: var(--filter-priority-width);
}

.tag-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 200px;
  overflow: auto;
}

.tag-filter-item {
  display: block;
}

/* === Filter option shared base (P0-1: 统一两套 option 样式) === */
.tag-filter-option,
.task-priority-filter__option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: var(--toolbar-control-fs);
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.tag-filter-option:hover,
.tag-filter-option:focus-visible,
.task-priority-filter__option:hover,
.task-priority-filter__option:focus-visible {
  background: var(--green-soft);
  outline: 0;
}

.tag-filter-option.is-selected,
.task-priority-filter__option.is-selected {
  background: rgba(49, 74, 99, 0.07);
  font-weight: 500;
}

.tag-filter-option.is-selected:hover,
.task-priority-filter__option.is-selected:hover {
  background: rgba(49, 74, 99, 0.11);
}

.tag-filter-option__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tag-bg, rgba(122, 136, 145, 0.45));
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.tag-filter-check,
.task-priority-filter__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(122, 136, 145, 0.45);
  border-radius: 4px;
  background: transparent;
  color: transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.tag-filter-option.is-selected .tag-filter-check,
.task-priority-filter__option.is-selected .task-priority-filter__check {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}

.tag-filter-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
  border-top: 1px solid rgba(122, 136, 145, 0.18);
  background: transparent;
}

.tag-filter-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.tag-filter-clear:hover {
  background: rgba(49, 74, 99, 0.06);
  color: var(--accent-deep);
}

.tag-filter-manage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-top: 1px solid rgba(122, 136, 145, 0.18);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.tag-filter-manage:hover {
  background: rgba(49, 74, 99, 0.06);
  color: var(--accent-deep);
}

/* === Segmented Control锛堜换鍔＄姸鎬佺瓫閫夛級 === */
.segmented-control {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: var(--toolbar-chip-bg);
  border: var(--toolbar-border);
  border-radius: var(--radius-control);
  padding: 0;
  height: var(--toolbar-control-height);
  font-size: var(--toolbar-control-fs);
  overflow: hidden;
}

.segmented-control__slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% / var(--segment-count, 5));
  background: rgba(244, 246, 245, 0.92);
  border-radius: var(--radius-control);
  box-shadow: 0 1px 3px rgba(35, 45, 52, 0.12);
  transition: transform 0.18s ease;
  transform: translateX(0);
  pointer-events: none;
}

.segmented-control__segment {
  position: relative;
  z-index: 1;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: var(--toolbar-control-fs);
  font-weight: 500;
  padding: 0 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.segmented-control__segment.is-active {
  color: rgba(32, 36, 33, 0.92);
  font-weight: 650;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 鍙闂€э細閿洏鐒︾偣鍙 */
.workspace-switcher select:focus-visible,
.workspace-menu-button:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--blue-soft);
}

@media (max-width: 1179px) {
  body {
    min-width: 0;
  }

  .app-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 8px;
  }

  .topbar,
  .workspace-control-row,
  .framework-toolbar,
  .panel-header,
  .node-context-row {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions,
  .task-control-row,
  .workspace-actionbar,
  .toolbar-actions {
    flex-wrap: wrap;
  }

  .search-box,
  .workspace-switcher,
  .compact-field,
  .node-path-inline {
    width: 100%;
    max-width: 100%;
  }

  .knowledge-panel .panel-header,
  .knowledge-panel .node-context-row,
  .knowledge-panel .workspace-control-row {
    align-items: center;
    flex-direction: row;
  }

  .knowledge-panel .node-context-meta {
    justify-content: flex-end;
    max-width: 45%;
  }

  .knowledge-panel .node-path-inline {
    flex: 1 1 auto;
    width: auto;
    max-width: clamp(180px, 42%, 340px);
  }

  .knowledge-panel .workspace-actionbar,
  .knowledge-panel .toolbar-actions {
    flex-wrap: nowrap;
  }

  .knowledge-panel .compact-field {
    flex: 0 0 132px;
    width: 132px;
    max-width: 132px;
  }

  .task-panel .panel-header {
    align-items: center;
    flex-direction: row;
  }

  .task-panel .panel-title-meta {
    justify-content: flex-end;
    max-width: 45%;
  }

  .workspace-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 0;
  }

  .column-rotate-button {
    display: none;
  }

  .framework-panel,
  .knowledge-panel,
  .task-panel {
    grid-column: 1;
    grid-row: auto;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .task-panel {
    --task-content-inset-left: 18px;
  }

  .workspace-grid.is-task-center .knowledge-panel,
  .workspace-grid.is-task-center .task-panel {
    grid-column: 1;
    grid-row: auto;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .workspace-grid.is-center-expanded .knowledge-panel,
  .workspace-grid.is-center-expanded .task-panel {
    width: auto;
  }

  .framework-stage,
  .content-board,
  .task-list,
  .knowledge-list {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .framework-stage {
    height: auto;
    margin-right: 0;
  }

  .framework-map {
    padding-right: 12px;
  }

  .node-context-meta {
    justify-content: flex-start;
    max-width: 100%;
  }

  .knowledge-panel .node-context-meta {
    justify-content: flex-end;
    max-width: 45%;
  }

  .node-context-title p {
    white-space: normal;
  }

  .task-create {
    grid-template-columns: 1fr;
  }

  .dialog {
    width: calc(100vw - 20px);
  }

  .dialog > .form-card {
    padding: 12px;
  }

  .dialog-actions,
  .danger-zone {
    align-items: stretch;
    flex-direction: column;
  }

  .dialog-actions .primary-button,
  .dialog-actions .ghost-button,
  .danger-zone .danger-button {
    width: 100%;
  }
}

/* === Tiptap 瀵屾枃鏈紪杈戝櫒鏍峰紡锛?026-06-10 杩佺Щ锛?=== */
.tiptap-content {
  outline: none;
  min-height: 78px;
}

.tiptap-content > *:first-child {
  margin-top: 0;
}

.tiptap-content > *:last-child {
  margin-bottom: 0;
}

.tiptap-content p {
  margin: 0 0 11px;
}

.tiptap-content p:last-child {
  margin-bottom: 0;
}

.tiptap-content h1,
.tiptap-content h2,
.tiptap-content h3,
.tiptap-content h4 {
  margin: 10px 0 6px;
  font-weight: 650;
  line-height: 1.3;
}

.tiptap-content h1 { font-size: 19px; }
.tiptap-content h2 { font-size: 16px; }
.tiptap-content h3 { font-size: 14px; }
.tiptap-content h4 { font-size: 13px; }

.tiptap-content blockquote {
  margin: 8px 0;
  padding: 6px 12px;
  border-left: 3px solid var(--line-strong);
  background: rgba(244, 246, 247, 0.6);
  color: var(--muted);
  font-style: italic;
  border-radius: 0 4px 4px 0;
}

.tiptap-content ul,
.tiptap-content ol {
  margin: 4px 0 8px;
  padding-left: 22px;
  list-style-position: outside;
}

.tiptap-content li {
  margin: 6px 0;
  padding-left: 2px;
}

.tiptap-content li p {
  margin: 0;
}

.tiptap-content a {
  color: var(--blue);
  text-decoration: underline;
}

.tiptap-content mark,
.tiptap-content [data-highlight] {
  padding: 1px 2px;
  border-radius: 2px;
}

/* Tiptap 缂栬緫鍣ㄤ负绌烘椂鏄剧ず placeholder */
.rich-text-editor.is-empty .tiptap-content::before {
  content: attr(data-placeholder);
  color: rgba(32, 36, 33, 0.35);
  font-size: 12px;
  font-weight: 400;
  pointer-events: none;
  position: absolute;
  top: 9px;
  left: 10px;
}

.rich-text-editor {
  position: relative;
}

/* 宸ュ叿鏍忔寜閽?active 鐘舵€?*/
.rich-text-toolbar button.is-active {
  background: var(--toolbar-chip-active, rgba(244, 246, 245, 0.92));
  color: var(--text);
}

/* === 2026-06-11 瑙嗚鍗囩骇锛氬叏灞€寮ユ暎鍏夋枒鑳屾櫙灞傦紙Soft UI / Glassmorphism锛?=== */
/* 瀹瑰櫒锛氶摵婊″叏灞忥紝鍥哄畾鍦ㄦ渶搴曞眰锛屼笉鎺ユ敹浠讳綍鎸囬拡浜嬩欢 */
#ambient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;  /* 鍦?body::before(-2) 鍜?body::after(-1) 涔嬩笅 */
  pointer-events: none;  /* 鍏抽敭锛氱粷涓嶈兘閬尅涓婇潰浠讳綍鐐瑰嚮 */
  overflow: hidden;
}

/* 鍏夋枒閫氱敤鏍峰紡锛氱粷瀵瑰畾浣嶃€佸渾褰€佹瀬鑷磋櫄鍖?*/
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(86px);
  opacity: 0.42;
}

/* 鍏夋枒 1锛氬乏涓婅 - 钖勮嵎缁?*/
.ambient-orb--mint {
  width: 34vw;
  height: 34vw;
  top: -10%;
  left: -8%;
  background: radial-gradient(circle, rgba(168, 213, 196, 0.6) 0%, rgba(168, 213, 196, 0) 70%);
}

/* 鍏夋枒 2锛氬彸涓婅 - 娴呮箹钃?*/
.ambient-orb--sky {
  width: 32vw;
  height: 32vw;
  top: -5%;
  right: -10%;
  background: radial-gradient(circle, rgba(173, 204, 230, 0.55) 0%, rgba(173, 204, 230, 0) 70%);
}

/* 鍏夋枒 3锛氬乏涓嬭 - 鏋佹贰鏆栨 */
.ambient-orb--peach {
  width: 34vw;
  height: 34vw;
  bottom: -12%;
  left: -6%;
  background: radial-gradient(circle, rgba(244, 207, 184, 0.5) 0%, rgba(244, 207, 184, 0) 70%);
}

/* 鍏夋枒 4锛氬彸涓嬭 - 娴呰柊琛ｈ崏绱紙澧炲己绌洪棿绾垫繁锛?*/
.ambient-orb--lavender {
  width: 30vw;
  height: 30vw;
  bottom: -8%;
  right: -8%;
  background: radial-gradient(circle, rgba(206, 195, 224, 0.45) 0%, rgba(206, 195, 224, 0) 70%);
}

/* Keep the interactive workspace above the ambient mesh layer. */
.app-shell {
  position: relative;
  z-index: 1;
}
/* =========================================
   UI 视觉升级 4.0：红黄灰晨曦水彩 + 左栏高透
   ========================================= */

/* 1. 底色：冰霜灰/极浅薄荷白 (欢快又克制) */
body, html {
  background-color: #EBF1F4 !important; 
}

/* 2. 重塑布局空间：保留四周留白，绝不修改系统原有间距 */
.app-shell {
  background-color: transparent !important; 
}
.workspace-grid {
  background-color: transparent !important;
  padding: 0 var(--workspace-grid-padding-x) var(--workspace-grid-padding-bottom) var(--workspace-grid-padding-x) !important;
}

/* 3. 背景大容器与顶部克制曲线 */
#ambient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0; 
  pointer-events: none; 
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M -10 15 Q 30 40, 80 -10' fill='none' stroke='%2394A3B8' stroke-width='0.15' stroke-opacity='0.4'/%3E%3Cpath d='M 110 25 Q 60 5, 20 -10' fill='none' stroke='%2394A3B8' stroke-width='0.1' stroke-opacity='0.3'/%3E%3Cpath d='M -10 80 Q 40 105, 110 70' fill='none' stroke='%2394A3B8' stroke-width='0.15' stroke-opacity='0.2'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* 4. 水彩晕染光斑：红、黄(奶黄)、灰，左暖右冷 */
.ambient-orb {
  position: absolute;
  /* 鹅卵石般的不规则形状，交叠更自然 */
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  filter: blur(140px); /* 极度模糊，呈现水彩散开的效果 */
  opacity: 0.55; /* 略微提升一点浓度，配合左侧的高透玻璃 */
  animation: float-orb 18s infinite alternate ease-in-out;
}

.ambient-orb--mint {
  /* 【奶黄】靠左中位置，温暖柔和的大面积底色 */
  width: 55vw; height: 50vw;
  background-color: #FDE68A; /* 柔和奶黄 Amber 200 */
  top: 15vh; left: -10vw;
  animation-duration: 22s;
}

.ambient-orb--sky {
  /* 【克制红】靠左上角，与奶黄交融产生霞光般的渐变 */
  width: 50vw; height: 55vw;
  background-color: #FDA4AF; /* 温暖珊瑚红/蜜桃色 */
  top: -15vw; left: 5vw;
  animation-duration: 16s;
  animation-delay: -5s; 
}

.ambient-orb--peach {
  /* 【高级灰】偏右侧和底部，平衡左侧的暖色，提供工作台的克制感 */
  width: 60vw; height: 55vw;
  background-color: #94A3B8; /* 质感冷灰 Slate 400 */
  bottom: -10vw; right: -5vw;
  animation-duration: 20s;
  animation-delay: -10s;
}

/* 隐藏多余光斑 */
.ambient-orb--lavender {
  display: none !important;
}

@keyframes float-orb {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(6%, 8%) scale(1.15) rotate(10deg); }
}

/* =========================================
   UI 视觉升级 5.0：纯净四色不规则分区（防脏色）+ 左栏高透
   ========================================= */

/* 1. 底色：冰霜灰/极浅薄荷白 */
body, html {
  background-color: #EBF1F4 !important; 
}

/* 2. 重塑布局空间：保留四周留白，绝不修改系统原有间距 */
.app-shell {
  background-color: transparent !important; 
}
.workspace-grid {
  background-color: transparent !important;
  padding: 0 var(--workspace-grid-padding-x) var(--workspace-grid-padding-bottom) var(--workspace-grid-padding-x) !important;
}

/* 3. 背景大容器与顶部克制曲线 */
#ambient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0; 
  pointer-events: none; 
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M -10 15 Q 30 40, 80 -10' fill='none' stroke='%2394A3B8' stroke-width='0.15' stroke-opacity='0.4'/%3E%3Cpath d='M 110 25 Q 60 5, 20 -10' fill='none' stroke='%2394A3B8' stroke-width='0.1' stroke-opacity='0.3'/%3E%3Cpath d='M -10 80 Q 40 105, 110 70' fill='none' stroke='%2394A3B8' stroke-width='0.15' stroke-opacity='0.2'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* 4. 环境光斑：缩小模糊半径，防止颜色过度混合发脏 */
.ambient-orb {
  position: absolute;
  /* 不规则形状，呈现自然水彩边缘 */
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  /* 【关键】降低模糊值到 90px，保持中心颜色纯净，仅边缘羽化 */
  filter: blur(90px); 
  opacity: 0.6; /* 适当提升不透明度，凸显色彩分区 */
  animation: float-orb 20s infinite alternate ease-in-out;
}

/* 【左上角】：奶黄（面积适中） */
.ambient-orb--mint {
  width: 55vw; height: 50vh;
  background-color: #FDE68A; /* 柔和奶黄 */
  top: -10vh; left: -5vw;
  animation-duration: 22s;
}

/* 【左下角】：浅红（瘦高形，往上轻微延伸） */
.ambient-orb--peach {
  width: 45vw; height: 60vh;
  background-color: #FDA4AF; /* 克制珊瑚红 */
  bottom: -5vh; left: -5vw;
  animation-duration: 18s;
  animation-delay: -3s;
}

/* 【右上角】：天蓝（面积偏大，扁平形覆盖顶部） */
.ambient-orb--sky {
  width: 65vw; height: 45vh;
  background-color: #BAE6FD; /* 清澈天蓝 */
  top: -5vh; right: -10vw;
  animation-duration: 25s;
  animation-delay: -7s; 
}

/* 【右下角】：高级灰（重新启用，大面积垫底） */
.ambient-orb--lavender {
  display: block !important; /* 唤醒第四个光斑 */
  width: 50vw; height: 55vh;
  background-color: #CBD5E1; /* 明快的高级浅灰 Slate 300 */
  bottom: -10vh; right: -5vw;
  animation-duration: 20s;
  animation-delay: -12s;
}

/* 【关键】收敛动画幅度，让它们只在原地“呼吸”，绝不互相乱跑串色 */
@keyframes float-orb {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(2%, 3%) scale(1.05) rotate(5deg); }
}

/* =========================================
   UI 视觉升级 7.0：低饱和四色 + 动态漂浮弧线（伪随机效果）
   ========================================= */

/* 1. 底色：冰霜灰/极浅薄荷白 */
body, html {
  background-color: #EBF1F4 !important; 
}

/* 2. 重塑布局空间 */
.app-shell {
  background-color: transparent !important; 
}
.workspace-grid {
  background-color: transparent !important;
  padding: 0 var(--workspace-grid-padding-x) var(--workspace-grid-padding-bottom) var(--workspace-grid-padding-x) !important;
}

/* 3. 背景大容器与【动态漂流弧线】 */
#ambient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0; 
  pointer-events: none; 
  overflow: hidden;
  
  /* 绘制一组更复杂的、向不同方向发散的优雅弧线 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M -50 100 A 150 150 0 0 1 150 -50' fill='none' stroke='%2394A3B8' stroke-width='0.15' stroke-opacity='0.4'/%3E%3Cpath d='M -20 150 A 180 180 0 0 1 220 50' fill='none' stroke='%2394A3B8' stroke-width='0.1' stroke-opacity='0.3'/%3E%3Cpath d='M 50 250 A 200 200 0 0 0 250 0' fill='none' stroke='%2394A3B8' stroke-width='0.12' stroke-opacity='0.25'/%3E%3Cpath d='M 100 -50 A 160 160 0 0 1 300 150' fill='none' stroke='%2394A3B8' stroke-width='0.08' stroke-opacity='0.2'/%3E%3C/svg%3E");
  
  /* 【关键1】把背景放大到屏幕的 180%，这样有很多线条隐藏在屏幕外 */
  background-size: 180% 180%;
  
  /* 【关键2】加入 90 秒的极慢速动画，让背景在四个角落之间缓慢游移 */
  animation: drift-lines 90s infinite alternate ease-in-out;
}

/* 背景弧线的缓慢游移轨迹（创造每次看都不一样的错觉） */
@keyframes drift-lines {
  0%   { background-position: 0% 0%; }
  33%  { background-position: 100% 50%; }
  66%  { background-position: 50% 100%; }
  100% { background-position: 0% 100%; }
}

/* 4. 环境光斑：低饱和、弱化视觉焦点 */
.ambient-orb {
  position: absolute;
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  filter: blur(90px); 
  opacity: 0.45; /* 保持克制的氛围感 */
  animation: float-orb 20s infinite alternate ease-in-out;
}

/* 【左上角】：奶油黄 */
.ambient-orb--mint {
  width: 55vw; height: 50vh;
  background-color: #EFE9D2; 
  top: -10vh; left: -5vw;
  animation-duration: 22s;
}

/* 【左下角】：灰藕粉 */
.ambient-orb--peach {
  width: 45vw; height: 60vh;
  background-color: #EDD4D8; 
  bottom: -5vh; left: -5vw;
  animation-duration: 18s;
  animation-delay: -3s;
}

/* 【右上角】：莫兰迪蓝 */
.ambient-orb--sky {
  width: 65vw; height: 45vh;
  background-color: #D0DFE8; 
  top: -5vh; right: -10vw;
  animation-duration: 25s;
  animation-delay: -7s; 
}

/* 【右下角】：银钛灰 */
.ambient-orb--lavender {
  display: block !important; 
  width: 50vw; height: 55vh;
  background-color: #D6DBE0; 
  bottom: -10vh; right: -5vw;
  animation-duration: 20s;
  animation-delay: -12s;
}

/* 光斑的呼吸起伏 */
@keyframes float-orb {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(2%, 3%) scale(1.05) rotate(5deg); }
}

/* =========================================
   👑 栏目样式：毛玻璃与分层透明度 (增强透视版)
   ========================================= */

/* 1. 所有主区块：透明度提高 15% (由 0.75 改为 0.60) */
.workspace-grid > div,
.panel {
  background: rgba(255, 255, 255, 0.60) !important; 
  backdrop-filter: blur(24px) saturate(150%) !important; 
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border: none !important; 
  border-radius: 16px !important; 
  overflow: hidden; 
}

/* 2. 【最左侧栏目】透明度极高 (由 0.35 改为 0.20)，让动态弧线完美透出 */
.workspace-grid > div:first-child {
  background: rgba(255, 255, 255, 0.20) !important; 
}

/* =========================================
   🛠️ Bug 修复：强制清除局部工具栏的实色背景
   ========================================= */

/* 修复左侧栏顶部操作条（红框区域）阻挡毛玻璃的 Bug */
/* 尝试通过常见类名匹配清除背景 */
.workspace-grid > div:first-child [class*="toolbar"],
.workspace-grid > div:first-child [class*="header"],
.workspace-grid > div:first-child [class*="action"],
.workspace-grid > div:first-child [class*="tool-bar"],
.workspace-grid > div:first-child > div > div:first-child {
  background-color: transparent !important;
  background: transparent !important;
}

/* 顶部整体导航栏透明化 */
.topbar {
  background: transparent !important;
  border-bottom: none !important;
}

/* =========================================
   Auth gate + cloud save status
   ========================================= */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(245, 246, 244, 0.72);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.auth-gate[hidden] {
  display: none;
}

.auth-gate-card {
  position: relative;
  width: min(360px, 100%);
  padding: 30px 34px 28px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: 0 18px 54px rgba(32, 36, 33, 0.09);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.auth-dev-trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(32, 36, 33, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.auth-dev-trigger:hover,
.auth-dev-trigger:focus-visible {
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  outline: 0;
}

.auth-gate-copy {
  margin: 4px 0 22px;
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.auth-provider-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 48px;
}

.auth-provider-list[data-selected] {
  /* 选中态：剩下的 1 个图标居中显示（其他被 JS hidden 属性隐藏） */
  justify-content: center;
}

.auth-provider-option {
  position: relative;
  display: inline-grid;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(49, 74, 99, 0.86);
  cursor: not-allowed;
  flex: 0 0 48px;
}

/* 让 HTML hidden 属性 = display:none 真正生效（覆盖上方的 inline-grid） */
.auth-provider-option[hidden] {
  display: none;
}

.auth-provider-list[data-selected] .auth-provider-option[data-current] {
  filter: drop-shadow(0 10px 18px rgba(50, 105, 255, 0.22));
  animation: authProviderEnter 0.22s ease;
}

@keyframes authProviderEnter {
  from { transform: scale(0.92); }
  to { transform: scale(1); }
}

.auth-provider-option.is-enabled {
  color: #3370ff;
  cursor: pointer;
}

.auth-provider-option.is-disabled {
  cursor: not-allowed;
}

.auth-provider-option.is-enabled:hover,
.auth-provider-option.is-enabled:focus-visible {
  transform: translateY(-1px);
  outline: 0;
}

.auth-provider-option.is-enabled:hover .auth-provider-logo,
.auth-provider-option.is-enabled:focus-visible .auth-provider-logo {
  filter: drop-shadow(0 10px 12px rgba(50, 105, 255, 0.18));
  transform: scale(1.04);
}

.auth-provider-option:disabled {
  opacity: 1;
}

.auth-provider-logo {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: rgba(49, 74, 99, 0.74);
  filter: drop-shadow(0 7px 9px rgba(32, 36, 33, 0.14));
  transition: transform 0.14s ease, filter 0.14s ease, opacity 0.14s ease;
}

.auth-provider-logo img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transition: transform 0.14s ease;
}

.auth-provider-logo--password img {
  transform: scale(0.98);
}

.auth-provider-logo--feishu img {
  transform: scale(0.88);
}

.auth-provider-logo--mail img {
  transform: scale(0.96);
}

.auth-provider-logo--wechat img {
  transform: scale(1.04);
}

.auth-provider-logo--phone img {
  transform: scale(1.02);
}

.auth-provider-logo--feishu {
  filter: drop-shadow(0 8px 10px rgba(51, 112, 255, 0.18));
}

.auth-provider-option.is-disabled .auth-provider-logo,
.auth-provider-option.is-disabled .auth-provider-logo--wechat {
  color: rgba(49, 74, 99, 0.38);
  opacity: 0.42;
  filter: grayscale(1) saturate(0.25) drop-shadow(0 5px 7px rgba(32, 36, 33, 0.06));
}

.auth-status-note {
  margin: 18px 0 0;
  padding: 7px 10px;
  border: 1px solid rgba(49, 74, 99, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.5);
  color: rgba(49, 74, 99, 0.68);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

.auth-status-note[hidden] {
  display: none;
}

.auth-retry-link {
  display: block;
  margin: 10px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.auth-retry-link:hover,
.auth-retry-link:focus-visible {
  color: var(--text);
  outline: 0;
}

.auth-guest-link {
  display: block;
  margin: 16px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(49, 74, 99, 0.7);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

.auth-guest-link:hover,
.auth-guest-link:focus-visible {
  color: var(--text);
  outline: 0;
}

.auth-guest-link[hidden] {
  display: none;
}

.auth-password-form {
  display: grid;
  gap: 11px;
  margin-top: 18px;
}

.auth-password-form[hidden] {
  display: none;
}

.auth-password-title {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.auth-password-hint {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}

.auth-password-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.auth-password-form label[hidden] {
  display: none;
}

.auth-password-form input {
  height: 34px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid rgba(32, 36, 33, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 13px;
}

.auth-password-form input:focus {
  border-color: rgba(49, 74, 99, 0.38);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(49, 74, 99, 0.1);
}

.auth-password-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
}

.auth-password-actions .ghost-button,
.auth-password-actions .primary-button {
  height: 28px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.auth-password-back {
  display: inline-block;
  margin: 6px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(49, 74, 99, 0.7);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  text-align: center;
}

.auth-password-back:hover,
.auth-password-back:focus-visible {
  color: var(--text);
  outline: 0;
}

/* 通用"返回登入方式"按钮：给飞书 / 暂未上线的 provider 共用 */
.auth-gate-back {
  display: block;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(49, 74, 99, 0.7);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  text-align: center;
}

.auth-gate-back[hidden] {
  display: none;
}

.auth-gate-back:hover,
.auth-gate-back:focus-visible {
  color: var(--text);
  outline: 0;
}

.auth-email-form {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.auth-email-form[hidden] {
  display: none;
}

.auth-email-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.auth-email-form input {
  height: 34px;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid rgba(32, 36, 33, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 13px;
}

.auth-email-form input:focus {
  border-color: rgba(49, 74, 99, 0.38);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(49, 74, 99, 0.1);
}

.auth-email-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.auth-email-code-row .ghost-button,
.auth-email-form .primary-button {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  white-space: nowrap;
}

.auth-dev-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 20px;
}

.auth-dev-form[hidden] {
  display: none;
}

.auth-dev-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.auth-dev-form input {
  height: 28px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid rgba(32, 36, 33, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 14px;
}

.auth-dev-form input:focus {
  border-color: rgba(49, 74, 99, 0.38);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(49, 74, 99, 0.1);
}

.app-shell.is-auth-locked {
  opacity: 0.18;
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

.cloud-save-status {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(78, 84, 90, 0.72);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.cloud-save-status[data-status="saving"],
.cloud-save-status[data-status="loading"] {
  color: rgba(49, 74, 99, 0.78);
  background: transparent;
}

.cloud-save-status[data-status="saved"],
.cloud-save-status[data-status="idle"] {
  color: var(--green);
}

.cloud-save-status[data-status="error"],
.cloud-save-status[data-status="conflict"] {
  color: rgba(189, 91, 83, 0.82);
  background: transparent;
}

/* =========================================
   Top-left hover glass panel + modal
   ========================================= */

.top-left-hover-panel {
  position: fixed;
  top: var(--space-12);
  left: calc(var(--space-24) + var(--panel-overlap) - 6px);
  z-index: 32;
  display: flex;
  align-items: center;
  width: 298px;
  height: var(--control-height);
  pointer-events: auto;
}

.hover-user-avatar-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  flex: 0 0 var(--control-height);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hover-user-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
}

.hover-user-avatar {
  width: var(--control-height);
  height: var(--control-height);
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 2px 4px 12px rgba(15, 23, 42, 0.15);
  box-sizing: border-box;
}

.hover-user-status-dot {
  position: absolute;
  right: 2px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.16);
}

.hover-user-indicator {
  position: absolute;
  top: 50%;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 18px;
  color: rgba(49, 74, 99, 0.6);
  transform: translateY(-50%);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease,
    color 0.2s ease;
}

.hover-user-indicator-core {
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: translateX(-1px) rotate(45deg);
}

.hover-glass-panel,
.toolbar-container {
  position: absolute;
  top: 0;
  left: calc(var(--control-height) - 11px);
  display: inline-flex;
  width: auto;
  height: var(--control-height);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  align-items: center;
  transform: translateX(-8px);
  transform-origin: left center;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}

.toolbar-container {
  isolation: isolate;
}

.toolbar-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  height: var(--control-height);
  padding: 0 24px 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
  pointer-events: auto;
}

.top-left-hover-panel:hover .hover-glass-panel,
.top-left-hover-panel:focus-within .hover-glass-panel,
.top-left-hover-panel:hover .toolbar-container,
.top-left-hover-panel:focus-within .toolbar-container {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.top-left-hover-panel:hover .hover-user-indicator,
.top-left-hover-panel:focus-within .hover-user-indicator {
  opacity: 0;
  transform: translateY(-50%) translateX(4px) rotate(90deg);
}

.hover-user-avatar-button:hover .hover-user-avatar,
.hover-user-avatar-button:focus-visible .hover-user-avatar {
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: 2px 4px 12px rgba(15, 23, 42, 0.15);
}

.hover-user-avatar-button:focus-visible,
.hover-panel-tab:focus-visible {
  outline: 0;
}

.hover-panel-tab-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hover-panel-tab {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(15, 23, 42, 0.8);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.hover-panel-tab .material-symbols-outlined {
  font-size: 13px;
  line-height: 1;
  font-variation-settings:
    "FILL" 0,
    "wght" 420,
    "GRAD" 0,
    "opsz" 20;
}

.hover-panel-tab:hover,
.hover-panel-tab:focus-visible,
.hover-user-avatar-button:hover,
.hover-user-avatar-button:focus-visible {
  color: rgba(15, 23, 42, 0.96);
}

.hover-panel-tab:hover,
.hover-panel-tab:focus-visible {
  background: rgba(15, 23, 42, 0.05);
}

.hover-panel-tab.is-active,
.hover-panel-tab[aria-selected="true"] {
  background: var(--green);
  color: #fff;
}

.hover-panel-tab.is-active:hover,
.hover-panel-tab[aria-selected="true"]:hover {
  background: var(--green-strong);
  color: #fff;
}

.hover-modal-section {
  display: grid;
  gap: 12px;
}

.hover-modal-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hover-modal-section__title {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
}

.hover-modal-section__meta {
  color: rgba(15, 23, 42, 0.52);
  font-size: 12px;
}

.hover-modal-note {
  margin: 0;
  color: rgba(15, 23, 42, 0.74);
  font-size: 13px;
  line-height: 1.6;
}

.hover-achievement-showcase,
.hover-ranking-list {
  display: grid;
  gap: 10px;
}

.hover-coming-soon {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 180px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.46);
  color: rgba(15, 23, 42, 0.7);
  text-align: center;
}

.hover-coming-soon .material-symbols-outlined {
  color: #0d9488;
  font-size: 30px;
}

.hover-coming-soon strong {
  color: #0f172a;
  font-size: 18px;
}

.hover-coming-soon p {
  margin: 0;
  font-size: 13px;
}

.hover-achievement-card,
.hover-ranking-item,
.hover-badge-card {
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.hover-achievement-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.hover-achievement-card__title,
.hover-ranking-item__name,
.hover-badge-card__title {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.hover-achievement-card__desc,
.hover-ranking-item__desc,
.hover-badge-card__desc {
  color: rgba(15, 23, 42, 0.68);
  font-size: 13px;
  line-height: 1.55;
}

.hover-achievement-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hover-achievement-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: rgba(15, 23, 42, 0.72);
  font-size: 12px;
}

.hover-achievement-metric strong {
  color: #0f172a;
  font-size: 13px;
}

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

.hover-badge-card {
  display: grid;
  gap: 6px;
  padding: 14px 12px;
  text-align: center;
}

.hover-badge-card .material-symbols-outlined {
  color: #0d9488;
  font-size: 22px;
}

.hover-badge-card.is-active {
  border-color: rgba(13, 148, 136, 0.28);
  background: rgba(13, 148, 136, 0.08);
}

.hover-ranking-item {
  display: grid;
  grid-template-columns: 28px 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
}

.hover-ranking-item__avatar,
.hover-ranking-item__avatar--placeholder {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hover-ranking-item__avatar--placeholder {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hover-ranking-item__order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.72);
  font-size: 12px;
  font-weight: 700;
}

.hover-ranking-item__body {
  display: grid;
  gap: 4px;
}

.hover-ranking-item__value {
  min-width: 32px;
  color: #0d9488;
  font-size: 18px;
  font-weight: 800;
  text-align: right;
}

.hover-panel-modal-overlay[hidden] {
  display: none;
}

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

.hover-panel-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hover-panel-modal {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.14);
  animation: hover-panel-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-panel-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 0;
}

.hover-panel-modal-title {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.hover-panel-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(15, 23, 42, 0.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.hover-panel-modal-close:hover,
.hover-panel-modal-close:focus-visible {
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.92);
  outline: 0;
}

.hover-panel-modal-body {
  display: grid;
  gap: 16px;
  padding: 20px 24px 24px;
  color: #1e293b;
}

.hover-profile-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.hover-profile-card__avatar-button {
  position: relative;
  display: inline-flex;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.hover-profile-card__avatar {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  box-sizing: border-box;
}

.hover-profile-card__camera {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(13, 148, 136, 0.92);
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.14);
}

.hover-profile-card__camera .material-symbols-outlined {
  font-size: 15px;
  line-height: 1;
}

.hover-profile-card__meta {
  display: grid;
  gap: 6px;
}

.hover-profile-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hover-profile-card__name {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
}

.hover-profile-edit-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: rgba(15, 23, 42, 0.78);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.hover-profile-edit-button .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}

.hover-profile-edit-button:hover {
  background: rgba(255, 255, 255, 0.84);
  color: rgba(15, 23, 42, 0.95);
}

.hover-profile-card__role,
.hover-profile-card__email,
.hover-profile-card__id,
.hover-feed-card__meta,
.hover-friends-list__status {
  color: rgba(15, 23, 42, 0.68);
  font-size: 13px;
  line-height: 1.5;
}

.hover-profile-card__id strong {
  color: rgba(15, 23, 42, 0.86);
  font-weight: 700;
}

.hover-profile-card__account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  color: rgba(15, 23, 42, 0.62);
  font-size: 12px;
  line-height: 1.5;
}

.hover-profile-account-action {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.hover-friends-list {
  display: grid;
  gap: 10px;
}

.hover-friend-search__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.hover-friend-search__form input {
  height: 34px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #0f172a;
  font-size: 13px;
}

.hover-social-list,
.hover-friend-search__results {
  display: grid;
  gap: 10px;
}

.hover-social-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
}

.hover-mini-user {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.hover-mini-user img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
}

.hover-mini-user div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hover-mini-user strong,
.hover-mini-user span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hover-mini-user strong {
  color: #0f172a;
  font-size: 13px;
}

.hover-mini-user span,
.hover-social-pill,
.hover-social-subtitle,
.hover-social-note,
.hover-empty-state {
  color: rgba(15, 23, 42, 0.62);
  font-size: 12px;
}

.hover-social-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.hover-social-pill,
.hover-social-note,
.hover-empty-state {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.05);
}

.hover-social-subtitle {
  margin-top: 4px;
  font-weight: 700;
}

.hover-ranking-tabs {
  display: inline-flex;
  width: fit-content;
  padding: 3px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
}

.hover-ranking-tab {
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(15, 23, 42, 0.62);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.hover-ranking-tab.is-active {
  background: rgba(255, 255, 255, 0.82);
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.hover-ranking-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.hover-friends-list__item,
.hover-feed-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.hover-friends-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hover-friends-list__name,
.hover-feed-card__title {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
}

.hover-friends-list__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.hover-friends-list__badge.is-online {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.hover-friends-list__badge.is-offline {
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
}

.hover-feed-card__text {
  color: rgba(15, 23, 42, 0.82);
  font-size: 13px;
  line-height: 1.6;
}

.profile-edit-dialog .form-card {
  width: min(520px, calc(100vw - 32px));
}

.profile-edit-dialog label {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.profile-edit-dialog input,
.profile-edit-dialog textarea {
  font-weight: 400;
}

@keyframes hover-panel-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ===== 中间栏点击工具浮窗 =====
   设计方案：点击 toggle 开关浮窗 + 外部点击关闭 + ESC 关闭。
   不再用 hover 触发，原因是浮窗位于 panel 顶部向上延伸，会被 topbar 遮挡大半，
   鼠标从 toggle 移到浮窗必然穿过 topbar / panel-header，导致 hover 必然断开。
   点击方案彻底消除 hover 间隙问题：用户先点 toggle，再点浮窗里的按钮。 */

/* 触发器（button）：grid-column: 2 + z-index 高（100），可见于所有面板之上。
   用 body .workspace-grid > .content-toolbar-popover-toggle 这种链式选择器（注意是 <button> 不是 <div>），
   vite 压缩不会剥父选择器。 */
body .workspace-grid > .content-toolbar-popover-toggle {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  z-index: 100;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: rgba(32, 36, 33, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
  /* 覆盖 .workspace-grid > div 的 !important 规则 */
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.workspace-grid > .content-toolbar-popover-toggle .material-symbols-outlined {
  font-size: 13px;
  line-height: 1;
  transition: font-size 0.14s ease;
}

.workspace-grid > .content-toolbar-popover-toggle:hover,
.workspace-grid > .content-toolbar-popover-toggle:focus-visible {
  background: #ffffff;
  color: #000000;
}

.workspace-grid > .content-toolbar-popover-toggle:hover .material-symbols-outlined,
.workspace-grid > .content-toolbar-popover-toggle:focus-visible .material-symbols-outlined {
  font-size: 16px;
}

/* Open 态：黑底白点，强烈反差，明确"已打开" */
.workspace-grid > .content-toolbar-popover-toggle[aria-expanded="true"] {
  background: #000000;
  color: #ffffff;
}

.workspace-grid > .content-toolbar-popover-toggle[aria-expanded="true"] .material-symbols-outlined {
  font-size: 16px;
}

/* 定位锚点：
   - grid-column: 2 + justify-self: center，让浮窗相对中间栏水平居中。
   - width/height = 0，本身不占视觉空间，仅作为浮窗的定位参考。
   - position: relative，让内部浮窗可以用 absolute 相对它定位。
   - z-index: 3，让浮窗底部被中间栏盖住，呈现"从中间栏内向上滑出"的效果。
   - 同样覆盖 .workspace-grid > div 的 !important 规则。
   - JS 通过 toggle .is-open 类控制浮窗显示/隐藏。 */
body .workspace-grid > div.content-toolbar-popover-anchor {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  position: relative;
  width: 0;
  height: 0;
  z-index: 3;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

/* 浮窗样式：position: absolute 相对 anchor。
   anchor 宽 0 高 0、位于中间栏水平中心，所以 left: 0 + transform: translateX(-50%) 让浮窗相对中间栏居中。
   bottom: -14px 让浮窗底部深入中间栏 14px（anchor 高度为 0，bottom: -14px = 14px 低于 anchor 底 = 14px 低于中间栏顶）。
   视觉风格跟左上角 toolbar-content 一致：纯白半透明 + 玻璃模糊，不绑主题色（避免主窗口切换时颜色变化太重）。 */
body .workspace-grid .content-toolbar-popover-anchor > .content-toolbar-popover {
  position: absolute;
  bottom: -14px;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px 8px;
  background: rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(-50%);
  /* 初始：从顶部向下 100% 裁切，可见区域高度为 0，浮窗完全不可见 */
  clip-path: inset(100% 0 0 0);
  transition:
    clip-path 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.16s ease,
    visibility 0s linear 0.4s;
  overflow: visible !important;
}

/* 点击展开状态：JS 给 anchor 加 .is-open，浮窗从底部一行一行向上"剪开"露出。
   用 body .workspace-grid 前缀提升 specificity 到 (0,4,1) > 默认规则 (0,3,1)。 */
body .workspace-grid .content-toolbar-popover-anchor.is-open > .content-toolbar-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.16s ease,
    visibility 0s linear 0s;
}

/* 按钮 1：保留原主窗口切换的"文字 + 滑动开关"样式（缩小版） */
.content-toolbar-popover-rotate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 12px;
  height: 28px;
  border: 0;
  background: transparent;
  color: rgba(32, 36, 33, 0.62);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.14s ease, background-color 0.14s ease;
}

.content-toolbar-popover-rotate:hover,
.content-toolbar-popover-rotate:focus-visible {
  color: var(--accent-deep);
  background: rgba(32, 36, 33, 0.06);
}

.content-toolbar-popover-switch {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 14px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(224, 228, 230, 0.96) 0%, rgba(202, 208, 211, 0.96) 48%, rgba(190, 198, 202, 0.94) 100%),
    rgba(220, 226, 230, 0.92);
  box-shadow:
    inset 0 1px 2px rgba(35, 45, 52, 0.18),
    inset 0 -1px 1px rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(35, 45, 52, 0.08);
}

/* 切换主窗口的开关：样式和 toggle-item.is-on 保持一致（圆点=主题色，轨道=浅色）。
   rotate 是状态指示器，不切 .is-on class，所以默认就是这个"激活"状态。 */
body .workspace-grid .content-toolbar-popover-rotate .content-toolbar-popover-switch {
  background:
    linear-gradient(180deg, rgba(224, 228, 230, 0.96) 0%, rgba(202, 208, 211, 0.96) 48%, rgba(190, 198, 202, 0.94) 100%),
    rgba(220, 226, 230, 0.92);
  box-shadow:
    inset 0 1px 2px rgba(35, 45, 52, 0.18),
    inset 0 -1px 1px rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(35, 45, 52, 0.08);
}

/* rotate 圆点：主题色 + 滑到右边（常驻"激活"视觉） */
body .workspace-grid .content-toolbar-popover-rotate .content-toolbar-popover-switch-thumb {
  background: rgba(var(--knowledge-theme-rgb), 0.95);
  transform: translateX(10px);
}

/* rotate 在任务栏时，圆点换任务色 */
body .workspace-grid.is-task-center .content-toolbar-popover-rotate .content-toolbar-popover-switch-thumb {
  background: rgba(var(--task-theme-rgb), 0.95);
}

.content-toolbar-popover-switch-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--switch-thumb-color, rgba(255, 255, 255, 0.95));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(35, 45, 52, 0.22);
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 按钮 2、3：左侧文字 + 右侧滑动开关 */
.content-toolbar-popover-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 12px;
  height: 28px;
  border: 0;
  background: transparent;
  color: rgba(32, 36, 33, 0.58);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.14s ease, background-color 0.14s ease;
}

.content-toolbar-popover-toggle-item-label {
  display: inline-block;
}

.content-toolbar-popover-toggle-item:hover,
.content-toolbar-popover-toggle-item:focus-visible {
  color: var(--accent-deep);
  background: rgba(32, 36, 33, 0.06);
}

/* Off 模式：开关轨道灰色 */
.content-toolbar-popover-toggle-item .content-toolbar-popover-switch {
  background:
    linear-gradient(180deg, rgba(224, 228, 230, 0.96) 0%, rgba(202, 208, 211, 0.96) 48%, rgba(190, 198, 202, 0.94) 100%),
    rgba(220, 226, 230, 0.92);
  box-shadow:
    inset 0 1px 2px rgba(35, 45, 52, 0.18),
    inset 0 -1px 1px rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(35, 45, 52, 0.08);
}

.content-toolbar-popover-toggle-item .content-toolbar-popover-switch-thumb {
  background: rgba(255, 255, 255, 0.98);
}

/* On 模式：track（轨道）保持银底不变，thumb（圆形滑块）变主题色 + 滑到右边。
   颜色变化只发生在圆形按钮上（thumb），让眼睛更聚焦到"开关"本身。
   主题色跟随当前中间栏：知识栏（默认）→ knowledge 色；任务栏 → task 色。 */
.content-toolbar-popover-toggle-item.is-on {
  color: var(--accent-deep);
}

.content-toolbar-popover-toggle-item.is-on .content-toolbar-popover-switch-thumb {
  background: rgba(var(--knowledge-theme-rgb), 0.95);
  transform: translateX(10px);
}

body .workspace-grid.is-task-center .content-toolbar-popover-toggle-item.is-on .content-toolbar-popover-switch-thumb {
  background: rgba(var(--task-theme-rgb), 0.95);
}

/* 窄屏：没有 hover，直接隐藏 */
@media (max-width: 720px) {
  .content-toolbar-popover-anchor {
    display: none;
  }
}

/* ── 广场空状态 ── */
.hover-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}

.hover-coming-soon .material-symbols-outlined {
  font-size: 42px;
  color: var(--accent-sage, #6f8476);
  opacity: 0.7;
}

.hover-coming-soon strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.hover-coming-soon p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
}


/* === 图片预览弹窗（2026-07-08 同步自内网）=== */
.image-preview-dialog {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.image-preview-dialog::backdrop {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(4px);
}
.image-preview-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  cursor: zoom-out;
}
.image-preview-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.18s ease;
  transform-origin: center center;
}
.image-preview-img.is-zoomed {
  cursor: zoom-out;
  transform: scale(2);
}


/* === 任务关联框架 hover 浮窗截断修复（2026-07-08 同步自内网 改动 29 + 30 部分）===
 * 多层容器都有 overflow:hidden/auto，需要用 :has() 在浮窗 hover 时解除截断 */
.task-panel:has(.task-node-more-tag:hover),
.task-panel:has(.task-node-more-tag:focus),
.task-panel:has(.task-node-more-tag:focus-visible) {
  overflow: visible;
}
.task-panel .task-list:has(.task-node-more-tag:hover),
.task-panel .task-list:has(.task-node-more-tag:focus),
.task-panel .task-list:has(.task-node-more-tag:focus-visible) {
  overflow: visible;
}
.panel-scroll-content:has(.task-node-more-tag:hover),
.panel-scroll-content:has(.task-node-more-tag:focus),
.panel-scroll-content:has(.task-node-more-tag:focus-visible) {
  overflow: visible;
}
.dialog:has(.task-node-more-tag:hover),
.dialog:has(.task-node-more-tag:focus),
.dialog:has(.task-node-more-tag:focus-visible) {
  overflow: visible;
}
.dialog > .form-card:has(.task-node-more-tag:hover),
.dialog > .form-card:has(.task-node-more-tag:focus),
.dialog > .form-card:has(.task-node-more-tag:focus-visible) {
  overflow: visible;
}
.card-detail-meta:has(.task-node-more-tag:hover),
.card-detail-meta:has(.task-node-more-tag:focus),
.card-detail-meta:has(.task-node-more-tag:focus-visible) {
  overflow: visible;
}




/* === 图片样式（编辑器 + 预览）=== */
.tiptap-content img,
.rich-editor-img,
.rich-text-content img,
.tiptap img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 6px 0;
  display: block;
}

/* 上传中的占位图片 */
.tiptap-content img[src^="data:image/svg+xml"] {
  opacity: 0.6;
  border: 2px dashed var(--border, #ccc);
  border-radius: 6px;
}

/* === 图片缩放手柄（编辑器内）=== */
.image-resizer {
  position: relative;
  display: block;
  max-width: 100%;
}
.image-resizer img {
  display: block;
  height: auto;
  border-radius: 6px;
  max-width: 100%;
}
.image-resizer.is-selected {
  outline: 2px solid var(--accent, #4a90d9);
  outline-offset: 2px;
}
.image-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: var(--accent, #4a90d9);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}
.image-resizer:hover .image-resize-handle,
.image-resizer.is-selected .image-resize-handle {
  opacity: 1;
}

/* 上传提示 toast */
.rich-editor-upload-toast {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(34, 34, 34, 0.85);
  color: #fff;
  font-size: 12px;
  z-index: 20;
  pointer-events: none;
  animation: fadeOut 0.3s ease-in 2.7s forwards;
}
.rich-editor-upload-error {
  background: rgba(220, 53, 69, 0.92);
}
.rich-editor-upload-warn {
  background: rgba(199, 130, 23, 0.92);
}
@keyframes fadeOut {
  to { opacity: 0; }
}

/* === 开发者后台（2026-07-13 v36 同步，2026-07-14 改为全屏页面模式）=== */
.admin-page {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-page[hidden] {
  display: none !important;
}
.admin-page-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.admin-page-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.admin-page-back {
  flex: 0 0 auto;
}
.admin-page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}
.admin-page-header-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-page-header-right[hidden] {
  display: none !important;
}
.admin-page-main {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 32px 28px 56px;
}

/* 登录态：居中卡片 */
.admin-login {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 60vh;
  padding-top: 8vh;
}
.admin-login[hidden] {
  display: none !important;
}
.admin-login-card {
  width: min(440px, 92vw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(28, 38, 48, 0.06);
}
.admin-login-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}
.admin-login-hint {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.admin-login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.admin-login-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.admin-login-field input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-login-field input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 208, 132, 0.12);
}
.admin-login-error {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid rgba(217, 72, 72, 0.18);
  padding: 8px 10px;
  border-radius: 6px;
}
.admin-login-error[hidden] {
  display: none !important;
}
.admin-login-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* 已登录态：全屏分区 */
.admin-panel {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto;
}
.admin-panel[hidden] {
  display: none !important;
}
.admin-section-header {
  margin-bottom: 14px;
}
.admin-section-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}
.admin-section-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* 6 卡片汇总 */
.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 960px) {
  .admin-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.admin-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
  transition: border-color 0.15s, transform 0.15s;
}
.admin-summary-card:hover {
  border-color: var(--line-strong);
}
.admin-summary-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent);
  background: rgba(0, 208, 132, 0.10);
}
.admin-summary-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.admin-summary-value {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.admin-summary-label {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

/* 用户列表 */
.admin-users-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.admin-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  background: rgba(244, 246, 247, 0.55);
  border-bottom: 1px solid var(--line);
}
.admin-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.admin-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-table tbody tr:hover {
  background: rgba(0, 208, 132, 0.04);
}
.admin-table code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  font-size: 11px;
  background: rgba(244, 246, 247, 0.7);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink);
}
.admin-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.admin-time {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.admin-users-empty {
  margin: 0;
  padding: 32px 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}
.admin-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  margin-right: 4px;
  line-height: 1.4;
  border: 1px solid var(--line);
}
.admin-badge-online {
  background: rgba(0, 208, 132, 0.12);
  color: #128a4f;
  border-color: rgba(0, 208, 132, 0.22);
}
.admin-badge-inactive {
  background: var(--red-soft);
  color: var(--red);
  border-color: rgba(217, 72, 72, 0.22);
}

/* 改密码子弹窗（保留为弹窗：全屏页面下子任务用 dialog 更聚焦） */
.admin-change-password-dialog {
  width: min(440px, 92vw);
}
.admin-change-password-dialog .form-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-change-password-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-change-password-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.admin-change-password-field input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-change-password-field input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 208, 132, 0.12);
}
.admin-change-password-error {
  margin: 0;
  font-size: 12px;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid rgba(217, 72, 72, 0.18);
  padding: 8px 10px;
  border-radius: 6px;
}
.admin-change-password-error[hidden] {
  display: none !important;
}

/* === 富文本编辑器表格（v44：Tiptap Table 扩展）=== */
.rich-text-content table,
.rich-text-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 14px;
  table-layout: fixed;
}
.rich-text-content th,
.rich-text-editor th {
  border: 1px solid #d0d5dd;
  background: #f7f9fc;
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
}
.rich-text-content td,
.rich-text-editor td {
  border: 1px solid #d0d5dd;
  padding: 6px 10px;
  vertical-align: top;
  position: relative;
}
.rich-text-content td > p,
.rich-text-editor td > p,
.rich-text-content th > p,
.rich-text-editor th > p {
  margin: 0;
}
/* 选中单元格高亮（ProseMirror 默认） */
.rich-text-editor .selectedCell {
  background: rgba(25, 118, 210, 0.08);
}
/* 列宽调整手柄：td/th 加 position: relative（v44 bug 3 修复：之前手柄定位到错误祖先） */
.rich-text-editor .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(0, 0, 0, 0.12);
  cursor: col-resize;
  z-index: 10;
}
.rich-text-editor th {
  position: relative;
}
.rich-text-editor .column-resize-handle:hover,
.rich-text-editor td:hover .column-resize-handle,
.rich-text-editor th:hover .column-resize-handle {
  background: rgba(25, 118, 210, 0.4);
}
.rich-text-editor .tableWrapper {
  overflow-x: auto;
}

/* === 表格行列网格选择器（v44：table-grid-picker）===
   注意：用 :not([hidden]) 而非 display: grid 默认值，
   避免 CSS display 覆盖 HTML hidden 属性导致选择器永远显示（v44 bug 1） */
.table-grid-picker {
  display: none;
}
.table-grid-picker:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(8, 22px);
  gap: 2px;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
}
.table-grid-picker .grid-cell {
  width: 22px;
  height: 22px;
  border: 1px solid #d0d5dd;
  background: #f7f9fc;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.1s, border-color 0.1s;
}
.table-grid-picker .grid-cell.is-hover {
  background: #1976D2;
  border-color: #1976D2;
}
.table-grid-picker .table-grid-size {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  color: #667085;
  margin-top: 4px;
}

/* === 表格上下文工具栏（v44：table-context-toolbar）===
   蓝色渐变背景 + 滑入动画；同样用 :not([hidden]) 模式避免 hidden 失效 */
.table-context-toolbar {
  display: none;
}
.table-context-toolbar:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, #e3f0ff, #e8f5e9);
  border: 1px solid #90caf9;
  box-shadow: 0 1px 4px rgba(25, 118, 210, 0.15);
  animation: tableToolbarSlideIn 0.25s ease-out;
}
@keyframes tableToolbarSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.table-context-toolbar button {
  padding: 4px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1976D2;
}
.table-context-toolbar button:hover {
  background: rgba(25, 118, 210, 0.12);
}
.table-context-toolbar .toolbar-divider {
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: rgba(25, 118, 210, 0.25);
}

/* 表格插入器包装 */
.table-inserter-wrap {
  position: relative;
  display: inline-block;
}
.table-inserter-wrap .table-trigger {
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  color: inherit;
}
.table-inserter-wrap .table-trigger:hover {
  background: rgba(0, 0, 0, 0.06);
}