/* 所有规则限定在 ul- 命名空间；页面与文字沿用宿主主题和系统字体。 */
/* 成长页是阅读与管理工具：不另建品牌色、统计卡或地图背景。 */
.ul-root {
  /* Hermes 自定义主题没有统一 dark/light 类；foreground 还可能透明，正文应取 midground。 */
  --ul-surface: var(--background-base, var(--color-background, var(--background, Canvas)));
  --ul-ink: var(--midground, var(--color-foreground, var(--foreground, CanvasText)));
  --ul-border: var(--color-border, color-mix(in srgb, var(--ul-ink) 22%, var(--ul-surface)));
  --ul-muted: var(--color-muted-foreground, color-mix(in srgb, var(--ul-ink) 72%, var(--ul-surface)));
  --ul-ring: var(--color-ring, var(--ul-ink));
  --ul-wash: color-mix(in srgb, var(--ul-ink) 6%, var(--ul-surface));
  /* 浮层统一用同一道阴影；常驻表面只靠边框与色阶分层。 */
  --ul-shadow-pop: 0 16px 48px #0002;
  width: 100%; max-width: 1600px; min-width: 0; margin-inline: auto;
  color: var(--ul-ink); background-color: var(--ul-surface);
  font: 15px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-wrap: anywhere; container: ul-ledger / inline-size;
}
.ul-root *, .ul-root *::before, .ul-root *::after { box-sizing: border-box; }
.ul-root :is(button, input, select) { font: inherit; color: inherit; }
.ul-root button { cursor: pointer; }
.ul-root button:disabled { cursor: not-allowed; opacity: .55; }
.ul-root :is(button, input, select, summary, a, [tabindex]):focus-visible { outline: 2px solid var(--ul-ring); outline-offset: 3px; }
.ul-root :is(h2, h3, h4, h5, p, figure) { margin-top: 0; }
.ul-root :is(h3, h4, h5) { line-height: 1.45; }
.ul-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ul-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ul-page-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 4px 0 22px; }
.ul-eyebrow { display: block; font-size: 11px; letter-spacing: .13em; color: var(--ul-muted); margin-bottom: 6px; }
.ul-title { font-size: 25px; font-weight: 650; line-height: 1.3; margin: 0 0 8px; letter-spacing: -.025em; }
.ul-description { color: var(--ul-muted); font-size: 14px; margin: 0; max-width: 74ch; }
.ul-readonly { font-size: 12px; border: 1px solid var(--ul-border); border-radius: 4px; padding: 3px 9px; white-space: nowrap; color: var(--ul-muted); }
.ul-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; border-bottom: 1px solid var(--ul-border); margin-bottom: 15px; }
.ul-tabs { display: flex; flex-wrap: wrap; min-width: 0; gap: 3px; }
.ul-tab { border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ul-muted) !important; padding: 11px 15px; white-space: nowrap; min-height: 44px; }
.ul-tab:hover { background: var(--ul-wash); }
.ul-tab-on { border-bottom-color: var(--ul-ring); color: inherit !important; font-weight: 650 !important; }
.ul-tab-aux { font-size: 13px !important; }
.ul-access { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 8px; font-size: 13px; }
.ul-toggle { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.ul-toggle input { width: 16px; height: 16px; accent-color: var(--ul-ring); }
.ul-toggle.ul-off { color: var(--ul-muted); cursor: not-allowed; }
.ul-identity { font-size: 12px; color: var(--ul-muted); margin: 8px 0 20px !important; }
.ul-warn, .ul-notice, .ul-scope, .ul-error, .ul-source-status { border: 1px solid var(--ul-border); border-radius: 6px; padding: 10px 13px; font-size: 13px; line-height: 1.65; margin-bottom: 10px; }
.ul-warn, .ul-notice { border-left: 3px solid var(--color-warning, #d9a400); background: color-mix(in srgb, var(--color-warning, #d9a400) 6%, transparent); }
.ul-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-left: 3px solid var(--color-destructive, #e5484d); background: color-mix(in srgb, var(--color-destructive, #e5484d) 6%, transparent); }
.ul-scope, .ul-source-status { background: var(--ul-wash); }
.ul-source-status { border-left: 3px solid var(--ul-ring); }
.ul-empty { padding: 18px 4px; color: var(--ul-muted); font-size: 14px; }
.ul-muted, .ul-caption { color: var(--ul-muted); }
.ul-caption { display: block; font-size: 12px; line-height: 1.6; margin-block: 7px; }
.ul-hint { color: var(--ul-muted); font-size: 12px; font-weight: 400; margin-left: 10px; }
.ul-bad-text { color: var(--color-destructive, #e5484d); }
.ul-time { color: var(--ul-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ul-id { font: 12px/1.7 ui-monospace, "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; color: var(--ul-muted); }
.ul-btn { min-height: 40px; padding: 7px 13px; border: 1px solid var(--ul-border); border-radius: 8px; background: transparent; flex-shrink: 0; line-height: 1.5; }
.ul-btn:hover { border-color: var(--ul-ring); background: var(--ul-wash); }
.ul-btn-small { min-height: 34px; font-size: 12px !important; padding: 5px 10px; }
.ul-btn-primary { background: var(--ul-wash); font-weight: 600 !important; }
.ul-text-btn { border: 0; border-bottom: 1px solid var(--ul-border); border-radius: 0; padding: 3px 0; background: transparent; text-align: left; line-height: 1.5; }
.ul-text-btn:hover { border-bottom-color: var(--ul-ring); }
.ul-input { width: 100%; min-width: 0; min-height: 40px; padding: 7px 10px; border: 1px solid var(--ul-border); background: var(--color-background, transparent); border-radius: 8px; line-height: 1.5; }
.ul-input option { background: var(--ul-surface); color: var(--ul-ink); }
.ul-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 0 0 17px; border-bottom: 1px solid var(--ul-border); }
.ul-filters label { display: flex; flex-direction: column; gap: 4px; flex: 0 1 160px; min-width: 130px; font-size: 12px; color: var(--ul-muted); }
.ul-filters .ul-search { flex: 1 1 240px; }
.ul-filters input, .ul-filters select { font-size: 13px; color: var(--color-foreground, inherit); }
.ul-user-select { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 370px; font-size: 13px; }
.ul-user-select > span { flex-shrink: 0; }
.ul-user-select .ul-input { font-size: 13px; }
.ul-view-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 12px; }
.ul-view-head h3 { margin: 0 0 5px; font-size: 16px; font-weight: 650; }
.ul-view-head > div { min-width: 0; max-width: 100%; }
/* 徽标为类型色填充胶囊：色彩落在数据上；中性态保持边框小片。 */
.ul-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ul-border); font-size: 11px; line-height: 1.7; font-weight: 500; white-space: normal; }
.ul-chip.ul-t-mute { color: var(--ul-muted); background: transparent; }
.ul-t-ok { color: var(--color-success, #30a46c); border-color: currentColor; background: color-mix(in srgb, var(--color-success, #30a46c) 13%, transparent); }
.ul-t-warn { color: var(--color-warning, #d9a400); border-color: currentColor; background: color-mix(in srgb, var(--color-warning, #d9a400) 14%, transparent); }
.ul-t-bad { color: var(--color-destructive, #e5484d); border-color: currentColor; background: color-mix(in srgb, var(--color-destructive, #e5484d) 12%, transparent); }

/* 阅读区和官方 Chat 一样置左、会话置右；高度随内容增长，宿主滚动区不会裁掉历史。 */
.ul-conversations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(235px, 280px); gap: 0; align-items: start; min-width: 0; border: 1px solid var(--ul-border); border-radius: 8px; overflow: hidden; }
.ul-session-side { min-width: 0; border-left: 1px solid var(--ul-border); align-self: stretch; overflow: hidden; }
.ul-side-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 13px; border-bottom: 1px solid var(--ul-border); }
.ul-side-head h3 { font-size: 14px; font-weight: 600; margin: 0; }
.ul-side-hint { margin: 0; padding: 0 13px 8px; font-size: 11px; line-height: 1.7; color: var(--ul-muted); }
.ul-session-entry { position: relative; }
.ul-session-entry .ul-session { padding-bottom: 36px; }
.ul-session-replay { position: absolute; bottom: 9px; right: 12px; font-size: 11px !important; min-height: 24px; color: var(--ul-muted) !important; }
.ul-side-head .ul-user-select { width: 100%; }
.ul-open-session { display: flex; gap: 6px; padding: 12px 12px 3px; }
.ul-open-session .ul-input { min-height: 34px; font-size: 12px; }
.ul-session-count { padding: 8px 13px; color: var(--ul-muted); font-size: 12px; }
.ul-session-list { display: flex; flex-direction: column; max-height: 690px; overflow-y: auto; padding: 3px; scrollbar-gutter: stable; }
.ul-session-side > .ul-empty, .ul-session-side > .ul-error, .ul-session-side > .ul-btn { margin: 10px; }
.ul-session { display: flex; flex-direction: column; gap: 6px; border: 1px solid transparent; border-left: 3px solid transparent; border-bottom-color: var(--ul-border); background: transparent; padding: 13px 11px; text-align: left; width: 100%; border-radius: 3px; }
.ul-session:hover { background: var(--ul-wash); }
.ul-session[aria-pressed="true"] { background: var(--ul-wash); border-left-color: var(--ul-ring); }
.ul-session-title { font-size: 14px; font-weight: 600; }
.ul-session .ul-caption { margin: 0; }
.ul-session-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--ul-muted); }
.ul-session-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: var(--ul-muted); }
.ul-replay { min-width: 0; }
.ul-replay > .ul-view-head { border-bottom: 1px solid var(--ul-border); padding-bottom: 12px; margin-bottom: 12px; }
.ul-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 360px; padding: 30px; text-align: center; border: 1px solid var(--ul-border); border-radius: 8px; }
.ul-welcome h3 { font-size: 19px; margin-bottom: 12px; }
.ul-welcome p { margin-bottom: 8px; font-size: 14px; }
/* 只读 DOM 回放使用已核实的 TUI 色值/角色符号；不启动 PTY，也不伪造宿主历史。 */
.ul-terminal {
  --ul-muted: #b19b72; --ul-ring: #ffbf00; --ul-border: #46391f;
  --ul-wash: #17130c; --ul-tool: #ffbf00; --ul-user: #d9b451;
  --color-destructive: #ef5350; --color-warning: #ffbd38; --color-success: #8fbc8f;
  background: #000; color: #fff8dc; min-height: 520px; padding: 18px 22px;
  font-family: "JetBrains Mono", "Cascadia Mono", "Fira Code", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;
  font-size: 14px; line-height: 1.7;
}
.ul-terminal-tag { display: inline-block; margin-left: 8px; color: var(--ul-muted); font-size: 11px; font-weight: 400; }
.ul-terminal .ul-id { font-family: inherit; }
.ul-terminal .ul-caption { color: var(--ul-muted); }
.ul-terminal .ul-markdown { font: inherit; }
.ul-terminal .ul-markdown :is(h3, h4, h5, h6, th), .ul-terminal .ul-markdown a { color: var(--ul-tool); }
.ul-terminal .ul-markdown code { font-family: inherit; color: var(--ul-tool); }
.ul-terminal .ul-markdown li::marker { color: var(--ul-muted); }
.ul-terminal .ul-code-block { border-color: var(--ul-border); border-radius: 3px; }
.ul-terminal .ul-md-table { font-size: inherit; }
.ul-native { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.ul-native-status { flex: 1 1 260px; margin: 0; font-size: 12px; color: var(--ul-muted); }
.ul-native .ul-btn { color: var(--ul-tool); }
.ul-chat { display: flex; flex-direction: column; gap: 24px; width: 100%; min-width: 0; padding-block: 24px; }
.ul-msg { min-width: 0; width: 100%; max-width: 100%; padding: 0; scroll-margin-block: 80px; }
.ul-msg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 7px; font-size: 12px; color: var(--ul-muted); }
.ul-msg-h strong { font-weight: 400; }
.ul-msg-user .ul-msg-h, .ul-msg-user .ul-markdown { color: var(--ul-user); }
.ul-role-glyph { width: 14px; flex-shrink: 0; font-size: 16px; color: var(--ul-tool); }
.ul-msg-body { padding-left: 26px; min-width: 0; }
.ul-msg-located { outline: 1px solid var(--ul-ring); outline-offset: 6px; }
.ul-msg-body > .ul-muted { font-size: 13px; margin-bottom: 0; }
.ul-response { font-size: 12px; color: var(--ul-muted); margin-bottom: 12px; }
.ul-response > span { color: var(--ul-tool); }
.ul-replay-end { border-top: 1px solid var(--ul-border); padding-top: 13px; }
.ul-attachments { list-style: none; padding: 0; margin: 12px 0 0; }
.ul-attachments li { border-top: 1px solid var(--ul-border); padding: 8px 0; font-size: 12px; }
.ul-attachments strong { font-weight: 600; }
.ul-process { width: 100%; font-size: 13px; color: var(--ul-muted); }
.ul-process > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 0 0 6px; cursor: pointer; line-height: 1.9; list-style: none; }
.ul-process > summary::-webkit-details-marker, .ul-event > summary::-webkit-details-marker { display: none; }
.ul-tree-chevron { color: var(--ul-tool); width: 14px; }
.ul-tree-chevron::before { content: "▸"; }
.ul-process[open] > summary .ul-tree-chevron::before { content: "▾"; }
.ul-execution { list-style: none; padding: 0 0 0 26px; margin: 0; }
.ul-execution > li { display: flex; align-items: baseline; gap: 7px; padding: 3px 0; min-width: 0; }
.ul-tree-branch { flex-shrink: 0; color: var(--ul-muted); white-space: pre; }
.ul-event { min-width: 0; flex: 1; }
/* 长工具参数只在标签内部换行，保留树枝、状态和耗时在同一行的关联。 */
.ul-event > summary { display: flex; align-items: baseline; gap: 6px 10px; cursor: pointer; padding: 3px 0; list-style: none; }
.ul-event > summary > :not(.ul-tool-label) { flex-shrink: 0; }
.ul-tool-mark { color: var(--ul-tool); }
.ul-tool-label { min-width: 0; color: var(--ul-tool); overflow-wrap: anywhere; }
.ul-event-outcome { font-size: 11px; color: var(--ul-muted); }
.ul-event[open] > summary .ul-tool-label { text-decoration: underline; text-underline-offset: 4px; }
.ul-event-kind { color: var(--ul-muted); }
.ul-event-meta { font-size: 12px; color: var(--ul-muted); padding-block: 5px; }
.ul-event-details h5 { font-size: 12px; margin: 10px 0 4px; }
.ul-detail { margin: 0; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; max-height: 420px; background: var(--ul-wash); font: 12px/1.7 ui-monospace, "SFMono-Regular", Consolas, monospace; border: 1px solid var(--ul-border); border-radius: 4px; }

/* Markdown 的边界限定在文本和语义节点；代码/表格单独滚动，不挤出宿主面板。 */
.ul-markdown { min-width: 0; font-size: 14px; line-height: 1.8; }
.ul-markdown p { white-space: pre-wrap; margin: 0 0 10px; }
.ul-markdown > :last-child { margin-bottom: 0; }
.ul-markdown :is(h3, h4, h5, h6) { margin: 15px 0 8px; font-size: 1.05em; font-weight: 650; }
.ul-markdown :is(ul, ol) { padding-left: 24px; margin: 8px 0; }
.ul-markdown li { padding-left: 2px; }
.ul-markdown a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ul-ring); overflow-wrap: anywhere; }
.ul-markdown blockquote, .ul-versions blockquote { border-left: 3px solid var(--ul-border); padding: 4px 13px; margin: 10px 0; color: var(--ul-muted); white-space: pre-wrap; }
.ul-markdown code { font: .9em/1.65 ui-monospace, "SFMono-Regular", Consolas, monospace; background: var(--ul-wash); padding: 2px 4px; border-radius: 3px; }
.ul-code-block { max-width: 100%; border: 1px solid var(--ul-border); border-radius: 5px; overflow: hidden; margin: 12px 0; }
.ul-code-lang { padding: 4px 10px; font-size: 11px; color: var(--ul-muted); background: var(--ul-wash); border-bottom: 1px solid var(--ul-border); }
.ul-code-block pre { margin: 0; overflow-x: auto; padding: 12px; white-space: pre; max-height: 480px; }
.ul-code-block code { padding: 0; background: none; }
.ul-md-table { border-collapse: collapse; width: 100%; min-width: 280px; font-size: 13px; }
.ul-md-table :is(th, td) { text-align: left; padding: 7px 10px; border: 1px solid var(--ul-border); vertical-align: top; }
.ul-md-table th { background: var(--ul-wash); font-weight: 600; }

/* 类型形状在各入口保持一致；颜色由学习工作区提供。 */
.ul-entity-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; font-size: 21px; line-height: 1; font-family: system-ui, sans-serif; color: var(--ul-muted); }

/* 辅助入口保留原有表格列宽和局部横向滚动。 */
.ul-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 10px; }
.ul-stat { border: 1px solid var(--ul-border); border-radius: 6px; padding: 13px; }
.ul-stat-v { font-size: 25px; font-weight: 600; line-height: 1.25; }
.ul-stat-l { color: var(--ul-muted); font-size: 12px; margin-top: 5px; }
.ul-section { min-width: 0; }
.ul-section h3, .ul-audit-head h3 { font-size: 16px; margin: 0 0 12px; font-weight: 600; }
.ul-table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--ul-border); border-radius: 6px; }
.ul-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; line-height: 1.6; }
.ul-table th { text-align: left; font-weight: 500; color: var(--ul-muted); font-size: 12px; padding: 12px 15px; border-bottom: 1px solid var(--ul-border); white-space: nowrap; background: var(--ul-wash); }
.ul-table td { padding: 12px 15px; border-bottom: 1px solid var(--ul-border); vertical-align: middle; overflow-wrap: anywhere; }
.ul-table tr:last-child td { border-bottom: 0; }
.ul-table tbody tr:hover td { background: var(--ul-wash); }
.ul-table .ul-num { text-align: right; font-variant-numeric: tabular-nums; }
/* 健康只有项目和计数两列，窄屏应直接读到数值，不沿用多列表格的最小宽度。 */
.ul-health-table { min-width: 0; table-layout: fixed; }
.ul-health-table .ul-num { width: 28%; }
.ul-audit-table { min-width: 960px; table-layout: fixed; }
.ul-audit-time { width: 190px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ul-audit-actor { width: 120px; }
.ul-audit-via { width: 125px; }
.ul-audit-action { width: 130px; }
.ul-audit-level { width: 105px; white-space: nowrap; }
.ul-audit-result { width: 90px; }

@container ul-ledger (max-width: 1080px) {
  .ul-conversations { grid-template-columns: minmax(0, 1fr) minmax(210px, 240px); }
  .ul-terminal { padding: 16px; }
}
@container ul-ledger (max-width: 720px) {
  .ul-conversations { grid-template-columns: minmax(0, 1fr); }
  .ul-session-list { max-height: 270px; }
  .ul-session-side { order: -1; border-left: 0; border-bottom: 1px solid var(--ul-border); }
  .ul-msg { max-width: 100%; }
  .ul-terminal { font-size: 13px; padding: 16px 12px; }
  .ul-process { width: 100%; }
  .ul-filters label { flex: 1 1 140px; }
  .ul-filters .ul-search { flex-basis: 100%; }
}
@media (max-width: 800px) {
  .ul-conversations { grid-template-columns: minmax(0, 1fr); }
  .ul-session-list { max-height: 270px; }
  .ul-session-side { order: -1; border-left: 0; border-bottom: 1px solid var(--ul-border); }
  .ul-msg { max-width: 100%; }
  .ul-terminal { font-size: 13px; padding: 16px 12px; }
  .ul-process { width: 100%; }
}
@media (max-width: 500px) {
  .ul-title { font-size: 22px; }
  .ul-page-head { gap: 10px; padding-bottom: 16px; }
  .ul-readonly { padding: 2px 6px; }
  .ul-tabs { width: 100%; gap: 0; }
  .ul-tab { flex: 1; padding-inline: 7px; font-size: 13px !important; }
  .ul-access { width: 100%; justify-content: space-between; }
  .ul-filters label { flex: 1 1 130px; }
  .ul-filters .ul-search { flex-basis: 100%; }
  .ul-msg { padding: 0; }
  .ul-msg-body { padding-left: 20px; }
  .ul-execution { padding-left: 12px; }
  .ul-view-head .ul-user-select { width: 100%; max-width: none; }
  .ul-hint { display: block; margin: 4px 0 0; }
}
@media (forced-colors: active) {
  .ul-entity-mark { color: CanvasText; }
}

.ul-root [hidden] { display: none !important; }
/* 交流回顾与学习页共用筛选披露控件，画布与详情样式各自维护。 */
.ul-filter-more { flex: 1 1 100%; font-size: 12px; }
.ul-filter-more > summary { cursor: pointer; padding-block: 5px; }
.ul-filter-more > .ul-row { padding: 9px 0; align-items: end; }
.ul-filter-more label { flex: 1 1 140px; }

/* 历史兼容视图保留旧选择样式；日常手记工作区在文件末尾统一定义。 */
.ul-root:has(.ul-growth-heading), .ul-root:has(.ul-current-section) { max-width: 1280px; }
.ul-root .ul-page-head .ul-title { font-size: 18px; font-weight: 600; }
.ul-page-head nav { justify-content: flex-end; font-size: 13px; }
.ul-page-head a, .ul-growth-entry a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.ul-advanced { margin: 0 0 12px; font-size: 12px; color: var(--ul-muted); }
.ul-advanced > summary { cursor: pointer; width: fit-content; }
.ul-advanced nav { padding-top: 8px; gap: 16px; }
.ul-growth-heading { font-size: 15px; margin: 0; font-weight: 600; }
.ul-growth-filters { gap: 8px; }
.ul-growth-filters > .ul-filter-more { flex: 0 1 auto; }
.ul-growth-filters > .ul-filter-more[open] { flex: 1 1 100%; order: 5; }
.ul-growth-layout { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 24px; align-items: start; }
.ul-growth-has-detail { grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr); }
.ul-growth-list, .ul-current-section { min-width: 0; }
.ul-growth-day { font-size: 12px; font-weight: 500; color: var(--ul-muted); margin: 16px 0 4px; }
.ul-growth-list > div:first-child .ul-growth-day { margin-top: 0; }
.ul-growth-item { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 12px; border: 0; border-bottom: 1px solid var(--ul-border); border-left: 2px solid transparent; border-radius: 0; background: none; }
.ul-growth-item strong { font-size: 14px; font-weight: 500; }
.ul-growth-item .ul-caption { margin: 0; }
.ul-growth-item:hover, .ul-growth-item[aria-expanded="true"] { background: var(--ul-wash); }
.ul-growth-item[aria-expanded="true"] { border-left-color: var(--ul-ring); }
.ul-growth-detail { min-width: 0; padding: 0 0 16px 24px; border-left: 1px solid var(--ul-border); background: var(--ul-surface); }
.ul-growth-detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--ul-border); padding-bottom: 8px; }
.ul-growth-detail-head h3 { margin: 0; font-size: 13px; font-weight: 500; color: var(--ul-muted); }
.ul-growth-entry > h3 { font-size: 15px; margin: 0; }
.ul-growth-entry > section { margin: 20px 0; }
.ul-growth-entry h4 { font-size: 13px; margin: 0 0 8px; font-weight: 600; }
.ul-growth-entry .ul-markdown { font-size: 14px; line-height: 1.75; }
.ul-growth-changes { margin: 0; padding-left: 20px; }
.ul-growth-changes > li { padding: 4px 0 12px; font-size: 13px; }
.ul-growth-changes > li > strong { font-weight: 500; }
.ul-growth-changes .ul-markdown { margin-top: 8px; }
.ul-growth-meta { border-top: 1px solid var(--ul-border); padding-top: 12px; margin-top: 20px; font-size: 12px; color: var(--ul-muted); }
.ul-growth-meta > summary { cursor: pointer; margin-bottom: 8px; }
/* 外框固定、只滚正文，换件不会把底部控制推出视口；不使用全局悬浮遮挡宿主。 */
.ul-growth-review { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: min(650px, 78dvh); min-height: 340px; border: 1px solid var(--ul-border); border-radius: 6px; overflow: hidden; }
.ul-growth-review-content { overflow: auto; min-height: 0; padding: 20px 24px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.ul-growth-review-content .ul-growth-entry { max-width: 84ch; margin-inline: auto; }
.ul-growth-review-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; border-top: 1px solid var(--ul-border); background: var(--ul-surface); }
.ul-growth-review-controls .ul-caption { margin: 0 8px; flex: 1; white-space: nowrap; }
.ul-growth-review-controls + .ul-caption { grid-column: 1; padding-inline: 12px; }
.ul-current-section { margin: 0 0 24px; }
.ul-current-section > h3 { font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--ul-border); padding-bottom: 8px; margin: 0; }
.ul-root textarea { font: inherit; color: inherit; }
.ul-current-editor { min-height: 200px; resize: vertical; font-size: 14px; line-height: 1.65; }
.ul-current-manage { border-top: 1px solid var(--ul-border); margin-top: 20px; padding-top: 16px; }
.ul-current-confirm, .ul-growth-help { border: 1px solid var(--ul-border); border-radius: 6px; padding: 16px; font-size: 13px; }
.ul-current-confirm h4 { font-size: 13px; margin-bottom: 8px; }
.ul-current-confirm .ul-detail { margin-bottom: 12px; }
.ul-growth-help { margin-bottom: 16px; }
.ul-growth-help h3 { font-size: 15px; }
@container ul-ledger (max-width: 800px) {
  .ul-growth-has-detail { grid-template-columns: minmax(0, 1fr); }
  .ul-growth-has-detail > :first-child { display: none; }
  .ul-growth-detail { padding-left: 0; border-left: 0; }
  .ul-page-head { flex-direction: column; gap: 12px; }
  .ul-page-head nav { justify-content: flex-start; }
  .ul-growth-review-content { padding: 16px; }
}
@media (max-width: 800px) {
  .ul-growth-has-detail { grid-template-columns: minmax(0, 1fr); }
  .ul-growth-has-detail > :first-child { display: none; }
  .ul-growth-detail { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ul-root *, .ul-root *::before, .ul-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.ul-access-note { margin-bottom: 6px; padding-block: 6px; }
.ul-access-note > summary { cursor: pointer; }
.ul-access-note p { margin: 8px 0 0; }
/* 日常手记：列表与阅读页共享一个大面；只有保存内容使用局部 inset，不再堆叠卡片。 */
.ul-root {
  --ul-paper: var(--color-card, var(--background-elevated, color-mix(in srgb, var(--ul-ink) 3%, var(--ul-surface))));
  --ul-inset: color-mix(in srgb, var(--ul-ink) 3%, var(--ul-paper));
  --ul-selected: color-mix(in srgb, var(--ul-ring) 10%, var(--ul-paper));
}
.ul-root:has(.ul-notebook) { max-width: 1400px; }
.ul-root .ul-page-head { padding: 4px 0 28px; gap: 20px; align-items: flex-start; }
.ul-root .ul-page-head .ul-title { font-size: 24px; line-height: 1.25; font-weight: 600; margin: 0 0 8px; letter-spacing: -.02em; }
.ul-page-utilities { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.ul-page-utilities nav { gap: 4px; }
.ul-root .ul-access { padding: 0; gap: 14px; justify-content: flex-end; }
.ul-root .ul-access-note, .ul-root .ul-advanced { margin: 0; padding: 0; font-size: 12px; }
.ul-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; min-height: 40px; background: transparent; color: var(--ul-muted); text-decoration: none; font-size: 13px !important; line-height: 1.5; }
.ul-quiet:hover { background: var(--ul-wash); color: var(--ul-ink); }
.ul-icon { flex: none; vertical-align: middle; }
.ul-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ul-root .ul-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; font-size: 13px; }
.ul-menu { position: relative; }
.ul-menu > summary { padding: 8px 0; cursor: pointer; color: var(--ul-muted); }
.ul-menu-panel { position: absolute; z-index: 25; top: 100%; right: 0; width: min(360px, calc(100cqw - 24px)); padding: 16px; border: 1px solid var(--ul-border); border-radius: 8px; background: var(--ul-paper); box-shadow: var(--ul-shadow-pop); font-size: 13px; color: var(--ul-ink); }
.ul-menu-panel .ul-identity { margin: 0 0 8px !important; }
.ul-advanced .ul-menu-panel { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 180px; padding: 6px; }
.ul-advanced .ul-quiet { justify-content: flex-start; }
.ul-notebook-page { min-width: 0; }
.ul-notebook-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; min-width: 0; }
.ul-notebook-toolbar > div:has(.ul-notebook-search) { min-width: 0; flex: 0 1 540px; }
.ul-notebook-toolbar .ul-tabs { flex: none; border: 0; border-bottom: 1px solid var(--ul-border); background: transparent; border-radius: 0; padding: 0; gap: 24px; }
.ul-notebook-toolbar .ul-tab { min-height: 38px; padding: 7px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: 14px; }
.ul-notebook-toolbar .ul-tab-on { border-color: var(--ul-ink); background: transparent; color: var(--ul-ink) !important; }
.ul-notebook-search { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 540px; }
.ul-notebook-searchbox { display: flex; align-items: center; flex: 1 1 200px; gap: 8px; min-width: 0; border: 1px solid var(--ul-border); border-radius: 8px; padding: 0 12px; color: var(--ul-muted); }
.ul-notebook-searchbox:focus-within { outline: 2px solid var(--ul-ring); outline-offset: 2px; }
.ul-notebook-searchbox .ul-input { width: 100%; border: 0; background: transparent; padding-inline: 0; outline: none; font-size: 13px; }
.ul-notebook-filter { position: relative; flex: none; }
.ul-notebook-filter > summary { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 12px; border: 1px solid var(--ul-border); border-radius: 8px; cursor: pointer; font-size: 13px; list-style: none; }
.ul-notebook-filter > summary::-webkit-details-marker { display: none; }
.ul-filter-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(540px, calc(100cqw - 24px)); padding: 16px; border: 1px solid var(--ul-border); border-radius: 8px; background: var(--ul-paper); box-shadow: var(--ul-shadow-pop); }
.ul-filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ul-filter-fields label { display: grid; gap: 4px; min-width: 0; font-size: 12px; }
.ul-filter-panel > .ul-row { margin-top: 16px; }
.ul-filter-panel > .ul-quiet { margin-top: 8px; }
/* 开放式阅读面：328px 时间线与弹性正文共用外边距，仅用一条结构线分区。 */
.ul-notebook, .ul-notebook.ul-growth-review { display: grid; grid-template-columns: 328px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: clamp(440px, calc(100dvh - 212px), 850px); min-height: 440px; min-width: 0; gap: 0; border: 0; border-top: 1px solid var(--ul-border); border-radius: 0; background: transparent; overflow: hidden; }
.ul-notebook-list { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border-right: 1px solid var(--ul-border); padding: 20px 24px 24px 0; }
.ul-notebook-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 16px; font-size: 12px; color: var(--ul-muted); }
.ul-notebook-list-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ul-ink); }
.ul-notebook-list .ul-growth-day { margin: 0; padding: 12px 12px 8px; font-size: 12px; }
.ul-growth-timeline-entry { position: relative; }
.ul-growth-timeline-entry:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 44px; bottom: -3px; width: 1px; background: var(--ul-border); pointer-events: none; }
.ul-growth-timeline-entry:has(.ul-growth-day)::before { top: 76px; }
.ul-notebook-list .ul-growth-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; border: 0; border-radius: 6px; padding: 12px 12px 12px 7px; margin: 1px 0; color: var(--ul-ink); text-align: left; }
.ul-notebook-list .ul-growth-item time { font-size: 12px; color: var(--ul-muted); font-variant-numeric: tabular-nums; }
.ul-notebook-list .ul-growth-item[aria-current="true"] { background: var(--ul-wash); }
.ul-timeline-rail { display: flex; justify-content: center; padding-top: 7px; position: relative; z-index: 1; }
.ul-timeline-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ul-muted); outline: 5px solid var(--ul-surface); }
.ul-growth-item[aria-current="true"] .ul-timeline-dot { background: var(--ul-ring); }
.ul-timeline-skill { border-radius: 2px; }
.ul-entry-copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ul-entry-context { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.ul-entry-context > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.ul-entry-copy .ul-entry-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.65; font-weight: 500; overflow-wrap: anywhere; }
.ul-growth-item[aria-current="true"] .ul-entry-title { font-weight: 600; }
.ul-entry-result { color: var(--ul-muted); font-size: 12px; line-height: 1.5; }
.ul-notebook-reader, .ul-notebook .ul-growth-detail, .ul-notebook .ul-growth-review-content { min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 32px 40px; border: 0; background: transparent; }
.ul-reading-page, .ul-growth-review-content .ul-growth-entry { max-width: 740px; margin-inline: auto; min-width: 0; }
.ul-reader-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--ul-muted); margin-bottom: 15px; }
.ul-reader-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.ul-reader-meta .ul-quiet { min-height: 32px; padding: 4px 7px; }
.ul-reader-close { margin-right: -7px; }
.ul-reader-title { margin: 0; font-size: 26px; line-height: 1.5; letter-spacing: -.02em; font-weight: 600; overflow-wrap: anywhere; }
.ul-reader-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--ul-muted); }
.ul-reader-section, .ul-growth-entry > .ul-reader-section { margin: 32px 0 0; }
.ul-reader-section > h3 { margin: 0 0 12px; color: var(--ul-muted); font-size: 12px; font-weight: 500; }
.ul-growth-protagonist { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; min-width: 0; }
.ul-growth-protagonist > div { min-width: 0; }
.ul-growth-protagonist strong { display: block; font-size: 14px; font-weight: 550; }
.ul-growth-protagonist p { margin: 2px 0 0; color: var(--ul-muted); font-size: 12px; }
.ul-growth-protagonist .ul-alias-person { margin-left: auto; }
.ul-person-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ul-wash); font-size: 14px; color: var(--ul-ink); }
.ul-growth-quote-details { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ul-border); font-size: 13px; }
.ul-growth-quote-details > summary { width: fit-content; cursor: pointer; color: var(--ul-muted); }
.ul-growth-quote { border-left: 2px solid var(--ul-border); padding-left: 18px; margin: 16px 0 0; color: var(--ul-ink); }
.ul-growth-entry .ul-markdown { font-size: 16px; line-height: 1.85; }
.ul-growth-changes { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.ul-growth-changes > .ul-growth-change { min-width: 0; padding: 0; border: 0; background: transparent; }
.ul-change-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ul-muted); }
.ul-change-head strong { font-weight: 500; color: var(--ul-ink); }
.ul-change-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--ul-ring); flex: none; }
.ul-growth-change-memory .ul-change-mark { background: var(--ul-ink); }
.ul-change-state { margin-left: auto; color: var(--ul-muted); font-size: 12px; }
.ul-growth-change .ul-markdown, .ul-growth-entry .ul-change-name { margin: 10px 0 0 14px; }
.ul-growth-entry .ul-change-name { font-size: 14px; }
.ul-growth-later { margin-top: 24px; font-size: 12px; color: var(--ul-muted); }
.ul-growth-later > summary { cursor: pointer; width: fit-content; }
.ul-growth-later .ul-icon { width: 15px; height: 15px; margin-right: 8px; }
.ul-growth-later p { margin-block: 10px 0; }
.ul-reader-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ul-growth-meta { margin-top: 26px; padding-top: 15px; font-size: 11px; }
.ul-reader-back { display: none; }
.ul-reader-empty { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 12px; color: var(--ul-muted); font-size: 14px; }
.ul-reader-empty p { max-width: 38ch; margin: 0; }
.ul-notebook-footer, .ul-notebook .ul-growth-review-controls { grid-column: 1 / -1; min-height: 54px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ul-border); padding: 10px 0; background: var(--ul-surface); }
.ul-notebook-footer .ul-caption { margin: 0; flex: none; }
.ul-review-transport { display: flex; align-items: center; gap: 6px; }
.ul-review-transport .ul-btn { background: var(--ul-inset); }
.ul-notebook-footer .ul-btn-primary { background: var(--ul-ink); color: var(--ul-surface); }
.ul-current-scope { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: -2px 0 12px; color: var(--ul-muted); font-size: 12px; }
.ul-current-scope > .ul-quiet { margin-left: auto; }
.ul-current-scope details { position: relative; }
.ul-current-scope summary { cursor: pointer; }
.ul-current-scope details[open] { flex: 1 1 100%; order: 3; }
.ul-current-scope details p { margin-top: 8px; }
.ul-notebook-list .ul-current-section { margin: 0 0 20px; }
.ul-notebook-list .ul-current-section > h3 { border: 0; padding: 10px 12px 8px; margin: 0; font-size: 12px; color: var(--ul-muted); }
.ul-notebook-list .ul-current-item { grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.ul-current-kinds { display: flex; align-items: center; gap: 4px; }
.ul-current-kinds .ul-quiet { min-height: 34px; padding-block: 4px; }
.ul-current-kinds .ul-current-kind-on { background: var(--ul-wash); color: var(--ul-ink); }
.ul-current-item { align-items: start; }
.ul-current-type-mark { display: grid; place-items: center; width: 18px; height: 22px; font-size: 12px; color: var(--ul-muted); }
.ul-current-messages { list-style: none; display: grid; gap: 24px; padding: 0; margin: 24px 0; }
.ul-current-messages > li { border-top: 1px solid var(--ul-border); padding-top: 16px; }
.ul-current-messages > li > strong { font-size: 12px; color: var(--ul-muted); font-weight: 500; }
.ul-current-body { margin-top: 26px; font-size: 16px; line-height: 1.9; }
.ul-current-body .ul-markdown { font-size: inherit; line-height: inherit; }
.ul-current-context { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 12px; font-size: 13px; }
.ul-current-context p { margin: 0; }
.ul-current-context > details { flex: 1 1 100%; font-size: 12px; color: var(--ul-muted); }
.ul-current-notice { border-left: 2px solid var(--ul-ring); padding: 8px 12px; font-size: 13px; }
/* 名字始终是文本。编辑面板不是第三个主页面，且不遮住宿主导航。 */
.ul-alias-person { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ul-alias-person .ul-person-edit { min-height: 28px; padding: 2px 5px; font-size: 11px !important; }
.ul-alias-panel { display: grid; gap: 16px; width: min(100%, 620px); margin: 0 0 20px auto; padding: 20px; border: 1px solid var(--ul-border); border-radius: 8px; background: var(--ul-paper); font-size: 13px; }
.ul-alias-panel h2 { font-size: 16px; margin: 0; }
.ul-alias-panel label { display: grid; gap: 5px; min-width: 0; }
.ul-alias-panel .ul-stack { gap: 12px; }
.ul-alias-editor { border-top: 1px solid var(--ul-border); padding-top: 16px; }
.ul-alias-confirm { border-left: 2px solid var(--color-destructive, #e5484d); padding: 8px 12px; margin-top: 16px; }
.ul-alias-confirm h3 { font-size: 14px; }
.ul-alias-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-block: 4px 12px; font-size: 12px; color: var(--ul-muted); }
@container ul-ledger (max-width: 1000px) {
  .ul-notebook-toolbar { flex-wrap: wrap; gap: 12px; }
  .ul-notebook-toolbar > div:has(.ul-notebook-search), .ul-notebook-search { flex-grow: 1; }
  .ul-notebook-reader, .ul-notebook .ul-growth-detail, .ul-notebook .ul-growth-review-content { padding-inline: 28px; }
}
@container ul-ledger (max-width: 799px) {
  .ul-root .ul-page-head { flex-direction: row; flex-wrap: wrap; padding-bottom: 20px; gap: 12px; }
  .ul-page-utilities { margin-left: auto; }
  .ul-root .ul-page-head .ul-title { font-size: 24px; }
  .ul-page-head .ul-description { font-size: 12px; }
  .ul-notebook-toolbar > .ul-tabs { width: 100%; }
  .ul-notebook-toolbar .ul-tab { flex: 1; min-height: 40px; padding-inline: 12px; }
  .ul-notebook-toolbar > div:has(.ul-notebook-search), .ul-notebook-search { flex-basis: 100%; }
  .ul-notebook, .ul-notebook.ul-growth-review { grid-template-columns: minmax(0, 1fr); height: clamp(360px, calc(100dvh - 330px), 850px); }
  .ul-notebook-list { border-right: 0; }
  .ul-notebook > .ul-notebook-reader { display: none; }
  .ul-notebook-open > .ul-notebook-list { display: none; }
  .ul-notebook-open > .ul-notebook-reader { display: block; }
  .ul-notebook .ul-notebook-reader { padding: 20px; }
  .ul-reader-back { display: inline-flex; margin: 0 0 16px -8px; }
  .ul-reader-title { font-size: 21px; }
  .ul-reader-section, .ul-growth-entry > .ul-reader-section { margin-top: 24px; }
  .ul-growth-changes > .ul-growth-change { padding: 14px; }
  .ul-growth-change .ul-markdown, .ul-growth-entry .ul-change-name { margin-left: 0; }
  .ul-notebook-footer, .ul-notebook .ul-growth-review-controls { padding: 10px 16px; min-height: 66px; gap: 8px; }
  .ul-notebook .ul-growth-review-controls { min-height: 112px; }
  .ul-growth-review-controls > .ul-caption { flex-basis: 100%; }
  .ul-review-transport { gap: 2px; }
  .ul-review-transport :is(.ul-quiet, .ul-btn) { padding-inline: 8px; }
  .ul-notebook :is(.ul-btn, .ul-quiet), .ul-notebook-search > .ul-quiet { min-height: 44px; }
  .ul-reader-meta .ul-quiet { min-width: 40px; min-height: 40px; }
  .ul-person-edit { min-height: 40px !important; }
  .ul-filter-fields { grid-template-columns: minmax(0, 1fr); }
  .ul-alias-panel { padding: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ul-notebook-list .ul-growth-item { transition: background-color 140ms ease; }
  .ul-reading-page { animation: ul-read-in 160ms ease-out; }
}
@keyframes ul-read-in { from { opacity: .5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ul-root *, .ul-root *::before, .ul-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .ul-notebook-list .ul-growth-item[aria-current="true"] { border-left-color: Highlight; outline: 1px solid Highlight; }
}

/* 最近学到的：连续列表 + 1px 分隔行；沿用宿主暖色 token，不新增主题、渐变或统计卡。 */
.ul-feed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ul-border); }
.ul-feed-tools .ul-notebook-toolbar { flex-basis: 100%; }
.ul-feed-hint { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 1.6; color: var(--ul-muted); }
.ul-feed-list { list-style: none; margin: 0; padding: 0; }
.ul-feed-entry { border-bottom: 1px solid var(--ul-border); }
.ul-feed-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; width: 100%; min-height: 40px; padding: 8px 4px; border: 0; background: transparent; text-align: left; color: var(--ul-ink); }
.ul-feed-open:hover { background: var(--ul-wash); }
.ul-feed-open[aria-expanded="true"] { background: var(--ul-wash); }
.ul-feed-summary { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ul-feed-counts { font-size: 12px; color: var(--ul-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ul-feed-toggle { font-size: 12px; color: var(--ul-muted); white-space: nowrap; }
.ul-feed-summary code { color: var(--ul-ink); background: var(--ul-wash); padding: 1px 4px; border-radius: 3px; }
.ul-feed-detail { padding: 4px 4px 16px 20px; }
.ul-feed-detail h3 { font-size: 15px; margin: 12px 0 8px; }
.ul-feed-changes { list-style: none; margin: 0; padding: 0; }
.ul-feed-change { padding: 8px 0; border-bottom: 1px solid var(--ul-border); }
.ul-feed-change-head { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ul-muted); }
.ul-feed-change .ul-feed-summary { font-weight: 400; margin: 4px 0; }
.ul-feed-diff-grid { margin: 8px 0 0; }
.ul-feed-diff-grid > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 4px 0; }
.ul-feed-diff-grid dt { color: var(--ul-muted); font-size: 12px; }
.ul-feed-diff-grid dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.ul-feed-missing { margin: 8px 0; font-size: 13px; color: var(--ul-muted); }
.ul-feed-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; }
.ul-feed-actions .ul-feed-missing { margin: 0; }
.ul-feed .ul-evidence { margin: 6px 0; padding: 6px 10px; border-left: 2px solid var(--ul-border); font-size: 13px; }
@media (max-width: 700px) {
  .ul-feed-open { grid-template-columns: minmax(0, 1fr) auto; }
  .ul-feed-open .ul-time { grid-column: 1 / -1; }
  .ul-feed-open .ul-feed-summary { grid-column: 1 / -1; }
  .ul-feed-counts { white-space: normal; }
  .ul-feed-toggle { justify-self: end; }
  .ul-feed-detail { padding-left: 4px; }
  .ul-feed-tools .ul-tabs { flex-wrap: nowrap; width: 100%; }
  .ul-feed-tools .ul-tab { flex: 1 1 auto; min-width: 0; padding-inline: 6px; white-space: nowrap; }
}

/* 学习工作区：画布负责空间关系，时间线负责最近变化，阅读层保持独立行长。 */
.ul-learning-coverage summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.ul-track-seq { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ul-track-detail { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--ul-border); }
.ul-track-change { display: flex; flex-direction: column; gap: 6px; }
.ul-player { display: flex; flex-direction: column; gap: 4px; color: var(--ul-ink); }
.ul-player label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.ul-player-locate { font-size: 12px; }
.ul-player-locate > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.ul-player-locate[open] { flex: 1 1 100%; }
.ul-player-locate form { padding-top: 8px; }
.ul-player-locate input { max-width: 150px; }
.ul-root:has(.ul-learning-workspace) { max-width: 1880px; }
.ul-root:has(.ul-learning-workspace) .ul-page-head { padding-bottom: 8px; }
.ul-learning-workspace { gap: 8px; }
.ul-learning-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.ul-learning-workspace .ul-notebook-toolbar { margin: 0; flex: 0 0 auto; }
.ul-learning-tools > .ul-filters { display: flex; flex: 1 1 650px; min-width: 0; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.ul-learning-workspace .ul-filter-q { flex: 1 1 160px; max-width: none; }
.ul-learning-workspace .ul-filter-kind { flex: 0 1 140px; }
.ul-learning-workspace .ul-filters input, .ul-learning-workspace .ul-filters select { color: var(--ul-ink); }
@container ul-ledger (min-width: 1100px) { .ul-page-utilities { flex-direction: row; gap: 16px; align-items: center; } }
.ul-learning-workspace .ul-filters > .ul-caption { display: none; }
.ul-learning-workspace .ul-filters > label > span { display: none; }
.ul-learning-workspace .ul-input, .ul-learning-workspace .ul-btn, .ul-learning-workspace .ul-quiet, .ul-learning-workspace .ul-tab { min-height: 44px; }
.ul-learning-workspace .ul-filter-more { flex: 0 1 auto; position: relative; align-self: center; }
.ul-learning-workspace .ul-filter-more > summary { min-height: 44px; display: flex; align-items: center; padding: 0 12px; cursor: pointer; }
.ul-learning-workspace .ul-filter-more > .ul-row { position: absolute; top: 48px; right: 0; z-index: 15; width: min(680px, 78cqw); padding: 20px; background: var(--ul-surface); border: 1px solid var(--ul-border); border-radius: 10px; box-shadow: var(--ul-shadow-pop); }
.ul-journey-frame { --ul-drawer-width: 424px; --ul-canvas-height: clamp(260px, calc(100dvh - 620px), 650px); position: relative; min-width: 0; }
.ul-journey-surface { min-width: 0; }
.ul-journey-heading { display: flex; justify-content: space-between; align-items: center; min-height: 46px; gap: 12px; }
.ul-journey-heading > div { display: flex; gap: 16px; align-items: baseline; }
.ul-journey-heading strong { font-size: 15px; font-weight: 600; }
.ul-journey-frame .ul-matching-counts { padding: 0; font-size: 14px; color: var(--ul-muted); font-variant-numeric: tabular-nums; }
/* 类别构成占比条：段宽即数量比例；纯装饰，数字仍是唯一读数来源。 */
.ul-compose-bar { display: inline-flex; align-self: center; width: 148px; height: 6px; border-radius: 999px; overflow: hidden; gap: 2px; background: transparent; }
.ul-compose-bar > span { flex-basis: 0; min-width: 3px; }
.ul-compose-source { background: var(--ul-source-color); opacity: .55; }
.ul-compose-memory { background: var(--ul-memory-color); }
.ul-compose-skill { background: var(--ul-skill-color); }
/* 文字始终取宿主 ink；三种类型还以形状、标签和文字索引区分。 */
.ul-journey-frame { --ul-source-color: #7fa8d4; --ul-memory-color: #c9a86a; --ul-skill-color: #79b69a; }
.ul-journey-frame[data-ul-theme="dark"] { --ul-source-color: #7fa8d4; --ul-memory-color: #c9a86a; --ul-skill-color: #79b69a; }
.ul-map { margin: 0; min-width: 0; border: 1px solid var(--ul-border); border-radius: 10px; overflow: hidden; background: var(--ul-surface); }
.ul-journey-frame .ul-entity-conversation { color: var(--ul-source-color); }
.ul-journey-frame .ul-entity-memory { color: var(--ul-memory-color); }
.ul-journey-frame .ul-entity-skill { color: var(--ul-skill-color); }
.ul-map-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--ul-border); }
.ul-map-legend { display: flex; gap: 18px; color: var(--ul-ink); font-size: 13px; }
.ul-map-legend > span { display: flex; align-items: center; gap: 7px; }
/* 高度预算同时留给最近事件与播放；展开画布才占据更多纵向空间。 */
/* 画布底色比页面更暗、比卡片明显更深：卡片浮出来，文字对比不靠光晕。 */
.ul-map-canvas { position: relative; height: var(--ul-canvas-height); min-width: 0; overflow: hidden; touch-action: pan-y; background-color: var(--ul-wash); background-image: radial-gradient(circle, color-mix(in srgb, var(--ul-ink) 18%, transparent) .7px, transparent .9px); background-size: 20px 20px; isolation: isolate; cursor: grab; }
.ul-journey-frame[data-ul-theme="dark"] .ul-map-canvas { background-color: #131a21; background-image: radial-gradient(ellipse 90% 80% at 50% 42%, color-mix(in srgb, var(--ul-ink) 3%, transparent), transparent 70%), radial-gradient(circle, color-mix(in srgb, var(--ul-ink) 10%, transparent) .7px, transparent .9px); background-size: 100% 100%, 24px 24px; background-repeat: no-repeat, repeat; }
.ul-map-canvas:active { cursor: grabbing; }
.ul-map-expanded { --ul-canvas-height: clamp(560px, 76dvh, 1000px); }
.ul-map-scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.ul-map-group { position: absolute; display: flex; gap: 9px; align-items: center; color: var(--ul-ink); font-size: 13px; font-weight: 600; }
.ul-map-group > span:last-child { font-size: 12px; font-weight: 400; color: var(--ul-muted); }
/* 卡片常驻分层只靠边框与表面色阶；阴影留给 hover 与真正的浮层，避免深色下糊边。 */
.ul-root .ul-map-node { position: absolute; display: flex; flex-direction: column; align-items: stretch; width: 272px; height: 148px; padding: 14px 16px 12px; border: 1px solid var(--ul-border); border-left: 3px solid var(--ul-source-color); border-radius: 10px; background: var(--ul-surface); color: var(--ul-ink); text-align: left; cursor: pointer; font: inherit; line-height: 1.5; }
.ul-root .ul-map-node-memory { border-left-color: var(--ul-memory-color); }
.ul-root .ul-map-node-skill { border-left-color: var(--ul-skill-color); }
.ul-map-node-head { display: flex; align-items: center; gap: 6px; color: var(--ul-muted); font-size: 12px; }
.ul-map-node-head > span:last-child { margin-left: auto; }
.ul-root .ul-map-node-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 15px; font-weight: 600; line-height: 1.4; margin: 6px 0 4px; }
.ul-map-node-description { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 13px; color: var(--ul-muted); }
.ul-map-node-foot { display: flex; margin-top: auto; padding-top: 7px; gap: 12px; justify-content: space-between; color: var(--ul-muted); font-size: 12px; }
.ul-map-node:hover { background: color-mix(in srgb, var(--ul-ink) 3%, var(--ul-surface)); }
.ul-root .ul-map-selected { outline: 2px solid var(--ul-ring); outline-offset: 2px; }
.ul-root .ul-map-node:focus-visible { outline: 3px solid var(--ul-ring); outline-offset: 3px; }
/* 焦点由类别描边与关系线承担；非邻居撤光而不整卡透明，避免宿主深浅主题下正文失去对比度。 */
.ul-map-dim { box-shadow: none !important; }
.ul-map-dim .ul-map-node-head, .ul-map-dim .ul-map-node-description, .ul-map-dim .ul-map-node-foot { color: var(--ul-muted); }
.ul-map-dim:hover, .ul-map-dim:focus-visible { opacity: 1; }
.ul-map-dim .ul-entity-mark { opacity: .7; }
/* 选中卡以类型色点亮：描边换成左缘类型色加亮、外圈类型色光环。 */
.ul-journey-frame .ul-map-node.ul-map-selected { border-color: color-mix(in srgb, var(--ul-ink) 55%, var(--ul-surface)); }
.ul-journey-frame .ul-map-node-skill.ul-map-selected { box-shadow: 0 0 0 1px var(--ul-skill-color), 0 0 26px color-mix(in srgb, var(--ul-skill-color) 22%, transparent); }
.ul-journey-frame .ul-map-node-memory.ul-map-selected { box-shadow: 0 0 0 1px var(--ul-memory-color), 0 0 26px color-mix(in srgb, var(--ul-memory-color) 22%, transparent); }
.ul-journey-frame .ul-map-node-conversation.ul-map-selected { box-shadow: 0 0 0 1px var(--ul-source-color), 0 0 26px color-mix(in srgb, var(--ul-source-color) 22%, transparent); }
@media (prefers-reduced-motion: reduce) { .ul-journey-frame .ul-map-node.ul-map-selected { box-shadow: 0 0 0 1px var(--ul-ring); } }
.ul-map-dim .ul-entity-mark { opacity: .7; }
.ul-map-lines { position: absolute; overflow: visible; pointer-events: none; color: var(--ul-muted); }
.ul-map-edge path { fill: none; stroke: var(--ul-muted); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: .6; }
.ul-map-edge-source path { stroke-dasharray: 5 4; }
.ul-map-edge-muted path { opacity: .12 !important; }
.ul-map-edge text { fill: var(--ul-muted); stroke: var(--ul-wash); stroke-width: 5px; paint-order: stroke; font-size: 12px; }
.ul-map-edge-emphasis path { stroke: var(--ul-ink); stroke-width: 2px; opacity: 1; }
/* 选中链路用对象类型色贯穿；文字标签同步取色，箭头 currentColor 跟随。 */
.ul-map-edge-lit-conversation path { stroke: var(--ul-source-color); stroke-width: 2.5px; }
.ul-map-edge-lit-memory path { stroke: var(--ul-memory-color); stroke-width: 2.5px; }
.ul-map-edge-lit-skill path { stroke: var(--ul-skill-color); stroke-width: 2.5px; }
.ul-map-edge-emphasis text { fill: var(--ul-ink); stroke: var(--ul-surface); }
.ul-map-edge-lit-conversation text { fill: var(--ul-source-color); }
.ul-map-edge-lit-memory text { fill: var(--ul-memory-color); }
.ul-map-edge-lit-skill text { fill: var(--ul-skill-color); }
.ul-journey-frame[data-ul-theme="dark"] .ul-map-edge path { opacity: .5; }
.ul-journey-frame[data-ul-theme="dark"] .ul-map-edge-emphasis path { opacity: 1; }
.ul-map-preview { position: absolute; right: 16px; top: 14px; width: min(300px, calc(100% - 32px)); padding: 14px 16px; border: 1px solid var(--ul-border); border-radius: 10px; background: var(--ul-surface); box-shadow: var(--ul-shadow-pop); z-index: 4; pointer-events: none; font-size: 13px; color: var(--ul-ink); }
.ul-map-preview strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.ul-map-preview p { margin: 6px 0 0; line-height: 1.7; white-space: pre-wrap; }
.ul-map-controls { position: absolute; left: 12px; bottom: 12px; z-index: 5; display: flex; align-items: center; padding: 3px; gap: 2px; border: 1px solid var(--ul-border); border-radius: 8px; background: var(--ul-surface); cursor: default; }
.ul-map-controls .ul-btn { border: 0; padding: 6px 12px; background: transparent; min-width: 44px; }
.ul-map-scale { width: 44px; text-align: center; color: var(--ul-muted); font-size: 12px; }
.ul-map-minimap { position: absolute; right: 12px; bottom: 12px; z-index: 4; width: 116px; height: 82px; overflow: hidden; border: 1px solid var(--ul-border); border-radius: 8px; padding: 5px; background: var(--ul-surface); cursor: pointer; touch-action: none; }
/* 小地图沿用画布底色，色块是低饱和缩略，可读性不依赖边框。 */
.ul-journey-frame[data-ul-theme="dark"] .ul-map-minimap { background: #131a21; border-color: color-mix(in srgb, var(--ul-ink) 26%, transparent); }
.ul-map-minimap > svg { display: block; width: 100%; height: 100%; }
.ul-mini-conversation { fill: var(--ul-source-color); }
.ul-mini-memory { fill: var(--ul-memory-color); }
.ul-mini-skill { fill: var(--ul-skill-color); }
.ul-mini-viewport { fill: none; stroke: var(--ul-ink); stroke-width: 3px; }
.ul-journey-frame .ul-track-list-wrap { margin: 8px 0 0; border: 1px solid var(--ul-border); border-radius: 10px; padding: 0; background: var(--ul-surface); }
.ul-map-caption .ul-quiet { font-size: 12px !important; padding-inline: 8px; }
.ul-map-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px; color: var(--ul-muted); }
.ul-map-empty strong { color: var(--ul-ink); font-size: 17px; }
.ul-map-empty p { margin: 0; font-size: 14px; }
.ul-map-index { max-height: 300px; overflow: auto; padding: 12px 20px; border-top: 1px solid var(--ul-border); }
.ul-map-index.ul-map-index-collapsed { display: none; }
.ul-map-index ul { padding-left: 20px; }
.ul-map-index li { margin: 4px 0; font-size: 14px; }
.ul-map-index .ul-text-btn { min-height: 44px; }
.ul-journey-frame .ul-track-list-wrap { margin: 8px 0 0; border: 1px solid var(--ul-border); border-radius: 10px; padding: 0; background: var(--ul-surface); }
.ul-track-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 0 14px; min-height: 46px; }
.ul-track-timezone { font-size: 12px; color: var(--ul-muted); }
.ul-event-filter { margin: 0; padding: 4px 14px 8px; font-size: 12px; color: var(--ul-muted); }
.ul-new-activity { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 0 12px; border: 1px solid var(--ul-border); border-radius: 8px; margin-bottom: 8px; }
.ul-new-activity .ul-text-btn { min-height: 44px; }
.ul-track-heading > strong { font-size: 14px; font-weight: 600; }
.ul-track-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ul-track-tools .ul-btn, .ul-track-tools .ul-quiet { font-size: 12px !important; padding-inline: 8px; }
.ul-journey-frame .ul-track-status { color: var(--ul-muted); font-size: 12px; margin: 0; }
.ul-journey-frame .ul-track-list { list-style: none; margin: 0; padding: 0 14px; height: 132px; overflow: auto; overscroll-behavior: contain; }
.ul-track-expanded .ul-track-list { height: 380px; }
.ul-journey-frame .ul-track-event { display: grid; grid-template-columns: 98px minmax(0,1fr); gap: 12px; padding: 8px 2px; border: 0; border-top: 1px solid var(--ul-border); border-radius: 0; background: transparent; }
.ul-journey-frame .ul-track-current { background: var(--ul-selected, var(--ul-wash)); }
.ul-event-meta { display: flex; flex-direction: column; padding-top: 10px; gap: 2px; color: var(--ul-muted); font-size: 12px; }
.ul-event-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.ul-event-change { flex: 1 1 240px; }
.ul-event-actions { margin-left: auto; }
.ul-event-body > .ul-track-detail { flex-basis: 100%; }
.ul-event-change { display: flex; min-height: 38px; gap: 10px; align-items: center; flex-wrap: wrap; }
.ul-root .ul-track-object { display: inline; border: 0; padding: 6px 0; min-height: 44px; background: transparent; color: var(--ul-ink); cursor: pointer; font: inherit; font-size: 14px; font-weight: 550; text-align: left; overflow-wrap: anywhere; }
.ul-track-object:hover { text-decoration: underline; text-underline-offset: 4px; }
.ul-track-object[aria-pressed=true] { text-decoration: underline; text-underline-offset: 4px; }
.ul-event-action { color: var(--ul-muted); font-size: 13px; white-space: nowrap; }
.ul-event-actions { display: flex; gap: 14px; }
.ul-event-actions .ul-text-btn, .ul-event-more { min-height: 44px; font-size: 12px; }
.ul-journey-frame .ul-track-detail { padding: 8px 0; }
.ul-journey-frame .ul-track-change { border: 0; padding: 4px 0; }
.ul-journey-frame .ul-player { margin-top: 8px; padding: 0; border: 0; background: transparent; }
.ul-player-main { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ul-player-main .ul-time { margin-left: auto; font-size: 12px; }
.ul-player-main .ul-scrubber { flex: 1; min-width: 100px; margin: 0; }
.ul-player-main input[type=range] { width: 100%; min-height: 44px; accent-color: var(--ul-ink); }
.ul-player-main .ul-input { width: auto; min-width: 62px; }
.ul-player-note { color: var(--ul-muted); font-size: 12px; margin: 0; }
.ul-journey-frame > .ul-learning-coverage { padding: 6px 0; margin: 2px 0 0; border: 0; color: var(--ul-muted); font-size: 12px; }
.ul-journey-frame > .ul-detail-drawer { position: absolute; inset: 0 0 34px auto; width: var(--ul-drawer-width); max-width: 100%; height: calc(100% - 34px); max-height: none; overflow: auto; background: var(--ul-surface); z-index: 10; border: 1px solid var(--ul-border); border-radius: 10px; }
@container ul-ledger (min-width: 1200px) { .ul-journey-frame.ul-has-selection .ul-journey-surface { margin-right: calc(var(--ul-drawer-width) + 16px); } }
@container ul-ledger (min-width: 1650px) { .ul-journey-frame { --ul-drawer-width: 460px; } }
@container ul-ledger (min-width: 700px) and (max-width: 1199px) { .ul-journey-frame > .ul-detail-drawer { inset: 0 0 auto auto; height: calc(var(--ul-canvas-height) + 120px); } /* 窄容器只覆盖图的阅读区，时间线与播放仍可操作。 */ .ul-journey-frame.ul-has-selection .ul-map { margin-right: calc(var(--ul-drawer-width) + 12px); } .ul-journey-frame.ul-has-selection .ul-map-header { padding-inline: 8px; gap: 4px; } .ul-journey-frame.ul-has-selection .ul-map-legend { gap: 8px; font-size: 12px; white-space: nowrap; } .ul-journey-frame.ul-has-selection .ul-map-header .ul-caption, .ul-journey-frame.ul-has-selection .ul-map-caption > span:first-child, .ul-journey-frame.ul-has-selection .ul-map-minimap { display: none; } .ul-journey-frame.ul-has-selection .ul-map-controls .ul-btn { padding-inline: 6px; font-size: 12px; } }
@container ul-ledger (min-width: 700px) and (max-width: 1000px) {
  .ul-journey-frame { --ul-canvas-height: clamp(260px, calc(100dvh - 700px), 540px); }
  .ul-map-expanded { --ul-canvas-height: clamp(560px, 76dvh, 1000px); }
  .ul-track-timezone { font-size: 11px; white-space: nowrap; }
}
@container ul-ledger (max-width: 699px) {
  .ul-root:has(.ul-learning-workspace) .ul-page-head { padding-bottom: 8px; }
  .ul-learning-workspace .ul-filters { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; }
  .ul-learning-workspace .ul-filter-q { grid-column: 1 / 3; max-width: none; }
  .ul-learning-workspace .ul-filter-more { grid-column: 3; grid-row: 1; }
  .ul-learning-workspace .ul-filter-kind { grid-column: 1; }
  .ul-learning-workspace .ul-filter-refresh { display: none; }
  .ul-learning-workspace .ul-filter-more > .ul-row { width: calc(100cqw - 12px); }
  .ul-journey-heading { min-height: 42px; }
  .ul-journey-heading > div { gap: 5px; flex-direction: column; align-items: flex-start; }
  .ul-journey-frame .ul-matching-counts { font-size: 12px; }
  .ul-map-header { padding: 2px 8px; }
  .ul-map-header .ul-caption { display: none; }
  .ul-map-legend { gap: 12px; font-size: 12px; }
  .ul-map-header .ul-quiet { padding-inline: 6px; font-size: 12px !important; }
  .ul-journey-frame { --ul-canvas-height: 260px; }
  .ul-map-expanded { --ul-canvas-height: 580px; }
  .ul-map-controls { left: 7px; bottom: 8px; }
  .ul-map-controls .ul-btn { padding: 6px 8px; font-size: 12px; }
  .ul-map-controls .ul-btn:last-child { display: none; }
  .ul-map-minimap { width: 66px; height: 48px; right: 7px; bottom: 10px; }
  .ul-map-caption { justify-content: flex-end; padding: 0 6px; }
  .ul-map-caption > span:first-child { display: none; }
  .ul-map-preview { display: none; }
  .ul-journey-frame .ul-track-event { grid-template-columns: 62px minmax(0,1fr); gap: 6px; }
  .ul-event-meta { font-size: 11px; }
  .ul-event-change { gap: 6px; }
  .ul-journey-frame .ul-track-list { height: 134px; padding-inline: 10px; }
  .ul-track-expanded .ul-track-list { height: 380px; }
  .ul-player-main { gap: 2px; }
  .ul-player-main > .ul-quiet { padding-inline: 7px; font-size: 12px !important; }
  .ul-player-main > .ul-btn-primary { padding-inline: 10px; }
  .ul-player-main .ul-time { margin-left: 0; }
  .ul-player-main .ul-scrubber { flex-basis: 100%; order: 8; }
  .ul-player-main .ul-player-locate { margin-left: auto; font-size: 12px; }
  .ul-journey-frame > .ul-detail-drawer { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; border: 0; border-radius: 0; z-index: 60; }
}
@media (prefers-reduced-motion: reduce) { .ul-map *, .ul-journey-frame > .ul-detail-drawer { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .ul-map-node { border: 2px solid CanvasText !important; box-shadow: none; } .ul-root .ul-map-selected { outline-color: Highlight; } .ul-map-edge path { stroke: CanvasText; } .ul-map-edge text { fill: CanvasText; } .ul-map-dim { opacity: 1; } .ul-map .ul-entity-mark { color: CanvasText; } }
@media print { .ul-map-canvas { display: none; } .ul-map .ul-map-index { display: block; max-height: none; } .ul-map-controls, .ul-map-minimap, .ul-player { display: none; } }

/* 日期快捷、这段时间概览与紧凑分组入口，全部位于全屏 frame 内仍可操作。 */
.ul-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 2px 0 4px; }
.ul-range-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.ul-range .ul-btn-small { min-height: 32px; }
.ul-range-on { box-shadow: inset 0 0 0 1px var(--ul-ring); }
.ul-range-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ul-range-custom .ul-input { min-height: 32px; width: auto; }
.ul-range-label, .ul-range-hint { font-size: 12px; color: var(--ul-muted); }
.ul-range-hint { white-space: nowrap; }
.ul-range .ul-caption { margin: 0; }
/* 统计与分组收成一条轻量入口：不铺成技术面板，把首屏留给关系图或空态说明。 */
.ul-observation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 38%); gap: 2px 16px; padding: 2px 4px 8px; border: 0; border-bottom: 1px solid var(--ul-border); border-radius: 0; background: transparent; }
.ul-observation-block { min-width: 0; display: grid; gap: 3px; align-content: start; }
.ul-observation-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ul-observation-head strong { font-size: 14px; font-weight: 600; }
.ul-observation-head .ul-caption { margin: 0; }
.ul-observation-error { color: #e3a29a; font-size: 12px; }
.ul-period-summary, .ul-period-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.ul-period-summary > div, .ul-period-counts > div { display: flex; align-items: baseline; gap: 4px; }
.ul-period-summary dt, .ul-period-counts dt { color: var(--ul-muted); font-size: 12px; }
.ul-period-summary dd, .ul-period-counts dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ul-observation-details > summary, .ul-group-fold > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 12px; color: var(--ul-muted); }
.ul-observation-details[open] > .ul-caption, .ul-group-fold[open] > .ul-caption { margin: 0; }
.ul-group-fold > ul, .ul-group-fold > p, .ul-group-fold > .ul-row { margin-top: 0; margin-bottom: 0; }
.ul-group-list { display: flex; flex-direction: column; gap: 2px; max-height: 68px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.ul-group-item { border-left: 2px solid transparent; }
.ul-group-on { border-left-color: var(--ul-ink); }
.ul-group-open { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; padding: 2px 6px; text-align: left; }
.ul-group-open .ul-caption { margin: 0; }
.ul-group-pages { gap: 8px; }
.ul-group-pages .ul-caption { margin: 0; }
.ul-observation-note { margin: 0; font-size: 12px; color: var(--ul-muted); }
@container ul-ledger (max-width: 899px) { .ul-observation { grid-template-columns: minmax(0, 1fr); } }
.ul-canvas-fullscreen .ul-observation { padding: 2px 4px; gap: 2px 10px; }
.ul-canvas-fullscreen .ul-group-list { max-height: 48px; }
.ul-root .ul-map-node.ul-map-node-context { border-style: dashed; opacity: 1; }
.ul-map-context-tag { color: var(--ul-muted); font-size: 11px; }
.ul-map-coverage-note, .ul-map-observation-note { margin: 0; padding: 0 8px; }

/* --------------------------------------------------------------------------
   第二轮：概览收成一条横向工具行——左侧小统计，右侧单一「选择一次对话」入口。
   展开的清单与说明各自换行，不把默认区堆成技术面板。
   -------------------------------------------------------------------------- */
.ul-observation { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 20px; padding: 2px 4px 8px; border: 0; border-bottom: 1px solid var(--ul-border); border-radius: 0; background: transparent; }
.ul-observation-block { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.ul-observation-summary { flex: 1 1 330px; }
.ul-observation-groups { flex: 1 1 400px; }
.ul-observation-details[open], .ul-group-fold[open] { flex: 1 1 100%; }
/* 工具行里的入口不做浮动/辉光，靠边框与底色区分选中态。 */
.ul-observation .ul-btn { background: transparent; box-shadow: none; }
.ul-observation .ul-btn:hover, .ul-observation .ul-btn:active { transform: none; box-shadow: none; background: var(--ul-wash); }
.ul-observation .ul-btn[aria-pressed="true"] { background: var(--ul-selected); border-color: var(--ul-cyan); }
.ul-group-fold > summary { width: fit-content; padding: 0 12px; border: 1px solid var(--ul-border); border-radius: 8px; background: var(--ul-wash); color: var(--ul-ink); font-size: 13px; font-weight: 600; }
.ul-observation-details > summary { color: var(--ul-muted); }
.ul-map-record-notes { padding-inline: 8px; font-size: 12px; color: var(--ul-muted); }
.ul-map-record-notes > summary { padding-block: 6px; cursor: pointer; }
/* 展开后要能一次读完日期、记忆/技能数量与改动，不再压成 68px 的窄滚动条。 */
.ul-group-list { max-height: 240px; }
.ul-canvas-fullscreen .ul-group-list { max-height: 160px; }

/* 标准宽度由工作区负责；详情只约束自身阅读、扩宽和模态容器。 */
.ul-learning-detail.ul-detail-drawer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ul-ink);
  background: var(--ul-surface);
  /* 抽屉浮在画布与时间线之上，是真正的浮层；与 filter/preview 共用同一道阴影。 */
  box-shadow: var(--ul-shadow-pop);
  font-size: 15px;
  line-height: 1.75;
}
.ul-learning-detail.ul-detail-drawer[hidden] { display: none; }
.ul-learning-detail.ul-detail-drawer.ul-detail-wide { width: max(620px, min(84%, 900px)); }
.ul-learning-detail.ul-detail-drawer.ul-detail-modal { width: 100%; }
.ul-learning-detail .ul-detail-head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--ul-border);
  background: var(--ul-surface);
}
.ul-learning-detail .ul-detail-head > .ul-caption { margin: 0; }
.ul-learning-detail .ul-detail-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* 唯一纵向滚动区位于详情内，扩宽、切换对象都不推动外层页面。 */
.ul-learning-detail .ul-detail-reading {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 24px 24px 36px;
  scroll-padding-block: 20px;
}
.ul-learning-detail .ul-detail-reading > * { max-width: 68ch; margin-inline: auto; min-width: 0; }
.ul-learning-detail .ul-detail-title { margin: 0 0 16px; font-size: 22px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
/* 概况元数据卡化：label 灰在上、值在下，两列网格代替一行灰字，信息有实体感。 */
.ul-learning-detail .ul-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 6px; }
.ul-learning-detail .ul-fact-grid > div { display: grid; gap: 3px; padding: 11px 13px; border-radius: 8px; background: var(--ul-wash); }
.ul-learning-detail .ul-fact-grid dt { font-size: 12px; color: var(--ul-muted); }
.ul-learning-detail .ul-fact-grid dd { margin: 0; font-size: 14px; font-weight: 600; }
.ul-learning-detail .ul-fact-grid dd.ul-num { font-variant-numeric: tabular-nums; }
.ul-learning-detail .ul-detail-description { margin-block: 16px; color: var(--ul-ink); }
.ul-learning-detail .ul-detail-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ul-border); }
.ul-learning-detail .ul-detail-section > h4 { margin: 0 0 16px; font-size: 16px; font-weight: 650; }
.ul-learning-detail .ul-detail-reading h5 { margin: 16px 0 8px; font-size: 14px; font-weight: 600; }
.ul-learning-detail .ul-detail-event { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-bottom: 6px; font-weight: 550; }
.ul-learning-detail .ul-caption { font-size: 13px; line-height: 1.65; color: var(--ul-muted); }
.ul-learning-detail .ul-chip { font-size: 12px; }
.ul-learning-detail .ul-markdown { margin-top: 16px; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.ul-learning-detail .ul-markdown > :last-child { margin-bottom: 0; }
.ul-learning-detail :is(.ul-markdown pre, .ul-diff pre) { min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.ul-learning-detail :is(.ul-detail-sources, .ul-detail-usage, .ul-versions, .ul-relations) { list-style: none; padding: 0; margin: 14px 0; }
.ul-learning-detail :is(.ul-detail-sources, .ul-detail-usage, .ul-versions, .ul-relations) > li { padding-block: 16px; border-bottom: 1px solid var(--ul-border); }
.ul-learning-detail :is(.ul-detail-sources, .ul-detail-usage, .ul-versions, .ul-relations) > li:first-child { padding-top: 0; }
.ul-learning-detail :is(.ul-detail-sources, .ul-detail-usage, .ul-versions, .ul-relations) > li:last-child { border-bottom: 0; }
.ul-learning-detail .ul-evidence { margin: 0 0 10px; padding: 0 0 0 14px; border-left: 2px solid var(--ul-border); white-space: pre-wrap; color: var(--ul-ink); font-size: 15px; }
.ul-learning-detail .ul-preserved-content { margin-top: 18px; }
.ul-learning-detail .ul-detail-fragment { margin-top: 16px; }
.ul-learning-detail .ul-detail-disclosure > summary,
.ul-learning-detail .ul-detail-technical > summary { font-size: 15px; font-weight: 600; }
.ul-learning-detail details[open] > summary { margin-bottom: 16px; }
/* 原生 summary 仍是键盘入口，不使用五个平级切换，也不缩小触控目标。 */
.ul-learning-detail :is(button, select, summary, a) { min-height: 44px; }
.ul-learning-detail summary { padding: 10px 2px; cursor: pointer; line-height: 1.6; }
.ul-learning-detail :is(button, a) { overflow-wrap: anywhere; }
.ul-learning-detail button { padding: 10px 12px; text-align: left; }
.ul-learning-detail a { display: inline-flex; align-items: center; }
.ul-learning-detail .ul-compare-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-block: 18px; }
.ul-learning-detail .ul-compare-controls label { display: flex; flex: 1 1 180px; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; }
.ul-learning-detail .ul-compare-controls select { width: 100%; min-width: 0; }
.ul-learning-detail .ul-compare-controls button { flex: 0 0 auto; }
.ul-learning-detail .ul-diff { margin: 20px 0 24px; border: 1px solid var(--ul-border); padding: 14px; border-radius: 4px; }
.ul-learning-detail .ul-diff > h4 { font-size: 15px; margin-bottom: 12px; }
.ul-learning-detail .ul-diff :is(.ul-diff-add, .ul-diff-remove, .ul-diff-equal) { display: block; padding: 8px; border-left: 3px solid var(--ul-border); border-bottom: 1px solid var(--ul-border); }
.ul-learning-detail .ul-diff .ul-diff-add { border-left-style: double; border-left-width: 5px; background: var(--ul-wash); }
.ul-learning-detail .ul-diff .ul-diff-remove { border-left-style: dashed; }
.ul-learning-detail .ul-relations button { max-width: 100%; word-break: break-word; }
.ul-learning-detail .ul-relation-source { padding-block: 12px; border-top: 1px solid var(--ul-border); }
.ul-learning-detail .ul-diff-sign { display: block; width: auto; font-size: 12px; font-weight: 600; }
.ul-learning-detail .ul-diff pre { margin: 4px 0 0; font-size: 13px; line-height: 1.7; }
.ul-learning-detail .ul-detail-technical { font-size: 13px; color: var(--ul-muted); }
.ul-learning-detail .ul-definition { display: grid; grid-template-columns: minmax(5em, auto) minmax(0, 1fr); gap: 8px 12px; }
.ul-learning-detail .ul-definition dt, .ul-learning-detail .ul-definition dd { margin: 0; overflow-wrap: anywhere; }
.ul-learning-detail .ul-definition dd { color: var(--ul-ink); }
.ul-learning-detail :is(button, select, summary, a, [tabindex]):focus-visible { outline: 2px solid var(--ul-ring); outline-offset: 2px; }
@container ul-ledger (max-width: 699px) {
  .ul-learning-detail .ul-detail-head { padding-inline: 16px; }
  .ul-learning-detail .ul-detail-reading { padding: 20px 18px 28px; }
  .ul-learning-detail .ul-detail-title { font-size: 20px; }
  .ul-learning-detail .ul-compare-controls button { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ul-learning-detail.ul-detail-drawer { animation: none; transition: none; scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .ul-learning-detail .ul-diff :is(.ul-diff-add, .ul-diff-remove, .ul-diff-equal) { border-color: CanvasText; }
  .ul-learning-detail :is(.ul-chip, .ul-evidence) { border-color: CanvasText; }
}

/* ==========================================================================
   学习轨迹 · 统一暗色主题
   以中性冷灰分层：页面底、面板、卡片、边线和辅助文字各自独立，正文保持高对比。
   数据类别用低饱和蓝、暖灰金、青绿区分来源、记忆和技能；不引入亮红或大面积高饱和色。
   动效刻意不照搬控制台的氛围漂移/通用入场，而是用「学习轨迹」自己的语言：
   关系链传导（连线流动 + 节点点亮）、时间推进（播放扫描）、溯源收束（hover 聚焦）。
   故在功能样式之后追加本层，仅覆盖材质/配色/动效，不改动布局与 DOM 契约。

   约束（来自 tests/user_ledger_visual_checks.cjs）：
   - .ul-root 必须是不透明深底（dark 主题判定依赖 getComputedStyle 背景亮度）；
   - .ul-graph-canvas / .ul-player 同系深底、文字对比 >= 4.5；
   - 无横向溢出、抽屉/关系图/播放器不碰撞。
   所有规则限定在 .ul-root，避免污染宿主 Hermes Web 插件页。
   ========================================================================== */

.ul-root {
  /* 优先沿用宿主 Ember 的暖色语义 token；宿主未定义时用温暖中性深灰兜底，
     正文取暖白高对比。类别色固定映射，不随宿主主题漂移。 */
  --ul-ground: var(--background-base, var(--color-background, #1b1815));
  --ul-sheet: color-mix(in srgb, var(--ul-ground) 92%, #f0dfc4);
  --ul-glass: color-mix(in srgb, var(--ul-ground) 86%, #f0dfc4);
  --ul-glass-soft: rgba(240, 223, 196, .05);
  --ul-glass-raised: rgba(240, 223, 196, .08);
  --ul-line: color-mix(in srgb, var(--ul-ink) 20%, transparent);
  --ul-line-soft: color-mix(in srgb, var(--ul-ink) 10%, transparent);
  --ul-glass-edge: color-mix(in srgb, var(--ul-ink) 16%, transparent);

  --ul-cyan: var(--color-primary, #d9a45a);   /* 琥珀主强调：跟随宿主，不写死冷蓝 */
  --ul-blue: color-mix(in srgb, var(--ul-cyan) 72%, var(--ul-ground));
  --ul-violet: color-mix(in srgb, var(--ul-cyan) 40%, #cbb99e);
  --ul-pink: var(--ul-ink);
  --ul-positive: var(--color-success, #a8c08a);
  --ul-warning: var(--color-warning, #d8b26a);
  --ul-danger: var(--color-destructive, #d98a80);
  --ul-neutral: color-mix(in srgb, var(--ul-ink) 62%, var(--ul-ground));
  --ul-spectrum: none;
  --ul-ease: cubic-bezier(.22, 1, .36, 1);
  --ul-mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;

  /* 正文、边框、辅助文字同样优先取宿主语义色，避免整页被硬编码冷灰蓝覆盖。 */
  --ul-surface: var(--ul-ground);
  --ul-ink: var(--midground, var(--color-foreground, #f3e9da));
  --ul-border: var(--color-border, var(--ul-line));
  --ul-muted: var(--color-muted-foreground, color-mix(in srgb, var(--ul-ink) 68%, var(--ul-ground)));
  --ul-ring: var(--ul-cyan);
  --ul-wash: color-mix(in srgb, var(--ul-ink) 8%, transparent);
  --ul-paper: var(--ul-glass);
  --ul-inset: color-mix(in srgb, var(--ul-ground) 80%, #f0dfc4);
  --ul-selected: color-mix(in srgb, var(--ul-ground) 74%, #f0dfc4);
  --ul-shadow-pop: 0 12px 30px rgba(0, 0, 0, .5);
  --ul-source-color: #7fa8d4; /* 来源：低饱和蓝（数据类别，非品牌主色） */
  --ul-memory-color: #c9a86a; /* 记忆：暖灰金 */
  --ul-skill-color: #79b69a;  /* 技能：柔和青绿 */

  color: var(--ul-ink);
  background-color: var(--ul-ground); /* 不透明深底：dark 主题判定与文字对比的基准 */
  font: 14px/1.6 "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  position: relative;
  /* 不再加水平 padding：宿主已负责页面内边距，叠加会在 content-box 下撑宽整页（视觉校验会报横向溢出）。
     只留纵向余量给暖金光晕尾迹；根自身用 border-box 兜底，避免未来改动再触发宽度增长。 */
  box-sizing: border-box;
  padding: 24px 0 48px;
  min-height: 100%;
}

/* 琥珀光层：几团静态暖金光，作为配色氛围底，不漂移。
   控制台用整页缓慢漂移造氛围，这里改为静止，把「动」留给数据本身（连线/时间/选中）。
   inset 不向左右外扩（会进入 scrollWidth 造成横向溢出），只向上下留呼吸空间。 */
.ul-root::before {
  content: "";
  position: absolute; inset: -18% 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 30% at 10% 4%, rgba(140, 170, 200, .09), transparent 72%),
    radial-gradient(34% 28% at 88% 0%, rgba(140, 170, 200, .07), transparent 72%),
    radial-gradient(30% 26% at 74% 38%, rgba(140, 170, 200, .05), transparent 72%),
    radial-gradient(26% 22% at 18% 72%, rgba(140, 170, 200, .03), transparent 72%);
  filter: blur(30px);
}
/* 坐标网格层：细线 + 底部渐隐，给暖黑底一点「设备坐标」的终端质感；静止不漂移 */
.ul-root::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(190, 205, 220, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 205, 220, .025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 82%);
}
/* 所有静态区块抬到光层之上；阅读列、抽屉、浮层都可交互 */
.ul-root > * { position: relative; z-index: 1; }
.ul-root ::selection { background: rgba(140, 175, 210, .28); color: #eef4fa; }
/* 官方 Hermes 终端笔触：小字标签、数字、状态用等宽，正文仍用无衬线保证中文可读 */
.ul-root :is(.ul-track-seq, .ul-time, .ul-id, .ul-session-count, .ul-chip,
             .ul-map-legend, .ul-player label, .ul-track-current) {
  font-family: var(--ul-mono);
}
/* 宿主未给页面横向内边距，标题与右上控件会贴到视口边缘。
   根不能加水平 padding（content-box 下会撑出横向溢出），改为给直接子级加
   padding-inline：子级均为 border-box、宽度受父约束，不影响文档 scrollWidth。 */
/* main#ul-panel 是标签视图的正文容器；把它也纳入，标签行与内容才与页头对齐。
   内部 .ul-tabs 跟着 main 的 padding 走，不单独加，避免双重内边距。 */
.ul-root > :is(.ul-page-head, .ul-stack, .ul-notebook, .ul-alias-status, main#ul-panel) {
  padding-inline: clamp(18px, 3vw, 40px);
}

/* --------------------------------------------------------------------------
   标题：品牌化渐变流光文字（主题专属，不做单字异色那类模板处理）
   -------------------------------------------------------------------------- */
.ul-title {
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.2;
  /* 必须贴合文字宽度：块级 h1 占满整行时渐变按整行算，文字只落在起始
     色标，首字会变成纯白实心块。fit-content 让流光真正扫过字面。 */
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(100deg, #eef4fa 0%, #eaf0f6 30%, #b7cee3 62%, #eaf0f6 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 只在首次载入扫过一次，hover 时再手动触发；不做无限循环的装饰性流光。 */
  animation: ul-spectrum-flow 1.4s var(--ul-ease) 1 both;
}
.ul-title:hover { animation: ul-spectrum-flow 1.1s var(--ul-ease) 1 both; }
.ul-eyebrow {
  color: var(--ul-cyan);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  opacity: .85;
}
.ul-description { color: var(--ul-muted); }
/* 高级筛选原位展开：不在画布上叠一层表单，手机端也保留刷新入口。 */
.ul-root .ul-learning-workspace .ul-filter-more[open] { flex: 1 1 100%; order: 5; grid-column: 1 / -1; grid-row: auto; }
.ul-root .ul-learning-workspace .ul-filter-more > summary { gap: 8px; }
.ul-root .ul-learning-workspace .ul-filter-more > .ul-row {
  position: static;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  align-items: start;
  gap: 12px;
  margin-bottom: 8px;
  padding: 16px;
  background: var(--ul-paper);
  border-color: var(--ul-line);
  box-shadow: none;
}
.ul-root .ul-filter-more .ul-row > label { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.ul-root .ul-filter-more .ul-input { width: 100%; min-width: 0; box-sizing: border-box; }
.ul-root .ul-filter-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.ul-root .ul-learning-workspace .ul-filter-more > .ul-row > label > span { text-align: left; }
.ul-root .ul-filter-more input[type="date"] { color-scheme: dark; }
@media (forced-colors: active) { .ul-root .ul-filter-more input[type="date"] { color-scheme: light dark; } }
.ul-root .ul-filter-count {
  min-width: 20px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--ul-selected);
  color: var(--ul-cyan);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* 页头里的「访问说明 / 更多」浮层会溢出到下方筛选栏区域。
   head 必须建一个高于筛选栏的层叠层，否则后绘制的筛选栏会盖住浮层下半部分。 */
.ul-page-head { position: relative; z-index: 30; }
/* 顶部结构线：静态琥珀细线，只编码「页头边界」这条信息，不做循环扫描 */
.ul-page-head::after {
  content: "";
  position: absolute; left: 0; bottom: 14px; height: 1px; width: 22%;
  background: linear-gradient(90deg, var(--ul-cyan), var(--ul-violet), transparent);
  opacity: .6;
  pointer-events: none;
}
.ul-readonly {
  border-radius: 999px;
  border-color: rgba(150, 185, 215, .35);
  color: var(--ul-cyan);
  background: rgba(150, 185, 215, .08);
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   导航：tab 激活走渐变下划线 + 辉光；容器下沿一条常驻琥珀细线
   -------------------------------------------------------------------------- */
/* 主导航是各视图工具栏里的 .ul-tabs；.ul-bar 仅用于非标签视图，两者共用一条琥珀基线 */
.ul-bar, .ul-notebook-toolbar > .ul-tabs, .ul-learning-tools .ul-tabs {
  position: relative;
  border-bottom: 1px solid var(--ul-line) !important;
}
.ul-bar::after, .ul-notebook-toolbar > .ul-tabs::after, .ul-learning-tools .ul-tabs::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--ul-cyan), transparent 30%, transparent 70%, var(--ul-violet));
  opacity: .35;
  pointer-events: none;
}
.ul-tab {
  border-radius: 8px 8px 0 0;
  color: var(--ul-muted) !important;
  transition: color .22s var(--ul-ease), background .22s, box-shadow .22s;
}
.ul-tab:hover { background: var(--ul-wash); color: var(--ul-ink) !important; }
.ul-tab-on {
  border-bottom-color: transparent !important;
  color: #eef4fa !important;
  background: rgba(150, 185, 215, .09);
  box-shadow: inset 0 -2px 0 var(--ul-cyan), 0 0 18px rgba(120, 160, 200, .10);
  text-shadow: 0 0 18px rgba(120, 160, 200, .15);
}

/* --------------------------------------------------------------------------
   关系链传导：这是「学习轨迹」的核心语义——来源会话 → 记忆 → 技能。
   连线用流动虚线表达传播方向；被选中/高亮的链路点亮并加速，其余保持安静。
   刻意不做「每块内容 fade-up」的通用入场，静场由数据关系自己承担。
   -------------------------------------------------------------------------- */
/* 来源链路（graph.css 已用 5 4 虚线表示「有原话可追溯」）叠加缓慢流动 */
.ul-map-edge-source path {
  opacity: .68;
  animation: ul-link-flow 2.6s linear infinite;
}
/* 点亮只改变线宽和颜色；不重播透明度动画，避免焦点切换时关系线闪暗。 */
.ul-map-edge-emphasis path,
.ul-map-edge-lit-conversation path,
.ul-map-edge-lit-memory path,
.ul-map-edge-lit-skill path {
  stroke-dasharray: 7 5;
  animation: ul-link-flow 1.1s linear infinite;
}

/* --------------------------------------------------------------------------
   玻璃面板：概览/分区/欢迎/会话容器统一玻璃材质 + 顶部高光内边
   -------------------------------------------------------------------------- */
.ul-section, .ul-welcome, .ul-conversations, .ul-audit,
.ul-notebook, .ul-map, .ul-learning-workspace, .ul-replay,
.ul-filters, .ul-view-head, .ul-card, .ul-panel {
  border: 1px solid var(--ul-glass-edge);
  border-radius: 16px;
  background: var(--ul-sheet);
  /* 底已不透明，不再叠加 backdrop-filter：避免把下层控件/光晕透成「穿透」 */
  box-shadow: 0 16px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* 工作区外层只负责布局，不铺满整页底色：
   半透明大面会把琥珀光晕压成均匀暗棕，整页像一块平板。
   让内部各玻璃卡片自己浮在琥珀光晕上，才有暖黑层次。 */
.ul-root .ul-stack.ul-learning-workspace {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 面板顶沿一条琥珀渐变高光，静态但有辨识度 */
.ul-section, .ul-conversations, .ul-map, .ul-notebook { position: relative; }
.ul-section::before, .ul-conversations::before, .ul-map::before, .ul-notebook::before {
  content: "";
  position: absolute; top: -1px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150, 185, 215, .32), transparent);
  pointer-events: none;
  opacity: .7;
}
.ul-section { padding: 20px 22px; }
.ul-welcome { min-height: 340px; }
.ul-section h3, .ul-audit-head h3, .ul-view-head h3 { color: #eef4fa; font-weight: 620; letter-spacing: -.01em; }
.ul-view-head { padding: 14px 18px; }

/* --------------------------------------------------------------------------
   控件：按钮、输入、筛选、chip、只读徽标统一玻璃 + 交互辉光
   -------------------------------------------------------------------------- */
.ul-btn {
  border: 1px solid var(--ul-line);
  border-radius: 10px;
  background: #1c232c;
  transition: transform .2s var(--ul-ease), border-color .2s, box-shadow .2s, background .2s;
}
.ul-btn:hover {
  border-color: rgba(150, 185, 215, .45);
  background: rgba(150, 185, 215, .09);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  transform: translateY(-2px);
}
.ul-btn:active { transform: translateY(-1px) scale(.97); }
.ul-btn-primary {
  border-color: transparent;
  color: #1b1815;
  font-weight: 650;
  background: var(--ul-cyan);
  box-shadow: none;
}
.ul-btn-primary:hover { box-shadow: none; background: color-mix(in srgb, var(--ul-cyan) 85%, #fff0d8); }
.ul-text-btn { border-bottom-color: var(--ul-line); }
.ul-text-btn:hover { border-bottom-color: var(--ul-cyan); text-shadow: none; }
.ul-input {
  border: 1px solid var(--ul-line);
  border-radius: 10px;
  /* 输入底色改实心：原来 rgba(...,.55) 会透出下面的筛选栏与光晕 */
  background: var(--ul-inset);
  color: var(--ul-ink);
  transition: border-color .2s, box-shadow .2s;
}
.ul-input:focus { border-color: var(--ul-cyan); box-shadow: 0 0 0 3px rgba(150, 185, 215, .14); outline: none; }
.ul-input option { background: #1c232c; color: var(--ul-ink); }
.ul-toggle input { accent-color: var(--ul-cyan); }
.ul-root :is(button, input, select, summary, a, [tabindex]):focus-visible {
  outline: 2px solid var(--ul-cyan);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(150, 185, 215, .14);
}
.ul-chip { border-radius: 999px; }
.ul-t-ok { color: var(--ul-positive); border-color: rgba(150, 185, 215, .45); background: rgba(160, 185, 210, .10); }
.ul-t-warn { color: var(--ul-warning); border-color: rgba(216, 178, 106, .45); background: rgba(216, 178, 106, .08); }
.ul-t-bad { color: var(--ul-danger); border-color: rgba(217, 138, 128, .45); background: rgba(217, 138, 128, .08); }
.ul-bad-text { color: var(--ul-danger); }
.ul-warn, .ul-notice {
  border-left-color: var(--ul-warning);
  background: rgba(216, 178, 106, .08);
}
.ul-error {
  border-left-color: var(--ul-danger);
  background: rgba(217, 138, 128, .08);
}
.ul-scope, .ul-source-status { background: rgba(160, 185, 210, .07); }
.ul-source-status { border-left-color: var(--ul-blue); }
.ul-hint, .ul-caption, .ul-muted, .ul-time, .ul-id, .ul-identity { color: var(--ul-muted); }
/* 右上浮层（访问说明 / 更多菜单）：压缩成独立卡片，避免在筛选栏上方铺一大片文字。
   宽度、行高、内边距一起收紧，正文降到低视觉权重；底已是实心，不会透出下层控件。 */
.ul-root .ul-menu-panel {
  width: min(300px, calc(100cqw - 24px));
  padding: 12px 14px;
  border: 1px solid var(--ul-glass-edge);
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ul-ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* 浮层是主动展开才阅读的内容，不参与常驻说明的降噪；只收紧行距，保住可读性 */
.ul-root .ul-access-note .ul-menu-panel p,
.ul-root .ul-access-note .ul-menu-panel .ul-identity {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--ul-muted);
}
.ul-root .ul-access-note .ul-menu-panel p:last-child { margin-bottom: 0; }
.ul-root .ul-advanced .ul-menu-panel { width: 168px; padding: 6px; }
.ul-root .ul-advanced .ul-quiet { font-size: 12px; }

.ul-alias-status { color: #eaf0f6; }
.ul-alias-status .ul-hint, .ul-alias-status .ul-muted { color: #aebccb; }
.ul-id, .ul-track-seq { color: var(--ul-cyan); opacity: .85; }

/* 说明文字保留可读对比：不再把米灰压暗，只收紧字号与行距。
   保留文字与可折叠行为（不动 DOM 契约），只收紧字号和行距。 */
.ul-root :is(.ul-map-caption > span, .ul-track-timezone, .ul-track-status,
             .ul-learning-coverage > summary, .ul-description,
             .ul-map-legend, .ul-hint, .ul-caption) {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ul-muted);
  letter-spacing: 0;
}
/* 操作提示保留足够字号；折叠入口支持键盘和触屏，详情不用仅悬停可读的 title 承载。 */
.ul-root .ul-map-caption > span { font-size: 12px; color: var(--ul-muted); }
.ul-root .ul-track-timezone,
.ul-root .ul-player-help { position: relative; color: var(--ul-muted); font-size: 12px; }
.ul-root :is(.ul-track-timezone, .ul-player-help) > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ul-root :is(.ul-track-timezone, .ul-player-help) > summary::after { content: "+"; }
.ul-root :is(.ul-track-timezone, .ul-player-help)[open] > summary::after { content: "−"; }
/* 说明在原位置展开，随页面排版；避免窄屏浮层越界或遮住控制按钮。 */
.ul-root :is(.ul-track-timezone, .ul-player-help)[open] { flex: 1 1 100%; }
.ul-root .ul-track-timezone[open] { order: 5; }
.ul-root :is(.ul-track-timezone, .ul-player-help) > p {
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid var(--ul-line);
  border-radius: 10px;
  background: var(--ul-paper);
  color: var(--ul-ink);
  white-space: normal;
}
/* 显式覆盖功能层的 column，避免 flex-basis 被解释为高度；默认说明与控制栏共用一行。 */
.ul-root .ul-journey-frame .ul-player { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.ul-root .ul-player-main { flex: 1 1 720px; min-width: 0; }
.ul-root .ul-player-help:not([open]) { flex: none; }
.ul-root .ul-player-note { padding-left: 6px; border-left: 1px solid var(--ul-line); }
/* 播放器内的说明受播放器文字对比校验约束，恢复高对比暖灰 */
.ul-root .ul-player :is(.ul-player-note, .ul-caption, .ul-hint, .ul-quiet) {
  font-size: 12px;
  color: var(--ul-muted);
}
.ul-root .ul-learning-coverage > summary { font-size: 12px; color: var(--ul-muted); }
.ul-root .ul-learning-coverage .ul-caption { font-size: 12px; color: var(--ul-muted); }

/* --------------------------------------------------------------------------
   会话列表：激活项左侧琥珀条 + 辉光，阅读历史时给出明确位置感
   -------------------------------------------------------------------------- */
.ul-conversations { overflow: hidden; }
.ul-session-side { border-left-color: var(--ul-line); }
.ul-session { border-radius: 0; }
.ul-session:hover { background: var(--ul-wash); }
.ul-session[aria-pressed="true"] {
  background: linear-gradient(90deg, rgba(150, 185, 215, .10), transparent 80%);
  border-left-color: var(--ul-cyan);
  box-shadow: inset 0 0 24px rgba(150, 185, 215, .04);
}
.ul-session-title { color: #eaf0f6; }
.ul-session-replay { color: var(--ul-cyan) !important; }
.ul-side-head, .ul-session-count { color: var(--ul-muted); }

/* --------------------------------------------------------------------------
   关系图 / 时间线：画布深底 + 坐标感；节点与连线走琥珀数据色
   -------------------------------------------------------------------------- */
.ul-map { overflow: hidden; }
.ul-map-canvas, .ul-journey-frame[data-ul-theme="dark"] .ul-map-canvas {
  background-color: #131a21;
  /* 保持不透明深底（主题判定依赖它），用暖金径向渐晕造出纵深，避免大片死黑 */
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 8%, rgba(150, 185, 215, .05), transparent 70%),
    radial-gradient(ellipse 50% 50% at 12% 92%, rgba(150, 185, 215, .03), transparent 72%),
    linear-gradient(rgba(190, 205, 220, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 205, 220, .035) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
}
.ul-map-node {
  border: 1px solid var(--ul-line);
  border-radius: 12px;
  /* 节点底色改不透明，去掉模糊：画布上多块半透明卡片叠加会互相透出杂色 */
  background: var(--ul-glass);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
  transition: box-shadow .22s var(--ul-ease), border-color .22s var(--ul-ease);
  /* hover / 拖拽结束若切回入场 animation，会再次从 opacity:0 开始并闪一下。
     节点持续可见，交互反馈交给边框和阴影过渡，保持拖拽命中区域稳定。 */
  opacity: 1;
  animation: none;
}
.ul-map-node:hover, .ul-map-node:focus-visible {
  border-color: color-mix(in srgb, var(--ul-node-color) 65%, var(--ul-line));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 24px color-mix(in srgb, var(--ul-node-color) 16%, transparent);
}
/* 功能层在明暗主题里局部定义类别色，这里显式继承皮肤根的固定映射。
   形状（○/□/◇）与标签继续保留，色觉差异下也能辨认。 */
.ul-journey-frame, .ul-journey-frame[data-ul-theme="dark"] {
  --ul-source-color: inherit;
  --ul-memory-color: inherit;
  --ul-skill-color: inherit;
}
.ul-root .ul-map-node-conversation { --ul-node-color: var(--ul-source-color); border-left-color: var(--ul-node-color); }
.ul-root .ul-map-node-memory { --ul-node-color: var(--ul-memory-color); border-left-color: var(--ul-node-color); }
.ul-root .ul-map-node-skill { --ul-node-color: var(--ul-skill-color); border-left-color: var(--ul-node-color); }
.ul-root .ul-map-node.ul-map-selected,
.ul-root .ul-map-node:focus-visible { outline-color: var(--ul-node-color); }
.ul-journey-frame .ul-entity-conversation { color: var(--ul-source-color); }
.ul-journey-frame .ul-entity-memory { color: var(--ul-memory-color); }
.ul-journey-frame .ul-entity-skill { color: var(--ul-skill-color); }
.ul-compose-source { background: var(--ul-source-color); }
.ul-compose-memory { background: var(--ul-memory-color); }
.ul-compose-skill { background: var(--ul-skill-color); }
.ul-map-edge path, .ul-map-edge line { stroke: var(--ul-muted); }
/* 通用强调规则放在分类规则之前，让点亮链路保持对应实体的颜色。 */
.ul-map-edge.ul-map-edge-source path { stroke: var(--ul-source-color); opacity: .8; }
.ul-map-edge.ul-map-edge-emphasis path { stroke: var(--ul-ink); }
.ul-map-edge.ul-map-edge-lit-conversation path { stroke: var(--ul-source-color); }
.ul-map-edge.ul-map-edge-lit-memory path { stroke: var(--ul-memory-color); }
.ul-map-edge.ul-map-edge-lit-skill path { stroke: var(--ul-skill-color); }
.ul-map-edge text { fill: var(--ul-muted); }
/* graph.css:152 的 .ul-journey-frame .ul-player（0,2,0）会强制 transparent/border:0，
   这里用同等特异性把它请回来：播放器给一道玻璃细框与暖黑底，仍保持通栏布局不变。 */
.ul-root .ul-journey-frame .ul-player {
  color: var(--ul-ink);
  border: 1px solid var(--ul-line);
  border-radius: 12px;
  background: #131a21; /* 不透明暖黑底：满足播放器文字对比校验，也不透出下方光晕 */
  padding: 10px 14px;
}
.ul-player label, .ul-player-locate, .ul-player-locate > summary { color: var(--ul-ink); }
.ul-player-locate input { color: var(--ul-ink); background: #101418; }
/* 原生 range 若不接管会露出白色轨道，在玻璃层下叠成突兀亮带。
   graph.css:156 强制 min-height:44px 作触控目标，不能压缩；因此保留 44px 容器，
   把细轨画在 ::-webkit-slider-runnable-track 里并垂直居中，input 自身背景透明。 */
.ul-root input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 44px; margin: 0;
  border: 0; background: transparent;
  cursor: pointer;
}
.ul-root input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ul-cyan), var(--ul-blue)),
              rgba(190, 205, 220, .14);
  background-size: var(--ul-range-fill, 100%) 100%, 100% 100%;
  background-repeat: no-repeat;
}
.ul-root input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  border: 2px solid #eef4fa;
  background: var(--ul-cyan);
  box-shadow: 0 0 14px rgba(150, 185, 215, .5), 0 0 3px rgba(150, 185, 215, .5);
  transition: transform .18s var(--ul-ease), box-shadow .18s;
}
.ul-root input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.22);
  box-shadow: 0 0 22px rgba(150, 185, 215, .6);
}
.ul-root input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ul-cyan), var(--ul-blue)), rgba(190, 205, 220, .14);
  background-size: var(--ul-range-fill, 100%) 100%, 100% 100%;
  background-repeat: no-repeat;
}
.ul-root input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #eef4fa; background: var(--ul-cyan);
  box-shadow: 0 0 14px rgba(150, 185, 215, .5);
}
.ul-root input[type="range"]:focus-visible { outline: 2px solid var(--ul-cyan); outline-offset: 4px; }
/* 「时间推进」：滑块被指向/聚焦时，轨道上有一道暖光沿时间方向扫过，
   把「这是一条可推进的时间轴」说清楚；静止时不消耗动效。 */
.ul-root input[type="range"]:hover::-webkit-slider-runnable-track,
.ul-root input[type="range"]:focus-visible::-webkit-slider-runnable-track {
  background-image: linear-gradient(90deg, var(--ul-cyan), var(--ul-blue)),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .38) 50%, transparent 100%),
    rgba(190, 205, 220, .14);
  background-size: var(--ul-range-fill, 100%) 100%, 40% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: ul-time-sweep 1.8s linear infinite;
}
.ul-track-detail { border-top-color: var(--ul-line); }
/* 时间轴当前事件：只用一条 2px 亮金左标 + 实心底标识位置。
   半透明或满宽横向渐变在宽行上会读作杂色带，与暖黑底冲突，故收敛。 */
.ul-journey-frame .ul-track-current {
  background: var(--ul-selected);
  box-shadow: inset 2px 0 0 var(--ul-cyan);
  animation: ul-playhead .32s var(--ul-ease) both;
}
/* 用不透明深底，避免半透明玻璃把下方琥珀光晕透成杂色空带 */
.ul-journey-frame .ul-track-list-wrap {
  border-color: var(--ul-line);
  background: #171d24;
}
/* 全屏保留画布与播放控制，共用原组件状态，退出时不重建布局或快照。
   页面全屏受 main 的层叠上下文约束，需连同工作区抬过页头。 */
.ul-root:has(.ul-canvas-fullscreen) > main#ul-panel { z-index: 1001; }
.ul-root .ul-journey-frame.ul-canvas-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  padding: 12px;
  overflow: hidden;
  background: var(--ul-ground);
}
.ul-root .ul-canvas-fullscreen .ul-journey-surface {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ul-root .ul-canvas-fullscreen .ul-map {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ul-root .ul-canvas-fullscreen .ul-map-canvas { flex: 1 1 0; height: auto; min-height: 0; }
.ul-root .ul-canvas-fullscreen :is(.ul-map-header, .ul-map-caption, .ul-map-index, .ul-player) { flex-shrink: 0; }
.ul-root .ul-canvas-fullscreen .ul-map-index { max-height: min(25dvh, 200px); overflow: auto; }
.ul-root .ul-canvas-fullscreen .ul-player { margin-top: 0; }
.ul-root .ul-canvas-fullscreen > .ul-learning-coverage,
.ul-root .ul-canvas-fullscreen .ul-journey-heading,
.ul-root .ul-canvas-fullscreen .ul-track-list-wrap { display: none; }
/* 全屏里的详情仍在同一原生全屏子树内，并留出播放器空间。 */
.ul-root .ul-canvas-fullscreen .ul-detail-drawer { z-index: 60; max-height: 100%; }
@media (max-width: 720px) {
  .ul-root .ul-journey-frame.ul-canvas-fullscreen { padding: 6px; }
  .ul-root .ul-canvas-fullscreen .ul-map-header { flex-wrap: wrap; }
  .ul-root .ul-canvas-fullscreen .ul-map-caption { display: none; }
}
/* 当前事件与播放器同步点亮，拖拽仅改变临时布局，不改业务记录。 */
.ul-root .ul-map-node { touch-action: none; user-select: none; cursor: grab; }
.ul-root .ul-map-node.ul-map-current { outline: 2px solid var(--ul-node-color); outline-offset: 3px; }
.ul-root .ul-map-node.ul-map-dragging { z-index: 4; cursor: grabbing; user-select: none; animation: none; }
/* 节点描述留空时不占行：避免重复占位说明收掉后卡片里留一道空隙 */
.ul-root .ul-map-node-description:empty { display: none; }
/* 单条事件没有变化项时的引导：比正文低一级，但仍保证暖黑底上的可读性 */
.ul-journey-frame .ul-event-empty {
  color: var(--ul-muted);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   详情抽屉：玻璃浮层 + 入场展开 + 顶部琥珀高光
   -------------------------------------------------------------------------- */
.ul-learning-detail.ul-detail-drawer {
  border: 1px solid var(--ul-glass-edge);
  border-radius: 18px 0 0 18px;
  /* 抽屉是覆盖在画布上的浮层，必须完全不透明，否则下层节点会透进正文区 */
  background: var(--ul-glass);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .55);
  animation: ul-drawer-in .4s var(--ul-ease) both;
}
.ul-detail-head {
  border-bottom-color: var(--ul-line);
  background: transparent;
}
.ul-learning-detail .ul-fact-grid > div {
  border: 1px solid var(--ul-line);
  background: #222b34;
}
.ul-learning-detail .ul-diff {
  border-color: var(--ul-line);
  border-radius: 12px;
  background: var(--ul-inset);
}
.ul-learning-detail .ul-diff .ul-diff-add {
  border-left-color: var(--ul-positive);
  background: #26323d;
}
.ul-learning-detail .ul-diff .ul-diff-remove { border-left-color: var(--ul-danger); }
.ul-learning-detail .ul-evidence { border-left-color: var(--ul-cyan); }
.ul-learning-detail .ul-chip { border-color: var(--ul-line); }
.ul-learning-detail .ul-detail-technical, .ul-learning-detail .ul-definition dt { color: var(--ul-muted); }
.ul-detail-close { color: var(--ul-muted); }
.ul-detail-close:hover { color: var(--ul-cyan); text-shadow: none; }

/* --------------------------------------------------------------------------
   终端回放：唯一安静区，保留琥珀-on-black TUI 质感（主题里的「真实数据」锚点）
   -------------------------------------------------------------------------- */
.ul-terminal .ul-line, .ul-terminal .ul-line * {
  color: #e8c37a !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace !important;
}
.ul-terminal .ul-ts { color: #8a7a52 !important; }
.ul-terminal .ul-tool { color: #d8a24a !important; }

/* 滚动条：细暖光轨，铺满时也不破坏黑场 */
.ul-root ::-webkit-scrollbar { width: 10px; height: 10px; }
.ul-root ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .02); }
.ul-root ::-webkit-scrollbar-thumb {
  background: rgba(170, 190, 210, .28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.ul-root ::-webkit-scrollbar-thumb:hover { background: rgba(150, 185, 215, .45); background-clip: padding-box; }

/* --------------------------------------------------------------------------
   关键帧：只保留「学习轨迹」自己的语义动效——关系链传导、时间推进、溯源聚焦。
   刻意不引入控制台式的整页漂移、通用 fade-up、装饰呼吸灯。
   命名统一 ul- 前缀，与姊妹插件 hpc- 区分避免全局冲突。
   -------------------------------------------------------------------------- */
/* 标题：一次性从左到右扫过字面并停在终态 */
@keyframes ul-spectrum-flow {
  from { background-position: -120% 50%; }
  to { background-position: 120% 50%; }
}
/* 关系链：虚线沿传播方向流动（stroke-dashoffset 为负时流向 target 端） */
@keyframes ul-link-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -24; }
}
/* 播放头：当前事件左标快速收束，回应「拖到这个时间点」的动作 */
@keyframes ul-playhead {
  from { box-shadow: inset 10px 0 0 rgba(150, 185, 215, .45); }
  to { box-shadow: inset 2px 0 0 var(--ul-cyan); }
}
/* 时间推进：轨道上一道暖光沿时间方向扫过 */
@keyframes ul-time-sweep {
  from { background-position: 0 0, -40% 0, 0 0; }
  to { background-position: 0 0, 140% 0, 0 0; }
}
/* 抽屉：用户点开时的位移响应，纯交互反馈，不做模糊滤镜 */
@keyframes ul-drawer-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   窄屏保护：收紧横向内边距、允许工具栏换行，避免长控件把页面撑出横向滚动。
   只作用于皮肤层，不改产品已有的响应式断点与布局。
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .ul-root > :is(.ul-page-head, .ul-stack, .ul-notebook, .ul-alias-status, main#ul-panel) {
    padding-inline: 14px;
  }
  /* 琥珀光与网格伪层在窄屏关闭，减少合成开销并避免任何外扩盒 */
  .ul-root::before, .ul-root::after { display: none; }
  .ul-root .ul-learning-tools,
  .ul-root .ul-filters,
  .ul-root .ul-row { flex-wrap: wrap; }
  .ul-root .ul-page-head { flex-wrap: wrap; }
}
/* 深底兜底：窄屏下工作区仍保持不透明，避免半透明层透出宿主浅色 */
.ul-root { overflow-x: clip; }

/* --------------------------------------------------------------------------
   质量底线：尊重降低动画偏好；强制颜色模式回退到系统色，保证可读
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ul-root, .ul-root *, .ul-root *::before, .ul-root *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .ul-root::before, .ul-root::after { display: none; }
}
@media (forced-colors: active) {
  .ul-root { background-color: Canvas; color: CanvasText; }
  .ul-root::before, .ul-root::after { display: none; }
  .ul-title { -webkit-text-fill-color: CanvasText; background: none; color: CanvasText; }
  .ul-tab-on { border-bottom-color: Highlight; box-shadow: none; text-shadow: none; }
  .ul-root :is(.ul-btn, .ul-input, .ul-chip, .ul-map-node, .ul-map, .ul-section, .ul-conversations) {
    border: 1px solid CanvasText; background: Canvas; box-shadow: none;
  }
  .ul-map-canvas, .ul-player { background: Canvas; }
  .ul-terminal .ul-line, .ul-terminal .ul-line * { color: CanvasText !important; }
}

/* --------------------------------------------------------------------------
   第二轮修正：贴合宿主暖色 Ember，去掉整页光晕/渐变/浮动按钮装饰。
   只在 .ul-root 作用域内覆盖，宿主全局与其他插件页不受影响。
   -------------------------------------------------------------------------- */

/* 满宽铺进宿主内容区：两侧不留空带，左右内边距沿用直接子级的一致值。 */
.ul-root, .ul-root:has(.ul-learning-workspace) { max-width: none; margin-inline: 0; }

/* 静态光晕、网格、面板顶沿渐变与页头扫描线都只是装饰，全部撤掉。 */
.ul-root::before, .ul-root::after,
.ul-section::before, .ul-conversations::before, .ul-map::before, .ul-notebook::before,
.ul-page-head::after,
.ul-bar::after, .ul-notebook-toolbar > .ul-tabs::after, .ul-learning-tools .ul-tabs::after { display: none; }
.ul-title, .ul-title:hover {
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--ul-ink); animation: none;
}
.ul-eyebrow { color: var(--ul-muted); }

/* 卡片、菜单、控件统一取语义表面色；阴影只留一道细边，不再叠辉光。 */
.ul-root :is(.ul-section, .ul-welcome, .ul-conversations, .ul-audit,
             .ul-notebook, .ul-map, .ul-filters, .ul-view-head, .ul-card, .ul-panel,
             .ul-btn, .ul-input option, .ul-map-canvas, .ul-track-list-wrap,
             .ul-diff-add, .ul-menu-panel) {
  background-color: var(--ul-sheet);
}
.ul-root .ul-fact-grid > div { background-color: var(--ul-inset); }
.ul-root :is(.ul-section, .ul-welcome, .ul-conversations, .ul-audit,
             .ul-notebook, .ul-map, .ul-filters, .ul-view-head, .ul-card, .ul-panel) {
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.ul-root .ul-journey-frame[data-ul-theme] .ul-map-canvas { background: var(--ul-sheet); }
.ul-root .ul-journey-frame .ul-map-minimap { background: var(--ul-sheet); }
/* 选中态只改变外圈，不覆盖类别左边线，图例与卡片保持同一颜色。 */
.ul-root .ul-journey-frame .ul-map-node { border-left-color: var(--ul-node-color); }
.ul-root .ul-journey-frame .ul-player,
.ul-root .ul-player-locate input { background-color: var(--ul-sheet); }
.ul-root .ul-menu-panel { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.ul-root .ul-btn:hover, .ul-root .ul-btn:active { transform: none; box-shadow: none; }
.ul-root .ul-btn:hover { background-color: var(--ul-wash); }
.ul-root .ul-btn.ul-btn-primary { background-color: var(--ul-cyan); color: #1b1815; box-shadow: none; }
.ul-root .ul-btn.ul-btn-primary:hover { background-color: color-mix(in srgb, var(--ul-cyan) 85%, #fff0d8); box-shadow: none; }
.ul-root .ul-tab-on { box-shadow: inset 0 -2px 0 var(--ul-cyan); text-shadow: none; }
.ul-root .ul-session[aria-pressed="true"] { background: var(--ul-selected); box-shadow: none; }
.ul-root ::selection { background: color-mix(in srgb, var(--ul-cyan) 38%, transparent); color: var(--ul-ink); }
.ul-root .ul-map-node:hover, .ul-root .ul-map-node:focus-visible,
.ul-root .ul-journey-frame .ul-map-node.ul-map-selected { box-shadow: 0 0 0 1px var(--ul-cyan); }
.ul-root input[type="range"]::-webkit-slider-thumb,
.ul-root input[type="range"]::-moz-range-thumb { box-shadow: none; }
.ul-root input[type="range"]::-webkit-slider-thumb:hover { transform: none; box-shadow: none; }

/* 宿主 code 规则会把 inline code 染成黑字；这里显式给出前景、底色和等宽字体。
   只作用于 code/pre，不改用户正文；终端回放的琥珀 !important 仍优先于本层。 */
.ul-root :is(.ul-markdown code, .ul-code-block code, .ul-markdown pre, .ul-code-block pre) {
  font-family: var(--ul-mono);
  color: #f6e9d2 !important;
}
.ul-root :is(.ul-code-block, .ul-markdown pre) {
  background-color: #211b15;
  border: 1px solid var(--ul-line);
  border-radius: 8px;
}
.ul-root .ul-markdown code { background-color: #2b241c !important; padding: 2px 5px; border-radius: 4px; }
.ul-root :is(.ul-code-block code, .ul-markdown pre code) { background-color: transparent !important; padding: 0; }
/* 终端回放仍是琥珀字：更高特异性 + !important 盖过上面的通用 code 色。 */
.ul-root .ul-terminal .ul-markdown code { color: #e8c37a !important; background-color: transparent !important; }