/* Rock · A quiet workspace for reading and collecting ideas. */
:root {
  color-scheme: light;
  --ui-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --chinese-font: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --reading-font: var(--chinese-font);
  --ink: #242d29;
  --ink-secondary: #646e67;
  --ink-tertiary: #929a93;
  --green: #32675c;
  --green-hover: #27574d;
  --green-tint: #edf3ef;
  --sidebar: #f1f3ef;
  --panel: #fafbf8;
  --paper: #fff;
  --canvas: #f8f8f5;
  --line: #e7eae3;
  --line-strong: #d9ded5;
  --reading-size: 19px;
  --sidebar-width: 218px;
  --panel-width: 290px;
  --windowbar-height: 56px;
  font-family: var(--ui-font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: var(--canvas); font-size: 13px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { outline: none; }
button { appearance: none; -webkit-appearance: none; border: 0; background: none; }
button, a, input, select, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid #6e9b8e; outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: #7fa597; box-shadow: 0 0 0 3px #32675c12; }
button:disabled { cursor: default; opacity: .42; }
button:disabled:hover { background: inherit; }
svg { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
p, h1, h2, h3, h4 { margin: 0; }
::selection { background: #d9e8dc; color: #1f3028; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 5px; background: #c6cdc2; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #a8b5a6; }

.app-shell { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--paper); }
.window-bar { height: var(--windowbar-height); min-height: var(--windowbar-height); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 0 22px 0 20px; border-bottom: 1px solid var(--line); background: #f7f8f4; user-select: none; }
.window-leading, .window-actions { display: flex; align-items: center; min-width: 0; }
.window-leading { gap: 17px; }
.traffic-lights { display: flex; align-items: center; gap: 8px; padding-right: 1px; }
.traffic-lights span { width: 11px; height: 11px; border: 1px solid #0000000d; border-radius: 50%; background: #ff6059; }
.traffic-lights span:nth-child(2) { background: #ffbd2e; }
.traffic-lights span:nth-child(3) { background: #28c840; }
.window-leading > .icon-button { color: #66756b; margin-left: 1px; }
.wordmark { color: #2d493c; font-size: 18px; font-weight: 600; letter-spacing: -.7px; white-space: nowrap; }
.wordmark-period { color: #588673; margin-left: 3px; }
.view-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #e1e5dd; border-radius: 8px; background: #ecefe8; }
.view-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 92px; height: 29px; padding: 0 13px; color: #778174; font-size: 12px; border-radius: 5px; transition: color .16s, background .16s, box-shadow .16s; }
.view-switch svg { width: 15px; height: 15px; }
.view-switch button:hover { color: #3a5b4b; }
.view-switch button.selected { background: #fff; color: #2f5d4c; box-shadow: 0 1px 3px #283d2810, 0 0 0 1px #1e341405; font-weight: 550; }
.nav-count { font-size: 10px; line-height: 16px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: #e4e9df; color: #6b796a; font-variant-numeric: tabular-nums; }
.window-actions { justify-content: flex-end; gap: 10px; }
.draft-label { color: #9ba297; font-size: 10px; letter-spacing: .6px; padding-right: 9px; white-space: nowrap; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 5px; flex: 0 0 auto; color: #7c877d; border-radius: 5px; transition: background .15s, color .15s; }
.icon-button:hover { color: #315b4b; background: #e8ede5; }
.icon-button svg { width: 17px; height: 17px; }
.type-button { width: auto; gap: 6px; padding: 4px 8px; color: #647263; font-family: Georgia, serif; font-size: 17px; letter-spacing: -.6px; }
.appearance-button-label { font-family: var(--ui-font); font-size: 12px; letter-spacing: 0; }
.export-button { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid #d8ded3; border-radius: 6px; background: #fff; color: #53604f; font-size: 12px; box-shadow: 0 1px 1px #24392103; }
.export-button:hover { border-color: #b6c4b4; background: #fcfdfb; }
.export-button svg { width: 14px; height: 14px; }

.workspace { position: relative; display: flex; flex: 1; min-height: 0; min-width: 0; }
.book-sidebar { display: flex; flex-direction: column; flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); min-width: 0; padding: 21px 13px 0; background: var(--sidebar); border-right: 1px solid #e3e7dd; user-select: none; }
.back-to-library { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; padding: 3px 8px; color: #84907e; font-size: 11px; border-radius: 5px; }
.back-to-library:hover { color: #385b46; background: #e5eadd; }
.back-to-library svg { width: 14px; height: 14px; }
.current-book { display: flex; align-items: flex-start; gap: 12px; margin: 26px 7px 30px; }
.book-cover { display: block; width: 60px; height: 91px; flex: 0 0 60px; object-fit: cover; border-radius: 2px 4px 4px 2px; background: #dfe5d7; box-shadow: 0 3px 7px #2a3a2420, 0 0 0 1px #253b1710; }
.book-meta { padding-top: 2px; min-width: 0; }
.book-meta h1 { font-family: var(--chinese-font); font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: -.1px; color: #404b3b; }
.book-meta p { color: #8b9584; font-size: 9px; line-height: 1.6; margin-top: 7px; }
.format-label { display: inline-block; margin-top: 6px; padding: 1px 5px; border: 1px solid #dce2d6; color: #8a9681; font-size: 8px; line-height: 13px; letter-spacing: .5px; border-radius: 3px; }
.sidebar-section-label { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 11px; color: #909a87; font-size: 10px; letter-spacing: 1px; }
.sidebar-section-label > :last-child { color: #a6ae9d; font-size: 9px; letter-spacing: 1.2px; }
.chapter-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
.chapter-item { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 7px; width: 100%; padding: 12px 9px 12px 10px; margin: 0 0 3px; text-align: left; color: #7b8773; border-radius: 6px; transition: color .15s, background .15s; }
.chapter-item:hover { background: #e9ede2; color: #4c6543; }
.chapter-item.active { background: #e2e9db; color: #3e6447; }
.chapter-item.active::before { content: ""; position: absolute; top: 13px; bottom: 13px; left: -13px; width: 2px; border-radius: 0 2px 2px 0; background: #507656; }
.chapter-item .number { padding-top: 1px; font-size: 10px; color: #a1ab97; font-variant-numeric: tabular-nums; line-height: 18px; }
.chapter-item.active .number { color: #728968; }
.chapter-label { min-width: 0; font-size: 11px; line-height: 1.7; font-weight: 450; }
.chapter-item.active .chapter-label { font-weight: 550; }
.chapter-active-dot { position: absolute; top: 19px; right: 8px; width: 4px; height: 4px; background: #8da579; border-radius: 50%; }
.chapter-item.active .chapter-label { padding-right: 7px; }
.sidebar-footer { display: flex; align-items: center; gap: 6px; height: 48px; min-height: 48px; margin: 0 7px; color: #9aa490; border-top: 1px solid #e0e5d8; font-size: 9px; }
.local-status-dot { width: 4px; height: 4px; border-radius: 50%; background: #93ab88; }
.sidebar-footer .icon-button { margin-left: auto; color: #a0aa96; width: 24px; height: 24px; }
.sidebar-footer .icon-button svg { width: 13px; height: 13px; }
.sidebar-collapsed .book-sidebar, body.sidebar-collapsed .book-sidebar { display: none; }

.main-area { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; background: var(--paper); }
.reader-view { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.reading-toolbar { height: 59px; min-height: 59px; display: flex; align-items: center; gap: 15px; padding: 0 27px 0 31px; border-bottom: 1px solid #edf0e8; background: var(--paper); }
.chapter-breadcrumb { display: flex; flex: 1; align-items: center; gap: 9px; min-width: 0; color: #8c9686; font-size: 11px; white-space: nowrap; }
.chapter-breadcrumb > :first-child { flex: 0 0 auto; color: #697b60; }
.chapter-breadcrumb > :last-child { overflow: hidden; text-overflow: ellipsis; }
.chapter-breadcrumb svg { width: 10px; height: 10px; color: #bcc4b6; }
.collect-target { display: flex; align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid transparent; border-radius: 5px; color: #819074; font-size: 10px; white-space: nowrap; max-width: 220px; }
.collect-target:hover, .collect-target[aria-expanded="true"] { background: #f3f6ef; border-color: #e7ecdf; color: #4d7052; }
.collect-target > svg:first-child { width: 13px; height: 13px; }
.collect-target > span { overflow: hidden; text-overflow: ellipsis; }
.collect-target .small-chevron { width: 11px; height: 11px; margin-left: 3px; color: #a7b29e; }
.panel-toggle { width: 26px; height: 26px; color: #8fa080; transform: rotate(180deg); }
.panel-toggle.active { color: #6a8661; background: #f0f4e9; }
.classification-toolbar { display: flex; align-items: center; min-height: 49px; height: 49px; gap: 14px; padding: 0 29px 0 31px; border-bottom: 1px solid #edf0e8; background: var(--paper); user-select: none; }
.toolbar-caption { flex: 0 0 auto; color: #a0a995; font-size: 10px; letter-spacing: .3px; }
.category-strip { display: flex; align-items: center; flex: 1; gap: 7px; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.category-strip::-webkit-scrollbar { display: none; }
.category-chip, .category-label { --category-ink: color-mix(in srgb, var(--category-color, #8b8a91) 35%, #202620); }
.category-chip { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 7px; min-height: 30px; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--category-color, #8b8a91) 18%, white); border-radius: 5px; color: #667168; background: color-mix(in srgb, var(--category-color, #8b8a91) 5%, white); font-size: 12px; font-weight: 450; line-height: 20px; white-space: nowrap; transition: background .15s, border-color .15s; }
.category-chip:hover { background: color-mix(in srgb, var(--category-color, #8b8a91) 9%, white); border-color: color-mix(in srgb, var(--category-color, #8b8a91) 38%, white); }
.category-chip.active { border-color: color-mix(in srgb, var(--category-color, #8b8a91) 65%, white); background: color-mix(in srgb, var(--category-color, #8b8a91) 12%, white); color: var(--category-ink); font-weight: 550; }
.category-dot, .tiny-dot { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--mark-color, var(--category-color, #8da98b)); }
.category-chip .category-dot { width: 3px; height: 12px; border-radius: 1px; background: var(--category-color, #8b8a91); opacity: .85; }
.category-count { display: inline-flex; align-items: center; justify-content: center; min-width: 13px; height: 18px; color: #8b948c; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.category-chip.active .category-count { color: var(--category-ink); font-weight: 550; }
.classification-toolbar > .icon-button { width: 25px; height: 25px; margin-left: 1px; color: #a1ac96; }
.classification-toolbar > .icon-button svg { width: 14px; height: 14px; }

.reader-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--paper); scrollbar-gutter: stable; }
.reading-sheet { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 43px 70px 48px; }
.chapter-intro { display: block; gap: 37px; padding: 34px 0 29px; align-items: start; }
.section-eyebrow { font-family: var(--ui-font); font-size: 9px; color: #9ca98f; letter-spacing: 1.6px; line-height: 1.5; font-weight: 450; }
.chapter-intro .section-eyebrow { margin-bottom: 12px; font-size: 8px; }
.chinese-heading { font-family: var(--chinese-font); font-size: 24px; font-weight: 500; line-height: 1.48; letter-spacing: .2px; color: #34422e; padding-top: 1px; text-wrap: balance; }
.reading-blocks { padding-top: 1px; }
.reading-section-heading { display: block; gap: 37px; margin: 24px 0 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.reading-section-heading h3 { color: #52654f; font-size: 17px; font-weight: 500; line-height: 1.5; font-family: var(--chinese-font); }
.reading-block { position: relative; display: block; column-gap: 37px; align-items: start; padding: 7px 0 23px; margin-bottom: 9px; border-radius: 3px; transition: background .24s; scroll-margin-top: 24px; }
.reading-block::after { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; right: -12px; border: 1px solid transparent; border-radius: 5px; pointer-events: none; transition: border-color .2s, background .2s; z-index: 0; }
.paragraph-number { position: absolute; top: 17px; left: -28px; width: 17px; color: #c0c7b8; font-size: 8px; line-height: 12px; text-align: right; font-family: var(--ui-font); font-variant-numeric: tabular-nums; user-select: none; }
.paragraph-cell { position: relative; z-index: 1; min-width: 0; }
.reader-paragraph { font-size: var(--reading-size); font-weight: 400; overflow-wrap: break-word; cursor: text; }
.reader-paragraph { font-family: var(--reading-font); color: #48513f; line-height: 2; letter-spacing: .25px; text-align: justify; }
.paragraph-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-height: 18px; margin-top: 11px; color: #b3bda7; font-family: var(--ui-font); font-size: 8px; line-height: 1.5; user-select: none; }
.paragraph-meta:empty { display: none; }
.paragraph-meta .tiny-dot { width: 4px; height: 4px; }
.paragraph-meta .tag, .paragraph-meta button { display: inline-flex; align-items: center; gap: 4px; color: #8b9c7d; font-size: 8px; padding: 1px 4px; background: #f3f6ed; border-radius: 3px; }
.paragraph-meta button:hover { background: #e9efdf; color: #5c7750; }
.paragraph-add { position: absolute; top: 10px; right: -25px; display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; padding: 4px; border: 1px solid #e0e7d7; border-radius: 4px; background: var(--paper); color: #92a17f; opacity: 0; transition: opacity .15s, background .15s; }
.paragraph-add svg { width: 12px; height: 12px; }
.paragraph-meta .paragraph-add { position: static; width: auto; min-width: 0; height: 18px; margin-left: auto; padding: 1px 4px; border-color: transparent; background: transparent; color: #a9b79b; font-size: 8px; gap: 3px; white-space: nowrap; }
.paragraph-meta .paragraph-add svg { width: 9px; height: 9px; }
.paragraph-meta .paragraph-add:hover { background: #f0f5e8; color: #64834f; }
.reading-block:hover .paragraph-add, .reading-block:focus-within .paragraph-add, .paragraph-add:focus-visible { opacity: 1; }
.paragraph-add:hover { background: #f0f5e8; color: #446b44; }
.annotation-mark { padding: .03em 0 .05em; border-radius: .16em .08em .14em .06em; color: inherit; background: color-mix(in srgb, var(--mark-color, #93b38a) 28%, transparent); text-decoration: none; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.annotation-mark:hover { background: color-mix(in srgb, var(--mark-color, #93b38a) 38%, transparent); }
.annotation-mark.is-linked { background: color-mix(in srgb, var(--mark-color, #93b38a) 18%, transparent); }
.annotation-mark.is-linked:hover { background: color-mix(in srgb, var(--mark-color, #93b38a) 30%, transparent); }
.material-excerpt[lang="en"], .detail-material-content p[lang="en"] { font-family: Georgia, "Times New Roman", serif; }
.graph-inspector blockquote[lang="en"], .report-quote[lang="en"], #print-area .print-material > p[lang="en"] { font-family: Georgia, "Times New Roman", serif; }
.source-location { border-radius: 2px; background: #f8e7a6; outline: 2px solid #b18b46; outline-offset: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.block-focused::after { border-color: #dfe8d7; background: #eef5e51e; }
.block-flash { animation: paragraph-flash 1.6s ease-out; }
@keyframes paragraph-flash { 0%, 20% { background: #edf4e3; } 100% { background: transparent; } }
.section-end { display: flex; justify-content: center; align-items: center; gap: 13px; padding: 38px 0 10px; color: #c7cfbd; }
.section-end span { display: inline-block; width: 35px; height: 1px; background: #e6ebde; }
.section-end svg { width: 13px; height: 13px; }
.reading-status { display: flex; align-items: center; gap: 12px; justify-content: space-between; height: 37px; min-height: 37px; padding: 0 28px 0 31px; border-top: 1px solid #e9ede2; background: #fcfdf9; color: #a2ad95; font-size: 8px; user-select: none; }
.reading-status > div { display: flex; align-items: center; gap: 6px; }
.status-separator { color: #c4cdb8; padding: 0 1px; }
.selection-hint { color: #b5bea9; letter-spacing: .3px; }
.save-status { color: #98a88b; }
.save-status svg { width: 10px; height: 10px; }
.hide-paragraph-numbers .paragraph-number, body.hide-paragraph-numbers .paragraph-number { visibility: hidden; }
.paper-warm, body.paper-warm { --paper: #fbf8ef; }
.paper-warm .paper-warm .reading-toolbar, .paper-warm .classification-toolbar { border-color: #ece9de; }

.collection-panel { display: flex; flex-direction: column; flex: 0 0 var(--panel-width); width: var(--panel-width); min-width: 0; border-left: 1px solid #e4e9dd; background: var(--panel); user-select: none; }
.panel-collapsed .collection-panel, body.panel-collapsed .collection-panel { display: none; }
.panel-heading { height: 59px; min-height: 59px; display: flex; align-items: center; justify-content: space-between; padding: 0 19px 0 22px; }
.panel-heading h2 { font-size: 12px; font-weight: 550; color: #657a58; letter-spacing: .5px; }
.panel-heading .icon-button { width: 25px; height: 25px; color: #94a585; }
.panel-heading .icon-button svg { width: 14px; height: 14px; }
.panel-tabs { display: flex; flex: 0 0 49px; height: 49px; padding: 0 21px; gap: 22px; border-bottom: 1px solid #e7ecdf; }
.panel-tabs button { position: relative; padding: 0 0 13px; align-self: flex-end; color: #a4b096; font-size: 10px; line-height: 17px; white-space: nowrap; }
.panel-tabs button.selected { color: #5b7851; font-weight: 550; }
.panel-tabs button.selected::after { content: ""; position: absolute; bottom: -1px; height: 2px; border-radius: 2px; left: 0; right: 0; background: #719460; }
.panel-tabs button span { margin-left: 4px; color: #b2bfa3; font-weight: 400; font-size: 9px; }
.panel-tabs button.selected span { color: #89a279; }
.panel-tabs button:hover { color: #5c7a50; }
.panel-content { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 15px 20px; }
.panel-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 86px 9px 24px; }
.empty-illustration { width: 100px; height: 90px; margin-bottom: 22px; color: #b7c6a8; stroke-width: 1; }
.empty-illustration line, .empty-illustration path { stroke: #c2ceb6; }
.empty-illustration rect, .empty-illustration circle { stroke: #a7bc93; fill: var(--panel); }
.empty-illustration rect:first-of-type { fill: #f0f5e9; stroke: #a5ba94; }
.empty-illustration .node-main { fill: #eff4e7; stroke: #95af7f; }
.panel-empty h3 { margin-bottom: 12px; font-size: 12px; color: #687d5c; font-weight: 550; letter-spacing: .5px; }
.panel-empty > p { max-width: 205px; color: #a4b197; font-size: 10px; line-height: 1.9; text-wrap: pretty; }
.panel-empty .primary-button { min-height: 32px; margin-top: 23px; gap: 6px; padding: 0 13px; font-size: 10px; }
.panel-empty .primary-button svg { width: 12px; height: 12px; }
.panel-empty.compact { padding-top: 62px; }
.panel-empty.compact > svg:not(.empty-illustration) { width: 28px; height: 28px; margin-bottom: 22px; stroke-width: 1.1; color: #bccbab; }
.panel-empty.compact .secondary-button { margin-top: 20px; font-size: 9px; min-height: 29px; }
.empty-hint { max-width: 205px; margin-top: 17px; font-size: 8px; line-height: 1.8; color: #bac5ae; }
.panel-bottom { display: flex; justify-content: center; align-items: center; gap: 6px; height: 47px; min-height: 47px; margin: 0 20px; color: #b6c1aa; border-top: 1px solid #ebeee5; font-size: 9px; letter-spacing: .3px; }
.panel-bottom svg { width: 11px; height: 11px; }
.cluster-list { display: flex; flex-direction: column; gap: 5px; }
.cluster-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 66px; padding: 12px 9px; text-align: left; border-radius: 6px; border: 1px solid transparent; }
.cluster-row:hover { background: #f0f4e9; }
.cluster-row.current { border-color: #dce7d2; background: #eef3e7; }
.cluster-glyph { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 35px; color: #8ba577; border: 1px solid #e2eada; border-radius: 5px; background: #f8fbf3; }
.cluster-glyph svg { width: 17px; height: 17px; }
.cluster-row-body { flex: 1; min-width: 0; }
.cluster-row-body strong { display: block; color: #627b52; font-size: 11px; line-height: 1.6; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cluster-row-body small { display: block; margin-top: 3px; color: #a7b59a; font-size: 8px; line-height: 1.5; }
.cluster-size { flex: 0 0 auto; color: #a5b499; font-size: 9px; font-variant-numeric: tabular-nums; }
.panel-section-header { display: flex; align-items: center; justify-content: space-between; min-height: 30px; margin: 4px 4px 12px; color: #a2b093; font-size: 9px; }
.panel-back { display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; color: #8da27d; font-size: 9px; }
.panel-back:hover { color: #456d41; }
.panel-back svg { width: 12px; height: 12px; }
.cluster-detail-heading { padding: 4px 5px 17px; }
.cluster-detail-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding-top: 13px; padding-bottom: 6px; }
.cluster-detail-heading > h3 { flex: 1; }
.cluster-detail-heading > .icon-button { margin-top: -2px; width: 24px; height: 24px; color: #a7b996; }
.cluster-detail-heading > .icon-button svg { width: 12px; height: 12px; }
.cluster-detail-heading h3, .cluster-detail-heading strong { color: #4e6b42; font-size: 15px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.cluster-detail-heading > p { color: #a1b090; font-size: 9px; margin-top: 7px; line-height: 1.6; }
.cluster-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cluster-detail-actions { justify-content: space-between; margin: 0 5px 18px; padding-bottom: 12px; border-bottom: 1px solid #e4ebd9; }
.cluster-detail-actions > span { color: #b2c1a0; font-size: 9px; }
.cluster-detail-actions > .text-button { padding: 0; font-size: 8px; min-height: 21px; }
.cluster-detail-actions > .text-button.active { color: #7d9c62; }
.cluster-detail-actions button { min-height: 25px; padding: 3px 7px; font-size: 9px; }
.cluster-detail-actions .icon-button { width: 25px; }
.cluster-detail-actions svg { width: 11px; height: 11px; }
.material-card { margin-bottom: 12px; padding: 13px 13px 10px; border: 1px solid #e1e8d8; border-radius: 6px; background: #fff; }
.material-card-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-width: 0; margin-bottom: 9px; }
.source-label { min-width: 0; color: #afbaa2; font-size: 8px; line-height: 1.6; }
.material-card-top .icon-button { width: 20px; height: 20px; padding: 4px; color: #bcc6b0; margin-right: -5px; margin-top: -3px; }
.material-card-top .icon-button svg { width: 11px; height: 11px; }
.material-excerpt { display: inline; padding: .03em 0; border-radius: .12em; color: #6b7a5d; background: transparent; font-size: 11px; line-height: 1.8; font-family: var(--chinese-font); overflow-wrap: anywhere; user-select: text; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .18s ease; }
.material-card:is(:hover, :focus-within, .is-located) .material-excerpt { background: color-mix(in srgb, var(--excerpt-color, transparent) 12%, transparent); }
.material-excerpt + .material-excerpt { margin-top: 9px; padding-top: 8px; border-top: 1px solid #f0f3e9; }
@media (prefers-reduced-motion: reduce) { .material-excerpt { transition: none; } }
.material-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.material-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; color: #8ba078; background: #f5f8ee; border-radius: 3px; font-size: 8px; line-height: 1.4; }
.material-tags .tiny-dot { width: 4px; height: 4px; padding: 0; }
.material-tags .category-label { min-height: 28px; max-width: 100%; gap: 7px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--category-color, #8b8a91) 40%, white); border-radius: 5px; color: var(--category-ink); background: color-mix(in srgb, var(--category-color, #8b8a91) 16%, white); font-size: 12px; font-weight: 600; line-height: 18px; overflow-wrap: anywhere; }
.category-swatch { display: inline-block; flex: 0 0 4px; width: 4px; height: 15px; border-radius: 2px; background: var(--category-color, #8b8a91); }
.material-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #f0f3e9; }
.material-card-actions button { display: flex; align-items: center; gap: 4px; padding: 2px 0; color: #a6b598; font-size: 8px; }
.material-card-actions button:hover { color: #517944; }
.material-card-actions svg { width: 10px; height: 10px; }
.material-note { border-left: 2px solid #dce7ce; padding-left: 8px; margin-top: 10px; color: #92a381; font-size: 9px; line-height: 1.7; user-select: text; }
.panel-create-button { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 10px); min-height: 33px; margin: 18px 5px 0; border: 1px dashed #dce6cf; border-radius: 5px; color: #9bb488; font-size: 9px; }
.panel-create-button:hover { border-color: #b5cda1; background: #f3f8eb; color: #719b54; }
.panel-create-button svg { width: 12px; height: 12px; }

.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 35px; padding: 0 14px; border: 1px solid transparent; border-radius: 5px; font-size: 11px; font-weight: 450; white-space: nowrap; transition: background .15s, border-color .15s; }
.primary-button { color: #fff; background: var(--green); border-color: var(--green); box-shadow: 0 1px 2px #263e2410; }
.primary-button:hover { background: var(--green-hover); border-color: var(--green-hover); }
.primary-button svg { width: 14px; height: 14px; }
.secondary-button { color: #7d8d71; background: #fff; border-color: #dde5d4; }
.secondary-button:hover { background: #f7faf2; border-color: #bccfb0; }
.secondary-button svg { width: 13px; height: 13px; }
.text-button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 0; color: #668656; font-size: 10px; }
.text-button:hover { color: #365e30; }
.text-button svg { width: 12px; height: 12px; }
.danger-button { color: #a2766b !important; }
.danger-button:hover { color: #995e4f !important; background: #fbf2ed !important; }
.app-dialog.delete-capture-dialog { width: 440px; }
.delete-capture-quote { margin: 18px 0; padding: 13px 15px; border-left: 3px solid #d9e1d4; border-radius: 0 4px 4px 0; background: #f7f9f4; color: #63715f; font: 15px/1.7 var(--chinese-font); overflow-wrap: anywhere; }
.delete-capture-quote[lang="zh-CN"] { font-family: var(--chinese-font); }
.delete-capture-impact { color: #657161; font-size: 12px; line-height: 1.85; }
.delete-capture-recovery { margin-top: 10px; color: #8c978c; font-size: 11px; line-height: 1.7; }
.primary-button.delete-confirm-button { color: white; border-color: #a35f55; background: #a35f55; }
.primary-button.delete-confirm-button:hover { border-color: #8f5047; background: #8f5047; }
.app-dialog.reading-backup-dialog { width: 680px; }
.reading-backup-json { width: 100%; height: 330px; margin-top: 16px; resize: vertical; font: 11px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }

.knowledge-view { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; background: #fcfdf9; }
.knowledge-header { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 45px 44px 31px; border-bottom: 1px solid #e9eddf; }
.knowledge-header h2 { margin: 11px 0 9px; color: #385638; font-family: var(--chinese-font); font-size: 27px; font-weight: 500; }
.knowledge-header p:last-child { color: #9ba98e; font-size: 11px; line-height: 1.7; }
.knowledge-header .primary-button { font-size: 10px; min-height: 33px; }
.knowledge-body { flex: 1; padding: 30px 43px 60px; }
.knowledge-view.knowledge-graph-mode { overflow: hidden; background: #f9fbf7; }
.knowledge-graph-mode .knowledge-header { flex: 0 0 auto; min-height: 136px; padding: 27px 38px 23px; background: #fcfdf9; }
.knowledge-graph-mode .knowledge-header h2 { margin-top: 8px; font-size: 26px; }
.knowledge-body.has-knowledge-graph { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.graph-topbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 12px 38px; }
.graph-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; color: #83907e; font-size: 11px; }
.graph-summary strong { color: #52654e; font-weight: 500; }
.graph-live-dot { width: 5px; height: 5px; background: #739378; border-radius: 50%; }
.graph-summary-separator { margin: 0 9px; color: #c1cbbb; }
.graph-captures-button { gap: 7px; flex: 0 0 auto; font-size: 11px; }
.graph-captures-button > span { color: #9aa58f; font-variant-numeric: tabular-nums; }
.graph-stage { position: relative; flex: 1; min-height: 220px; overflow: hidden; }
.graph-canvas { position: absolute; inset: 0; }
.knowledge-graph-svg { display: block; width: 100%; height: 100%; overflow: hidden; fill: none; stroke: none; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.knowledge-graph-svg.is-dragging, .knowledge-graph-svg.is-dragging .graph-node { cursor: grabbing; }
.graph-edge { stroke: #c2cfc0; stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .15s, opacity .15s; }
.graph-edge.is-active { stroke: #6b8c70; stroke-width: 1.35; }
.graph-edge.is-dimmed { opacity: .18; }
.graph-node { cursor: grab; outline: none; transition: opacity .18s; }
.graph-node-hit { fill: transparent; pointer-events: all; }
.graph-node-halo { fill: var(--node-color); opacity: 0; transition: opacity .18s; }
.graph-node[data-kind="topic"] .graph-node-halo { opacity: .07; }
.graph-node-dot { fill: var(--node-color); stroke: #f9fbf7; stroke-width: 2; }
.graph-node.is-active .graph-node-halo, .graph-node.is-selected .graph-node-halo { opacity: .14; }
.graph-node:focus-visible .graph-node-halo { fill: none; stroke: var(--node-color); stroke-width: 1.2; opacity: .8; }
.graph-node.is-dimmed { opacity: .25; }
.graph-node text { pointer-events: none; paint-order: stroke; stroke: #f9fbf7; stroke-width: 5px; stroke-linejoin: round; }
.graph-topic-label { fill: #415d46; font-family: var(--chinese-font); font-size: 14px; font-weight: 500; }
.graph-topic-count { fill: #8c9e83; font-size: 9px; letter-spacing: .4px; }
.graph-material-label { display: none; fill: #53654f; font-size: 11px; }
.graph-node.is-active .graph-material-label, .graph-node.is-selected .graph-material-label { display: block; }
.graph-controls { position: absolute; right: 27px; bottom: 23px; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid #dfe6d9; border-radius: 7px; background: #fffffff2; box-shadow: 0 2px 7px #41563a05; }
.graph-controls .icon-button { color: #74826c; font-size: 19px; width: 29px; height: 28px; }
.graph-controls .icon-button svg { width: 15px; height: 15px; }
.graph-controls output { width: 40px; color: #75826c; text-align: center; font-size: 10px; font-variant-numeric: tabular-nums; }
.graph-control-divider { height: 17px; width: 1px; margin: 0 4px; background: #e7ecdf; }
.graph-help { position: absolute; bottom: 31px; left: 38px; margin: 0; color: #a1ae96; font-size: 10px; pointer-events: none; }
.graph-help span { margin: 0 9px; color: #bdc8b3; }
.graph-footer { display: flex; align-items: center; flex-wrap: wrap; flex: 0 0 auto; gap: 12px; min-height: 56px; padding: 14px 38px; border-top: 1px solid #e6ecdf; background: #fcfdf9; }
.graph-legend { display: flex; flex-wrap: wrap; gap: 16px; }
.graph-legend > span { display: inline-flex; align-items: center; gap: 6px; color: #7a8971; font-size: 10px; }
.graph-legend i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; }
.graph-footer-note { margin-left: auto; font-size: 10px; color: #a0ac95; }
.graph-layout-status { color: #a2766b; font-size: 10px; }
.graph-layout-status:empty { display: none; }
.graph-inspector { position: absolute; z-index: 3; top: 15px; right: 27px; width: 302px; max-width: calc(100% - 38px); max-height: calc(100% - 90px); overflow-y: auto; overscroll-behavior: contain; padding: 15px 19px 19px; border: 1px solid #dce4d6; border-radius: 9px; background: #fffffff7; box-shadow: 0 8px 30px #3c573412; }
.graph-inspector-top { display: flex; align-items: center; justify-content: space-between; margin: -2px -5px 16px 0; color: #8e9c83; font-size: 10px; }
.graph-inspector-top .icon-button { width: 25px; height: 25px; }
.graph-inspector h3 { color: #47673f; font: 500 20px/1.55 var(--chinese-font); overflow-wrap: anywhere; }
.graph-inspector-count { margin: 12px 0 22px; color: #85957b; font-size: 11px; }
.graph-inspector-source { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; color: #99a48d; font-size: 9px; }
.graph-inspector blockquote { margin: 0; color: #465640; font: 17px/1.8 var(--chinese-font); overflow-wrap: anywhere; }
.graph-inspector blockquote[lang="zh-CN"] { font-family: var(--chinese-font); }
.graph-inspector .material-tags { margin: 16px 0 0; }
.graph-inspector-note { margin-top: 20px; padding: 10px 12px; background: #f7f9f3; border-left: 2px solid #d5e0cb; }
.graph-inspector-note > span, .graph-memberships > span { color: #9aa88e; font-size: 9px; }
.graph-inspector-note p { margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere; color: #6b7e5f; font-size: 11px; line-height: 1.8; }
.graph-memberships { margin-top: 21px; }
.graph-memberships > span { display: block; margin-bottom: 7px; }
.graph-memberships button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 0; text-align: left; color: #6b805e; font-size: 11px; line-height: 1.6; }
.graph-memberships button svg { flex: 0 0 auto; width: 12px; height: 12px; margin-left: auto; color: #a4b398; }
.graph-inspector-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 21px; padding-top: 15px; border-top: 1px solid #edf0e7; }
.graph-inspector-actions .text-button { font-size: 10px; }
@media (max-width: 979px) {
  .knowledge-graph-mode .knowledge-header { min-height: 125px; padding: 24px 27px 20px; }
  .graph-topbar { padding: 12px 27px; }
  .graph-footer { padding: 13px 27px; }
  .graph-help { left: 27px; }
}
@media (max-width: 699px) {
  .knowledge-graph-mode .knowledge-header { min-height: 115px; padding: 21px 20px 17px; }
  .knowledge-graph-mode .knowledge-header h2 { font-size: 23px; }
  .graph-topbar { padding: 10px 20px; min-height: 58px; }
  .graph-summary { gap: 7px; font-size: 10px; }
  .graph-summary > span:last-child { flex-basis: 100%; margin-left: 12px; font-size: 9px; }
  .graph-captures-button { font-size: 10px; gap: 5px; }
  .graph-controls { right: 17px; bottom: 16px; }
  .graph-help { left: 20px; bottom: 63px; font-size: 9px; }
  .graph-footer { padding: 12px 20px; gap: 9px; }
  .graph-legend { gap: 12px; }
  .graph-legend > span, .graph-footer-note { font-size: 9px; }
  .graph-inspector { top: 7px; right: 17px; max-height: calc(100% - 65px); }
}
@media (prefers-reduced-motion: reduce) {
  .graph-node, .graph-edge, .graph-node-halo { transition: none; }
}
.knowledge-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; padding: 40px 20px; text-align: center; }
.knowledge-empty .empty-illustration { width: 110px; height: 100px; margin-bottom: 26px; }
.knowledge-empty > svg:not(.empty-illustration) { width: 45px; height: 45px; color: #bdcbaa; margin-bottom: 25px; stroke-width: 1; }
.knowledge-empty h3 { color: #71885f; font-family: var(--chinese-font); font-size: 20px; font-weight: 500; margin-bottom: 13px; }
.knowledge-empty p { color: #a7b298; font-size: 11px; line-height: 1.8; max-width: 300px; }
.knowledge-empty .primary-button { margin-top: 25px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.knowledge-tile { display: flex; flex-direction: column; align-items: flex-start; min-height: 178px; padding: 23px; border: 1px solid #e0e8d6; border-radius: 7px; background: #fff; text-align: left; transition: border-color .15s, box-shadow .15s; }
.knowledge-tile { position: relative; }
.knowledge-tile:hover { border-color: #bccfad; box-shadow: 0 3px 12px #485f3507; }
.knowledge-tile > svg, .knowledge-tile .cluster-glyph { width: 29px; height: 29px; color: #8eaa78; margin-bottom: 22px; stroke-width: 1.3; }
.knowledge-tile .cluster-glyph { width: 35px; height: 37px; margin-bottom: 18px; }
.knowledge-tile .cluster-glyph svg { width: 20px; height: 20px; }
.knowledge-tile h3, .knowledge-tile strong, .knowledge-tile .name { color: #577447; font-size: 14px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.collection-meta { color: #a6b497; font-size: 9px; line-height: 1.7; margin-top: 7px; }
.tile-icon { display: flex; align-items: center; justify-content: center; color: #93ad7e; width: 32px; height: 32px; margin-bottom: 20px; }
.tile-icon svg { width: 27px; height: 27px; stroke-width: 1.25; }
.tile-arrow { position: absolute; right: 20px; bottom: 20px; color: #c2ceb3; }
.tile-arrow svg { width: 15px; height: 15px; }
.inbox-tile { background: #f8faf4; border-color: #e5ecdc; }
.inbox-tile .tile-icon { color: #b1c29b; }
.knowledge-empty > .text-button { margin-top: 16px; font-size: 9px; }
.knowledge-detail { max-width: 1000px; margin: 0 auto; }
.detail-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 28px; padding-bottom: 21px; border-bottom: 1px solid #e5ebdd; }
.detail-heading h3 { color: #4c6c3c; font-size: 19px; font-weight: 500; margin-bottom: 8px; }
.detail-heading p { color: #a0b08e; font-size: 10px; line-height: 1.8; }
.detail-heading > div:last-child { display: flex; align-items: center; gap: 7px; }
.detail-heading-actions { display: flex; align-items: center; gap: 7px; }
.detail-heading button { font-size: 10px; min-height: 30px; }
.detail-list { display: flex; flex-direction: column; gap: 18px; }
.detail-material { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 29px; padding: 23px 25px; border: 1px solid #e2e9d9; background: #fff; border-radius: 6px; user-select: text; }
.detail-material-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; grid-column: 1 / -1; color: #a5b496; font-size: 9px; }
.detail-material-content { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 29px; min-width: 0; color: #5a6d4b; font-family: var(--chinese-font); font-size: 16px; line-height: 1.8; }
.detail-material-content.zh, .detail-material-content[data-lang="zh"] { font-family: var(--chinese-font); line-height: 1.95; }
.detail-material-content > p { min-width: 0; overflow-wrap: break-word; }
.detail-material-content > p[lang="zh-CN"] { font-family: var(--chinese-font); line-height: 1.95; }
.detail-material-header .material-tags { margin-top: 0; margin-left: auto; }
.detail-material-header > .text-button { font-size: 8px; }
.detail-material-header > .text-button svg { width: 10px; height: 10px; }
.detail-note > span { display: block; font-size: 8px; color: #a3b68f; margin-bottom: 4px; }
.detail-note { grid-column: 1 / -1; border-left: 2px solid #d6e4c7; padding: 7px 12px; color: #8b9d7b; background: #f8faf4; font-size: 11px; line-height: 1.8; white-space: pre-wrap; }
.material-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 17px; padding-top: 13px; border-top: 1px solid #eef2e7; user-select: none; }
.material-controls button { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: #9aae88; padding: 0; }
.material-controls button:hover { color: #4a743d; }
.material-controls svg { width: 11px; height: 11px; }
.material-controls .icon-button { width: 20px; height: 20px; margin-top: -4px; }
.material-controls .control-spacer { flex: 1; }

.selection-popover, .target-popover, .appearance-popover { position: fixed; z-index: 70; border: 1px solid #dce3d3; border-radius: 8px; background: #fff; box-shadow: 0 8px 28px #2e42201c, 0 2px 5px #2e42200a; }
.selection-popover { width: 395px; max-width: calc(100vw - 24px); }
.selection-popover-top { display: flex; align-items: center; gap: 9px; padding: 10px 12px 9px 14px; border-bottom: 1px solid #edf1e6; }
.selection-popover-top strong { font-size: 11px; font-weight: 550; color: #667e54; white-space: nowrap; }
.selection-popover-top > span { color: #afbaa2; font-size: 8px; }
.selection-popover-top .icon-button { width: 21px; height: 21px; margin-left: auto; padding: 4px; color: #b5bfa9; }
.selection-popover-top .icon-button svg { width: 12px; height: 12px; }
.selection-category-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 11px 9px 10px; }
.selection-category { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 9px 3px 5px; min-height: 69px; border-radius: 5px; color: #7e906c; }
.selection-category:hover { background: #f3f7ed; }
.selection-category .color-line { display: block; width: 24px; height: 11px; border-radius: 3px 2px 3px 1px; background: color-mix(in srgb, var(--mark-color, #9cb68b) 32%, transparent); transform: skewX(-7deg); }
.selection-category .name { font-size: 10px; white-space: nowrap; }
.selection-category .shortcut { font-size: 8px; color: #c3ccba; line-height: 1; }
.selection-popover-bottom { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 35px; padding: 6px 14px; border-top: 1px solid #edf1e6; background: #fcfdf9; border-radius: 0 0 8px 8px; }
.selection-popover-bottom > span { color: #abb89c; font-size: 8px; }
.selection-popover-bottom .text-button { flex: 0 0 auto; font-size: 8px; }
.selection-popover-bottom .text-button svg { width: 10px; height: 10px; }
.selection-delete { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 29px; width: 100%; border-top: 1px solid #edf1e6; color: #b1a38f; font-size: 9px; border-radius: 0 0 8px 8px; }
.selection-delete:hover { background: #fbf7f0; color: #a68368; }
.selection-delete svg { width: 10px; height: 10px; }
.target-popover { width: 240px; max-height: 390px; overflow-y: auto; padding: 7px; }
.target-menu-title { padding: 8px 8px 9px; color: #a3b095; font-size: 9px; letter-spacing: .3px; }
.target-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 37px; padding: 7px 8px; text-align: left; color: #83996e; font-size: 10px; border-radius: 4px; }
.target-option > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-option svg { width: 13px; height: 13px; color: #a7b995; }
.target-option .check, .target-option svg:last-child:not(:first-child) { margin-left: auto; width: 12px; height: 12px; color: #6f9658; }
.target-option:hover, .target-option.selected { background: #f0f5e8; color: #50783c; }
.target-create { display: flex; align-items: center; gap: 7px; width: 100%; padding: 11px 8px 6px; margin-top: 6px; border-top: 1px solid #e9efdf; text-align: left; color: #6f9058; font-size: 10px; }
.target-create svg { width: 12px; height: 12px; }
.target-create:hover { color: #3c692a; }
.appearance-popover { width: 280px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px 17px; }
.popover-title { color: #6c845a; font-size: 11px; font-weight: 550; padding-bottom: 13px; margin-bottom: 2px; border-bottom: 1px solid #eaf0e0; }
.appearance-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0 4px; color: #93a280; font-size: 10px; }
.stepper { display: inline-flex; align-items: center; height: 28px; border: 1px solid #dfe8d3; border-radius: 4px; background: #fcfdf9; }
.stepper button { width: 32px; height: 26px; color: #88a16d; font-family: Georgia, serif; font-size: 12px; }
.stepper button:hover { background: #eef5e5; }
.stepper button:disabled { opacity: .35; cursor: default; background: transparent; }
.stepper output { min-width: 36px; text-align: center; font-size: 12px; color: #617c4c; font-variant-numeric: tabular-nums; }
.appearance-font.text-input { width: 156px; min-height: 34px; padding: 5px 8px; }
.font-size-slider { display: flex; align-items: center; gap: 9px; margin-top: 10px; color: #8c978c; font-size: 11px; font-variant-numeric: tabular-nums; }
.font-size-slider input { flex: 1; min-width: 0; margin: 0; accent-color: var(--green); cursor: pointer; }
.appearance-reset { margin-top: 12px; }
.paper-options { display: flex; gap: 8px; }
.paper-option { width: 23px; height: 23px; border: 1px solid #e0e7d4; border-radius: 50%; background: #fff; }
.paper-option.warm { background: #f7f2e4; }
.paper-option.selected { outline: 1px solid #86a36e; outline-offset: 3px; }
.appearance-checkbox { display: flex; align-items: center; gap: 7px; margin-top: 19px; padding-top: 14px; border-top: 1px solid #eaf0e0; color: #9aab87; font-size: 9px; }
input[type="checkbox"] { width: 12px; height: 12px; margin: 0; accent-color: var(--green); flex: 0 0 auto; }

.app-dialog { padding: 26px; width: 420px; max-width: calc(100vw - 36px); max-height: calc(100vh - 70px); border: 1px solid #dbe4d1; border-radius: 11px; background: #fff; color: var(--ink); box-shadow: 0 20px 70px #25371924, 0 3px 12px #2537190b; overflow-y: auto; }
.app-dialog::backdrop { background: #293c2530; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.app-dialog[open] { animation: dialog-appear .16s ease-out; }
@keyframes dialog-appear { from { opacity: 0; transform: translateY(5px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 17px; }
.dialog-heading > .icon-button { margin-top: -12px; margin-right: -12px; color: #a3b292; }
.dialog-icon { display: inline-flex; justify-content: center; align-items: center; width: 38px; height: 40px; border: 1px solid #e0e9d6; border-radius: 7px; background: #f5f9ef; color: #89a775; }
.dialog-icon svg { width: 22px; height: 22px; stroke-width: 1.3; }
.app-dialog h2 { font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: .2px; color: #4c6b3c; }
.dialog-description { color: #a0b18e; font-size: 10px; line-height: 1.8; margin-top: 7px; margin-bottom: 24px; }
.dialog-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dialog-topline > .icon-button { margin-top: -8px; margin-right: -9px; color: #a9b79b; }
.field-label { display: block; color: #8c9f79; font-size: 10px; line-height: 1.5; margin: 0 0 8px; }
.text-input { display: block; width: 100%; min-height: 37px; border: 1px solid #dce6d0; border-radius: 5px; padding: 8px 10px; background: #fdfefb; color: #617c4c; font-size: 11px; line-height: 1.6; transition: border-color .15s, box-shadow .15s; }
.text-input::placeholder { color: #bdc9b0; }
select.text-input { cursor: pointer; padding-right: 25px; }
.checkbox-label { display: flex; align-items: flex-start; gap: 7px; color: #a0b18e; font-size: 9px; line-height: 1.7; margin-top: 17px; }
.checkbox-label input { margin-top: 1px; }
.form-error { min-height: 16px; color: #b48773; font-size: 9px; margin-top: 10px; }
.dialog-footer { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #e9efdf; }
.dialog-footer button { min-height: 32px; padding: 0 14px; font-size: 10px; }
.dialog-footer > span { margin-right: auto; color: #a2b38f; font-size: 9px; }
.category-dialog { width: 480px; }
.category-dialog .dialog-description { margin-bottom: 25px; }
.category-editor-head { display: grid; grid-template-columns: 35px minmax(0, 1fr) 34px 26px; align-items: center; gap: 12px; padding: 0 4px 9px; color: #b1bfa1; font-size: 8px; border-bottom: 1px solid #eaf0e0; }
.category-editor-row { display: grid; grid-template-columns: 35px minmax(0, 1fr) 34px 26px; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #f0f4e9; }
.category-editor-row input[type="color"] { width: 24px; height: 24px; padding: 3px; border: 1px solid #e2ead7; border-radius: 4px; background: #fff; cursor: pointer; }
.category-editor-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 1px; }
.category-editor-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }
.category-name-input { width: 100%; min-width: 0; padding: 6px 7px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #86a16b; font-size: 11px; }
.category-name-input:hover { border-color: #e7eddf; }
.category-name-input:focus { border-color: #b8cfa3; background: #fcfef8; }
.category-editor-row > span { color: #b4c1a4; font-size: 10px; font-variant-numeric: tabular-nums; }
.category-editor-row > button { width: 24px; height: 24px; padding: 4px; color: #bdc9af; border-radius: 4px; }
.category-editor-row > button:hover { color: #a27e6b; background: #fbf4ed; }
.category-editor-row > button svg { width: 13px; height: 13px; }
.add-category-row { display: flex; gap: 10px; margin-top: 15px; }
.add-category-row .text-input { min-height: 32px; font-size: 10px; }
.add-category-row .secondary-button { min-height: 32px; font-size: 10px; }
.category-footnote { color: #b3c0a2; font-size: 8px; line-height: 1.8; margin-top: 14px; }
.note-dialog { width: 500px; }
.note-input { min-height: 150px; resize: vertical; line-height: 1.9; }
.note-dialog .dialog-description { font-size: 9px; color: #afbd9f; }

.export-dialog { width: 830px; padding: 27px 29px 23px; }
.export-dialog .dialog-topline { margin-bottom: 26px; }
.export-dialog .section-eyebrow { font-size: 8px; margin-bottom: 9px; }
.export-dialog h2 { font-size: 21px; font-family: var(--chinese-font); font-weight: 500; }
.export-content { display: grid; grid-template-columns: 231px minmax(0, 1fr); gap: 27px; }
.export-options { padding: 1px 0 0; }
.export-options > .field-label:not(:first-child) { margin-top: 22px; }
.export-options > .text-input { min-height: 33px; font-size: 10px; }
.export-options .checkbox-label { margin-top: 16px; font-size: 9px; }
.export-format-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.format-option { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 11px; min-height: 99px; border: 1px solid #e2ead7; border-radius: 5px; background: #fff; text-align: left; }
.format-option:hover { background: #fafcf6; border-color: #c5d7b4; }
.format-option.selected { background: #f4f8ed; border-color: #99b680; box-shadow: 0 0 0 1px #99b68013; }
.format-option svg { width: 18px; height: 18px; color: #a0b58b; margin-bottom: 2px; }
.format-option strong { color: #77975e; font-size: 10px; font-weight: 500; }
.format-option span { color: #b2c19f; font-size: 8px; }
.export-source-note { display: flex; align-items: flex-start; gap: 5px; margin-top: 22px; color: #b3c1a0; font-size: 8px; line-height: 1.8; }
.export-source-note svg { width: 11px; height: 11px; margin-top: 2px; }
.export-preview { min-height: 345px; max-height: 470px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; padding: 18px; border: 1px solid #e6ecdd; background: #f6f8f1; border-radius: 6px; }
.mindmap-svg { width: 100%; height: auto; min-height: 260px; max-height: 390px; overflow: visible; font-family: var(--ui-font); }
.mindmap-svg text { stroke: none; font-family: var(--ui-font); }
.mindmap-svg path, .mindmap-svg line { stroke-width: 1.2; }
.mindmap-svg rect { stroke-width: 1; }
.preview-paper { align-self: flex-start; width: 100%; min-height: 350px; padding: 24px 22px; background: #fff; box-shadow: 0 2px 8px #3b4f270b; color: #779060; }
.report-title { padding-bottom: 13px; margin-bottom: 17px; border-bottom: 1px solid #e8efde; }
.preview-paper > .report-title { color: #597e3f; font-family: var(--chinese-font); font-size: 17px; font-weight: 500; line-height: 1.6; margin-top: 7px; margin-bottom: 8px; padding-bottom: 8px; }
.report-eyebrow { color: #b0c09b; font-size: 6px; letter-spacing: 1px; }
.report-book { color: #a5b68f; font-family: var(--chinese-font); font-size: 8px; line-height: 1.6; margin-bottom: 20px; }
.report-collection { margin-top: 17px; }
.report-collection h4 { color: #7f9d64; font-size: 10px; font-weight: 500; margin-bottom: 13px; }
.report-personal-note { color: #a6b98f !important; font-size: 8px !important; padding-left: 7px; border-left: 1px solid #dbe6cc; margin-top: 8px; }
.preview-caption { flex: 0 0 auto; margin-top: 13px; max-width: 100%; color: #b2c29c; font-size: 7px; line-height: 1.8; text-align: center; }
.export-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 280px; padding: 25px; text-align: center; }
.export-empty .empty-illustration { width: 85px; height: 80px; margin-bottom: 21px; }
.export-empty h3 { color: #92ab7c; font-size: 11px; font-weight: 500; margin-bottom: 10px; }
.export-empty p { color: #b2c29d; font-size: 9px; line-height: 1.9; }
.report-title h1, .report-title h2 { font-family: var(--chinese-font); font-size: 17px; color: #54773b; font-weight: 500; line-height: 1.6; }
.report-title p { color: #a8b993; font-size: 7px; line-height: 1.7; margin-top: 5px; }
.report-item { margin-bottom: 19px; padding-bottom: 14px; border-bottom: 1px solid #f0f4e9; }
.report-item h3 { margin-bottom: 7px; font-size: 9px; color: #8aa475; font-weight: 500; }
.report-item p { font-size: 9px; line-height: 1.85; color: #8ca475; }
.report-quote { font-family: var(--chinese-font); font-size: 10px; color: #78975f; line-height: 1.7; }
.report-quote + .report-quote { margin-top: 8px; }
.report-quote.zh { font-family: var(--chinese-font); font-size: 9px; line-height: 1.9; }
.report-note { font-size: 8px; color: #a5b88e; margin-top: 7px; border-left: 1px solid #dbe8ca; padding-left: 7px; }
.export-preview .search-empty { padding: 30px 15px; text-align: center; }
.export-dialog .dialog-footer { margin-top: 25px; }

.search-dialog { width: 610px; padding: 0; margin-top: min(16vh, 160px); border-radius: 9px; }
.search-input-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px 0 21px; border-bottom: 1px solid #e7efdd; }
.search-input-row > svg { width: 18px; height: 18px; color: #9bb586; }
.search-input-row input { flex: 1; min-width: 0; padding: 12px 0; color: #6d8b56; font-size: 13px; border: 0; background: none; }
.search-input-row input::placeholder { color: #b5c5a5; }
.search-input-row .icon-button { color: #b8c6a9; }
.search-results { max-height: 440px; min-height: 104px; padding: 9px; overflow-y: auto; }
.search-result { display: block; width: 100%; padding: 13px 14px; border-radius: 5px; text-align: left; border-bottom: 1px solid #f0f4e9; }
.search-result:last-child { border-bottom-color: transparent; }
.search-result:hover { background: #f5f9ed; }
.search-result strong { display: block; font-size: 10px; font-weight: 500; color: #8eaa76; line-height: 1.6; margin-bottom: 6px; }
.search-result p { color: #92ad7b; font-size: 11px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-result > .source-label { display: block; margin-bottom: 5px; font-size: 8px; }
.search-result > strong { font-size: 11px; color: #8ba775; font-weight: 400; }
.search-result > small { display: block; color: #b0c09c; font-family: var(--chinese-font); font-size: 10px; line-height: 1.65; }
.search-result mark { color: #567e3b; background: #e8f1dc; padding: 1px 0; }
.search-empty { padding: 32px 20px; color: #afc09a; font-size: 11px; line-height: 1.8; }
.library-dialog { width: 560px; padding: 29px; }
.library-dialog .section-eyebrow { font-size: 8px; margin-bottom: 8px; }
.library-book { display: flex; gap: 22px; align-items: center; margin: 28px 0; padding: 23px; border: 1px solid #e2ecd5; border-radius: 6px; background: #f9fcf4; }
.library-book img { display: block; width: 74px; height: 112px; object-fit: cover; box-shadow: 0 3px 7px #38512620; border-radius: 2px 3px 3px 2px; }
.library-book h3, .library-book strong { font-family: var(--chinese-font); color: #5b7b42; font-size: 19px; line-height: 1.35; font-weight: 500; }
.library-book p { color: #9eb388; font-size: 10px; line-height: 1.7; margin-top: 8px; }
.library-book .primary-button, .library-book .secondary-button { min-height: 29px; font-size: 9px; margin-top: 13px; }
.book-info { padding: 15px 17px; border-left: 2px solid #d3e2bf; background: #f8fbf2; color: #a8bb93; }
.book-info strong { display: block; font-size: 10px; font-weight: 500; margin-bottom: 6px; color: #91aa77; }
.book-info p { font-size: 9px; line-height: 1.9; }

.toast { position: fixed; z-index: 100; bottom: 58px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 34px); min-height: 39px; padding: 9px 14px; border: 1px solid #d5e0c8; border-radius: 7px; background: #fff; box-shadow: 0 5px 20px #344f2014; color: #7c9b63; font-size: 10px; line-height: 1.6; }
.toast-icon { display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; color: #8fb471; background: #edf5e3; }
.toast-icon svg { width: 10px; height: 10px; stroke-width: 1.7; }
.toast > button { margin-left: 8px; padding: 0 0 1px; color: #6e9950; border-bottom: 1px solid #b9cea8; font-size: 10px; }
.toast > button:hover { color: #3f6f23; }
#print-area { display: none; }

@media (min-width: 1600px) {
  .reading-sheet { padding-left: 62px; padding-right: 57px; }
  .chapter-intro, .reading-block { column-gap: 54px; }
  .reading-toolbar { padding-left: 43px; padding-right: 39px; }
  .classification-toolbar { padding-left: 43px; padding-right: 39px; gap: 18px; }
  .category-strip { gap: 13px; }
  .reading-status { padding-left: 43px; padding-right: 39px; }
}
@media (max-width: 1350px) {
  .reading-toolbar { padding-left: 25px; padding-right: 21px; gap: 10px; }
  .classification-toolbar { padding-left: 25px; padding-right: 21px; gap: 9px; }
  .reading-sheet { padding-left: 40px; padding-right: 35px; }
  .chapter-intro, .reading-block { column-gap: 31px; }
  .category-strip { gap: 2px; }
  .category-chip { gap: 4px; padding-left: 5px; padding-right: 5px; }
  .collect-target { max-width: 175px; }
  .chapter-breadcrumb { font-size: 10px; }
  .chinese-heading { font-size: 23px; }
}
@media (max-width: 1199px) {
  .collection-panel { position: absolute; z-index: 25; right: 0; top: 0; bottom: 0; box-shadow: -5px 0 20px #3c512410; }
  .reading-sheet { max-width: 990px; padding-left: 48px; padding-right: 43px; }
  .reading-toolbar { padding-left: 31px; padding-right: 27px; }
  .classification-toolbar { padding-left: 31px; padding-right: 27px; }
  .category-strip { gap: 7px; }
  .draft-label { display: none; }
  .chapter-intro, .reading-block { column-gap: 37px; }
  .knowledge-header { padding-left: 35px; padding-right: 35px; }
  .knowledge-body { padding-left: 35px; padding-right: 35px; }
}
@media (max-width: 979px) {
  .window-bar { padding-left: 18px; padding-right: 18px; gap: 12px; }
  .window-leading { gap: 13px; }
  .book-sidebar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 30; box-shadow: 5px 0 20px #3c512412; }
  .app-shell:not(.sidebar-collapsed) .book-sidebar { display: flex; }
  .reading-sheet { max-width: 900px; }
  .knowledge-header { padding-top: 36px; }
  .panel-content { padding-top: 14px; }
  .panel-empty { padding-top: 70px; }
}
@media (max-width: 699px) {
  :root { --windowbar-height: 52px; --panel-width: 280px; }
  .window-bar { padding-left: 14px; padding-right: 12px; gap: 8px; grid-template-columns: 1fr auto 1fr; }
  .traffic-lights { display: none; }
  .wordmark { font-size: 16px; }
  .window-leading { gap: 5px; }
  .view-switch button { padding: 0 9px; min-width: 62px; height: 27px; font-size: 10px; gap: 5px; }
  .view-switch svg { width: 12px; height: 12px; }
  .nav-count { display: none; }
  .window-actions { gap: 3px; }
  .window-actions > .type-button { display: inline-flex; padding: 3px; }
  .appearance-button-label { display: none; }
  .window-actions > .icon-button { width: 26px; height: 26px; }
  .export-button { width: 28px; padding: 0; justify-content: center; height: 28px; border-color: transparent; background: none; }
  .export-button > span { display: none; }
  .reading-toolbar { min-height: 51px; height: 51px; padding: 0 15px 0 19px; gap: 7px; }
  .chapter-breadcrumb { gap: 6px; font-size: 9px; }
  .collect-target { max-width: 120px; padding-left: 3px; padding-right: 3px; font-size: 8px; }
  .collect-target > svg:first-child { display: none; }
  .classification-toolbar { min-height: 44px; height: 44px; padding: 0 16px 0 19px; gap: 8px; }
  .toolbar-caption { font-size: 8px; }
  .category-strip { gap: 3px; }
  .category-chip { font-size: 9px; padding-left: 3px; padding-right: 3px; }
  .category-count { display: none; }
  .reading-sheet { min-width: 650px; padding-left: 36px; padding-right: 31px; }
  .chapter-intro, .reading-block { column-gap: 29px; }
  .chapter-intro { padding-top: 28px; padding-bottom: 24px; }
  .chinese-heading { font-size: 21px; }
  .reading-block { padding-bottom: 19px; }
  .paragraph-number { left: -23px; }
  .reading-status { padding-left: 18px; padding-right: 17px; font-size: 7px; }
  .selection-hint { display: none; }
  .knowledge-header { padding: 29px 23px 23px; gap: 12px; }
  .knowledge-header h2 { font-size: 23px; }
  .knowledge-header p:last-child { font-size: 9px; }
  .knowledge-header .primary-button { min-height: 30px; padding: 0 9px; font-size: 9px; }
  .knowledge-body { padding: 23px; }
  .knowledge-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .knowledge-tile { min-height: 155px; padding: 18px; }
  .detail-material { grid-template-columns: 1fr; padding: 18px; gap: 13px; }
  .detail-material-content { grid-template-columns: 1fr; row-gap: 18px; }
  .detail-material-header { flex-wrap: wrap; }
  .detail-heading { flex-wrap: wrap; }
  .detail-heading h3 { font-size: 17px; }
  .app-dialog { max-height: calc(100dvh - 30px); max-width: calc(100vw - 24px); padding: 22px; border-radius: 8px; }
  .export-content { grid-template-columns: 1fr; gap: 22px; }
  .export-dialog { width: 480px; }
  .export-options > .field-label:not(:first-child) { margin-top: 15px; }
  .export-format-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .format-option { min-height: 79px; gap: 5px; }
  .export-source-note { margin-top: 14px; }
  .export-preview { min-height: 210px; max-height: 290px; }
  .export-dialog .dialog-topline { margin-bottom: 21px; }
  .export-dialog .dialog-footer { margin-top: 20px; }
  .search-dialog { padding: 0; margin-top: 65px; }
  .search-input-row { padding-left: 16px; gap: 9px; }
  .search-input-row input { font-size: 12px; }
  .search-results { max-height: 55dvh; }
  .library-book { padding: 17px; gap: 17px; }
  .library-book h3 { font-size: 17px; }
  .toast { bottom: 51px; font-size: 9px; white-space: nowrap; }
}

/* A consistent, readable native-control type scale at every window size. */
.draft-label, .nav-count, .book-meta p, .format-label,
.sidebar-section-label, .sidebar-section-label > :last-child,
.chapter-item .number, .sidebar-footer, .toolbar-caption,
.category-count, .category-chip.active .category-count,
.sync-label,
.paragraph-number, .paragraph-meta, .paragraph-meta .tag,
.paragraph-meta button, .paragraph-meta .paragraph-add,
.reading-status, .panel-tabs button span, .empty-hint, .panel-bottom,
.cluster-row-body small, .cluster-size, .panel-section-header, .panel-back,
.cluster-detail-heading > p, .cluster-detail-actions > span,
.source-label, .material-tags span, .material-note,
.collection-meta, .detail-material-header, .detail-note > span,
.selection-popover-top > span, .selection-category .shortcut,
.selection-popover-bottom > span, .target-menu-title,
.appearance-checkbox, .field-label, .checkbox-label,
.dialog-footer > span, .category-editor-head, .category-editor-row > span,
.category-footnote, .export-source-note, .format-option span,
.search-result > .source-label, .search-result > small,
.library-book p, .book-info p, .toast, .toast > button {
  font-size: 11px;
}
.back-to-library, .chapter-label, .chapter-breadcrumb,
.collect-target, .category-chip, .panel-tabs button,
.primary-button, .secondary-button, .text-button,
.panel-empty .primary-button, .panel-empty.compact .secondary-button,
.cluster-row-body strong, .cluster-detail-actions > .text-button,
.material-card-actions button, .panel-create-button,
.knowledge-header .primary-button, .detail-heading button,
.detail-material-header > .text-button, .material-controls button,
.selection-popover-top strong, .selection-category .name,
.selection-popover-bottom .text-button, .selection-delete,
.target-option, .target-create, .appearance-row,
.text-input, .category-name-input, .dialog-footer button,
.add-category-row .text-input, .add-category-row .secondary-button,
.export-options > .text-input, .export-options .checkbox-label,
.format-option strong, .search-result > strong,
.library-book .primary-button, .library-book .secondary-button {
  font-size: 12px;
}
.view-switch button, .export-button { font-size: 12px; }
.panel-heading h2, .popover-title { font-size: 13px; }
.panel-empty h3, .export-empty h3 { font-size: 14px; }
.panel-empty > p, .export-empty p, .dialog-description,
.note-dialog .dialog-description, .knowledge-header p:last-child,
.knowledge-empty p, .detail-heading p, .detail-note,
.search-empty, .export-preview .search-empty {
  font-size: 12px;
  color: #7b887c;
}
.section-eyebrow, .chapter-intro .section-eyebrow,
.export-dialog .section-eyebrow, .library-dialog .section-eyebrow {
  font-size: 10px;
}
.book-meta p, .back-to-library, .chapter-breadcrumb,
.collect-target, .toolbar-caption,
.sidebar-section-label,
.appearance-row, .field-label, .checkbox-label,
.category-name-input, .text-input {
  color: #788279;
}
.chapter-label { color: #727d72; }
.chapter-item.active .chapter-label { color: #42634a; }
.chapter-item .number,
.source-label, .paragraph-number, .paragraph-meta,
.paragraph-meta .paragraph-add, .reading-status, .sidebar-footer,
.empty-hint, .panel-bottom, .cluster-row-body small, .cluster-size,
.panel-section-header, .cluster-detail-actions > span,
.material-note, .collection-meta,
.selection-popover-top > span, .selection-category .shortcut,
.selection-popover-bottom > span, .target-menu-title,
.appearance-checkbox, .dialog-footer > span,
.category-editor-head, .category-editor-row > span, .category-footnote,
.export-source-note, .format-option span, .search-result > small,
.book-info p, .library-book p {
  color: #8c978c;
}
.selection-hint, .status-separator, .save-status,
.sidebar-section-label > :last-child, .panel-tabs button span,
.panel-tabs button.selected span, .draft-label { color: #96a093; }
.panel-tabs button { color: #85917e; }
.panel-tabs button.selected { color: #4c6d50; }
.panel-heading h2, .panel-empty h3 { color: #5b705a; }
.panel-empty .primary-button { min-height: 34px; padding: 0 14px; }
.panel-empty .primary-button svg { width: 14px; height: 14px; }
.panel-empty > p { max-width: 220px; line-height: 1.9; }
.panel-bottom { gap: 7px; }
.paragraph-meta { margin-top: 12px; min-height: 20px; }
.paragraph-meta .paragraph-add { height: 20px; }
.paragraph-meta .paragraph-add svg { width: 11px; height: 11px; }
.paragraph-number { top: 17px; }
.chapter-item { padding-top: 13px; padding-bottom: 13px; }
.panel-create-button { min-height: 35px; }
.material-excerpt { color: #64715f; font-size: 12px; }
.material-excerpt { font-family: var(--chinese-font); font-size: 14px; line-height: 1.85; }
.material-card-top > .source-label { flex: 1; min-width: 0; }
.material-kind-label { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 21px; padding: 1px 3px; margin-right: 6px; border: 1px solid var(--line); border-radius: 3px; color: #788579; font: 11px var(--ui-font); }
.detail-material-content.selection-content { grid-template-columns: minmax(0, 1fr); }
.material-card-actions { gap: 7px; }
.material-card-actions > .icon-button { width: 24px; height: 24px; }
.material-card-actions .remove-material-button, .material-controls .remove-material-button { color: #a07164; white-space: nowrap; }
.material-card-actions .remove-material-button:hover, .material-controls .remove-material-button:hover { color: #874a3b; }
.material-tags .material-state { color: #808a80; font-size: 11px; }
.cluster-row-body strong { color: #5e7353; }
.cluster-row { min-height: 70px; }
.selection-popover-top { gap: 9px; padding-left: 13px; }
.selection-popover-top > span { font-size: 10px; }
.selection-category { gap: 9px; padding-top: 10px; min-height: 74px; }
.selection-popover-bottom { align-items: flex-start; min-height: 40px; }
.selection-popover-bottom > span { max-width: 220px; line-height: 1.7; }
.selection-popover-bottom .text-button { flex: 0 0 auto; font-size: 11px; }
.selection-delete { grid-column: 1 / -1; margin-top: 3px; min-height: 33px; }
.target-option { min-height: 40px; }
.target-option small { color: #97a18e; font-size: 11px; }
.target-menu-title { line-height: 1.6; }
.target-create { padding-top: 13px; padding-bottom: 10px; }
.popover-title { padding-bottom: 14px; }
.appearance-row { padding-top: 15px; }
.stepper button { font-size: 13px; }
.dialog-description { margin-top: 8px; line-height: 1.8; }
.text-input::placeholder { color: #a7b09f; }
.checkbox-label { line-height: 1.8; }
.form-error { font-size: 11px; }
.format-option { min-height: 105px; }
.export-empty { padding-left: 10px; padding-right: 10px; }
.preview-caption { font-size: 10px; color: #95a18c; }
.report-eyebrow { font-size: 9px; color: #97a58c; }
.report-book { font-size: 10px; color: #929e88; }
.report-collection h4 { font-size: 12px; }
.report-item .source-label { font-size: 9px; }
.report-item p, .report-quote { font-size: 11px; color: #718064; }
.report-quote.zh { font-size: 10px; }
.report-personal-note { font-size: 10px !important; color: #8d9b80 !important; }
.search-result > strong { line-height: 1.8; color: #6d7c63; }
.search-result > small { line-height: 1.65; margin-top: 5px; }
.book-info strong { font-size: 12px; color: #7f9270; }
.toast { min-height: 41px; }

@media (max-width: 399px) {
  .window-bar { grid-template-columns: auto 1fr auto; gap: 4px; padding-left: 8px; padding-right: 8px; }
  .window-leading { gap: 3px; }
  .wordmark { font-size: 14px; }
  .view-switch button { min-width: 0; padding: 0 5px; gap: 3px; }
  .view-switch svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  @page { size: A4; margin: 17mm 16mm 18mm; }
  html, body { width: auto; height: auto; overflow: visible !important; background: #fff !important; color: #252c22; }
  body > * { display: none !important; }
  body > #print-area { display: block !important; font-family: var(--ui-font); font-size: 10pt; line-height: 1.7; }
  #print-area * { box-shadow: none !important; }
  #print-area .preview-paper { width: auto; min-height: 0; padding: 0; }
  #print-area .report-title { margin-bottom: 8mm; padding-bottom: 5mm; border-bottom: .3mm solid #d9e0d1; }
  #print-area .report-title h1, #print-area .report-title h2 { color: #304328; font-size: 21pt; line-height: 1.4; }
  #print-area .report-title p { color: #7c8b70; font-size: 8pt; margin-top: 3mm; }
  #print-area .report-item { break-inside: avoid; margin-bottom: 7mm; padding-bottom: 5mm; border-bottom: .2mm solid #e8ecdf; }
  #print-area .report-item h3 { color: #657d54; font-size: 9pt; margin-bottom: 3mm; }
  #print-area .report-item p, #print-area .report-quote { color: #3c4e31; font-size: 10pt; line-height: 1.75; }
  #print-area .report-quote + .report-quote { margin-top: 3mm; }
  #print-area .report-quote.zh { font-family: var(--chinese-font); font-size: 10pt; line-height: 1.85; }
  #print-area .report-note { color: #7d906c; font-size: 9pt; margin-top: 3mm; padding-left: 3mm; border-left: .3mm solid #d9e5cc; }
  #print-area a { color: inherit; text-decoration: none; }
  #print-area button { display: none !important; }
  #print-area .print-header { padding-bottom: 6mm; margin-bottom: 8mm; border-bottom: .3mm solid #d9e0d1; }
  #print-area .print-header > span { color: #8a9c7b; font-size: 8pt; letter-spacing: 1pt; }
  #print-area .print-header h1 { margin: 3mm 0 1.5mm; color: #2f4427; font-family: var(--chinese-font); font-weight: 500; font-size: 23pt; line-height: 1.3; }
  #print-area .print-header > p { color: #8a9a7a; font-size: 9pt; }
  #print-area .print-cluster + .print-cluster { break-before: page; }
  #print-area .print-cluster h2 { color: #4f713a; font-family: var(--chinese-font); font-size: 17pt; font-weight: 500; margin-bottom: 6mm; break-after: avoid; }
  #print-area .print-material { padding: 0 0 6mm; margin: 0 0 6mm; border-bottom: .2mm solid #e3eadb; }
  #print-area .print-material h3 { color: #8ca479; font-family: var(--ui-font); font-weight: 400; font-size: 8pt; margin-bottom: 3mm; break-after: avoid; }
  #print-area .print-material > p { color: #394d2e; font-family: var(--chinese-font); font-size: 11pt; line-height: 1.7; orphans: 3; widows: 3; }
  #print-area .print-material > p[lang="zh-CN"] { color: #4a5d3e; font-family: var(--chinese-font); font-size: 10.5pt; line-height: 1.9; margin-top: 4mm; }
  #print-area .print-material aside { margin: 4mm 0; padding: 2mm 0 2mm 3mm; border-left: .4mm solid #dbe7ce; color: #8a9f77; break-inside: avoid; }
  #print-area .print-material aside > strong { font-size: 8pt; font-weight: 500; }
  #print-area .print-material aside > p { font-size: 9pt; line-height: 1.8; white-space: pre-wrap; }
  #print-area .print-material > small { display: block; font-size: 7pt; color: #a5b598; margin-top: 4mm; }
  #print-area .annotation-mark { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Rock: comfortable single-column Chinese reading at every width. */
.reading-mode { display: inline-flex; flex-shrink: 0; padding: 3px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--canvas); }
.reading-mode button { min-height: 26px; padding: 3px 8px; color: var(--ink-secondary); font-size: 11px; white-space: nowrap; border-radius: 4px; }
.reading-mode button.selected { color: var(--green); background: #fff; box-shadow: 0 1px 3px #263d2010; }
.parallel-note { padding: 0 0 24px; color: var(--ink-tertiary); font-size: 12px; }
.parallel-labels, .parallel-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.parallel-labels { padding: 0 0 18px; color: var(--ink-tertiary); font-size: 11px; line-height: 1.7; border-bottom: 1px solid var(--line); }
.parallel-labels > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parallel-group { padding-top: 24px; border-bottom: 1px solid #edf0e8; }
.parallel-chinese, .parallel-english { min-width: 0; }
.parallel-paragraph { margin: 7px 0 24px; font: 400 var(--reading-size)/1.85 Georgia, "Times New Roman", serif; color: #4d574c; overflow-wrap: anywhere; }
.parallel-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 7px 0 24px; }
.parallel-table td, .parallel-table th { padding: 8px; border: 1px solid var(--line-strong); vertical-align: top; text-align: left; }
.parallel-table .parallel-paragraph { margin: 0; font-size: max(12px, calc(var(--reading-size) * .78)); line-height: 1.65; }
.parallel-missing { padding-top: 10px; padding-bottom: 24px; color: #98a292; font-size: 11px; line-height: 1.8; }
.parallel-review { display: inline-block; padding: 2px 6px; border-radius: 3px; background: #faf4e4; color: #9c8044; font-size: 10px; }
.reading-sheet { min-width: 0; max-width: 850px; padding: 0 48px 80px; }
.reading-sheet.is-parallel { max-width: 1440px; padding-left: 40px; padding-right: 32px; }
.chapter-intro { padding: 36px 0 28px; }
.chapter-intro .section-eyebrow { line-height: 1.8; letter-spacing: .5px; }
.chinese-heading { font-size: 29px; line-height: 1.55; }
.reader-paragraph { overflow-wrap: anywhere; }
.paragraph-meta > div { display: flex; gap: 14px; }
.book-figure { margin: 24px auto; text-align: center; }
.book-figure img { max-width: 100%; max-height: 75vh; height: auto; object-fit: contain; }
.book-reference { color: #527b68; text-decoration: underline; text-underline-offset: 3px; }
.book-reference:hover { color: #245b40; }
.reading-section-heading:empty { display: none; }
.chapter-breadcrumb { overflow: hidden; white-space: nowrap; min-width: 0; }
#chapter-name { overflow: hidden; text-overflow: ellipsis; }
#chapter-number { flex-shrink: 0; }
.book-meta h1 { line-height: 1.65; }
@media (max-width: 699px) {
  .reading-mode button { padding: 3px 5px; font-size: 10px; }
  .is-parallel .parallel-labels { display: none; }
  .parallel-group { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .parallel-english { margin: 0 0 16px; padding: 0 0 0 14px; border-left: 2px solid #e1e8dc; }
  .reading-sheet.is-parallel { padding-left: 36px; padding-right: 30px; }
  .reading-sheet { min-width: 0; padding: 0 30px 60px 36px; }
  .chinese-heading { font-size: 24px; }
  .wordmark { font-size: 17px; }
  .toolbar-caption { display: none; }
  .category-strip { overflow-x: auto; min-width: 0; }
  .category-chip { flex-shrink: 0; }
  .reading-toolbar { flex-wrap: nowrap; }
  .collect-target { max-width: 110px; flex-shrink: 0; }
}

/* Lookups stay attached to the reader's explicit selection. */
.research-dialog { width: 680px; height: min(850px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); margin: 20px 20px 20px auto; overflow: hidden; padding: 24px; }
.research-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.research-dialog .dialog-topline { margin: 0; flex-shrink: 0; }
.research-dialog .dialog-topline h2 { font-size: 22px; }
.research-dialog .section-eyebrow { margin: 0 0 5px; }
.research-dialog .source-label { margin: 0; flex-shrink: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.research-selection { margin: 0; padding: 13px 16px; border-left: 3px solid #8eab94; background: #f5f7f1; color: #475945; font: 16px/1.8 var(--chinese-font); max-height: 125px; overflow-y: auto; white-space: pre-wrap; flex-shrink: 0; }
.research-links { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; flex-shrink: 0; }
.research-links a, .research-links button { color: #52775c; font-size: 12px; text-decoration: none; padding: 3px 0; }
.research-links > :last-child { margin-left: auto; }
.research-links a:hover, .research-links button:hover { text-decoration: underline; }
.research-messages { min-height: 90px; flex: 1; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); padding: 12px 0 4px; }
.research-empty { margin: 16px 0; color: #859080; font-size: 13px; line-height: 1.8; }
.research-message { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e3e8de; border-radius: 6px; }
.research-message.user { background: #f5f8f3; margin-left: 38px; }
.research-message-label { color: #6c806c; font-size: 11px; }
.research-message p { margin: 6px 0 0; font: 14px/1.85 var(--ui-font); color: #394b3d; white-space: pre-wrap; overflow-wrap: anywhere; }
.research-composer { flex-shrink: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.research-quick-questions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.research-quick-questions button { padding: 5px 9px; border: 1px solid #dfe7db; border-radius: 4px; color: #647b5c; font-size: 11px; }
.research-quick-questions button:hover { background: #f0f5e9; }
#research-question { resize: vertical; min-height: 66px; max-height: 140px; font-size: 13px; line-height: 1.7; }
.research-composer .checkbox-label { margin-top: 10px; }
.research-status { min-height: 18px; margin: 9px 0; color: #58775c; font-size: 12px; line-height: 1.6; }
.research-status.is-error { color: #a36351; }
.research-actions { display: flex; align-items: center; gap: 9px; }
.research-actions > span { flex: 1; }
.research-footnote { margin: 10px 0 0; color: #87927f; font: 11px/1.7 var(--ui-font); }
#research-copy-text { max-height: 100px; min-height: 70px; font-size: 12px; flex-shrink: 0; }
.ai-settings-dialog { width: 550px; }
.ai-settings-dialog .field-label { margin-top: 15px; }
.ai-settings-dialog .text-input { color: #425544; font-size: 13px; }
.ai-sharing-note { margin: 16px 0 0; font-size: 12px; line-height: 1.8; color: #6f7f6c; }
.ai-provider-guide { margin-top: 14px; font-size: 12px; line-height: 1.85; color: #6b7c69; }
.ai-provider-guide p { margin: 0 0 5px; }
.ai-provider-guide a { color: #456f55; text-decoration: underline; text-underline-offset: 3px; }
.ai-auth-status { margin: 5px 0 0; color: #4d6e52; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.ai-settings-dialog [hidden] { display: none !important; }
.ai-settings-dialog .dialog-footer { flex-wrap: wrap; gap: 10px; }
.ai-settings-dialog .category-footnote { line-height: 1.8; overflow-wrap: anywhere; }
.ai-service-help { padding: 11px 13px; background: #f6f5ed; border: 1px solid #e7e3d6; color: #7b7358; font-size: 12px; line-height: 1.8; }
.ai-settings-dialog .dialog-footer { justify-content: space-between; }
@media (max-width: 699px) {
  .research-dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); margin: 10px; height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); padding: 18px; gap: 9px; }
  .research-dialog .dialog-topline h2 { font-size: 20px; }
  .research-selection { max-height: 90px; font-size: 15px; padding: 10px 12px; }
  .research-links { gap: 11px; }
  .research-message.user { margin-left: 18px; }
  .research-actions button { padding-left: 9px; padding-right: 9px; font-size: 11px; }
  .ai-settings-dialog { padding: 19px; }
  .research-footnote { font-size: 10px; }
}

.library-import { margin: 16px 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.library-list { display: grid; gap: 7px; max-height: 300px; overflow: auto; margin-bottom: 16px; }
.library-note { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-secondary, #7d8a77); }
.library-switch { text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; color: #425544; overflow-wrap: anywhere; }
.library-switch:hover, .library-switch[aria-current="true"] { background: #f0f5e9; }
.library-switch:disabled { opacity: 1; font-weight: 600; }
.library-dialog .dialog-footer { flex-wrap: wrap; gap: 8px; }

.search-default-settings { padding: 0 0 16px; margin: 4px 0 16px; border-bottom: 1px solid var(--line); }

/* Maintain existing knowledge clusters and personal information types. */
.knowledge-header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cluster-list-row { display: flex; align-items: center; gap: 6px; }
.cluster-list-row .cluster-row { flex: 1; min-width: 0; width: auto; }
.cluster-edit-button, .cluster-detail-heading > .text-button { flex: 0 0 auto; min-height: 36px; padding: 6px 9px; }
.knowledge-cluster-list { display: grid; gap: 12px; }
.knowledge-cluster-row { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.knowledge-cluster-open { flex: 1; min-width: 0; text-align: left; }
.knowledge-cluster-open strong, .knowledge-cluster-open span { display: block; overflow-wrap: anywhere; }
.knowledge-cluster-open strong { color: #4e6b42; font-size: 16px; font-weight: 500; }
.knowledge-cluster-open span { margin-top: 7px; color: #8a9981; font-size: 12px; }
.material-type-edit { cursor: pointer; text-align: left; }
.material-type-edit:hover { box-shadow: 0 0 0 2px #aabca63b; }
.cluster-dialog { width: min(660px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; }
.cluster-member-editor { margin-top: 20px; }
.cluster-member-editor .field-label { display: flex; gap: 8px; align-items: baseline; }
#cluster-member-count { font-size: 12px; font-weight: 400; color: #839477; }
.cluster-member-editor .category-footnote { margin: 9px 0; }
.cluster-member-list { max-height: 32vh; min-height: 56px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 0 12px; }
.cluster-member-row { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf0e8; }
.cluster-member-row:last-child { border-bottom: 0; }
.cluster-member-option { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.cluster-member-option input { flex: 0 0 auto; margin-top: 5px; width: 17px; height: 17px; accent-color: #65855f; }
.cluster-member-option strong { display: block; color: #526a49; font-size: 13px; line-height: 1.75; font-weight: 400; overflow-wrap: anywhere; }
.cluster-member-option small { display: block; margin-top: 4px; color: #8b9786; font-size: 11px; line-height: 1.6; }
.cluster-member-order { display: flex; flex-direction: column; gap: 3px; }
.cluster-member-order .icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 5px; }
.cluster-member-order .icon-button:disabled { opacity: .3; cursor: default; }
.cluster-delete-confirm { padding: 14px; margin-top: 16px; border: 1px solid #e5c7b9; border-radius: 6px; background: #fcf6f0; }
.cluster-delete-confirm p { color: #956452; font-size: 13px; line-height: 1.8; }
.cluster-delete-confirm > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
#delete-cluster-button { margin-right: auto; color: #ad6d58; }
.material-type-dialog { width: min(510px, calc(100vw - 32px)); }
.material-type-dialog blockquote { max-height: 160px; overflow: auto; margin: 18px 0; border-left: 3px solid #c4d0bc; padding: 10px 14px; color: #65775b; line-height: 1.8; background: #f5f6ef; white-space: pre-wrap; overflow-wrap: anywhere; }
.material-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.material-type-option { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: #526a49; font-size: 14px; }
.material-type-option:has(input:checked) { background: #eef4e8; border-color: #9ab18d; }
.material-type-option input { accent-color: #65855f; }
@media (max-width: 699px) {
  .knowledge-cluster-row { padding: 12px; gap: 8px; }
  .knowledge-cluster-row .secondary-button { font-size: 12px; padding: 8px; }
  .knowledge-header-actions { justify-content: flex-end; }
  .cluster-dialog .dialog-footer { flex-wrap: wrap; gap: 8px; }
  .cluster-member-list { padding: 0 8px; }
}
/* 共读线 */
/* Other readers: a soft band under what they highlighted, a little darker where 心得 sit, and a count where each 心得 ends. */
.crowd-line{background:linear-gradient(to top,#dde7d2 0,#dde7d2 .32em,transparent .32em);box-decoration-break:clone;-webkit-box-decoration-break:clone;cursor:pointer}
.crowd-line.has-notes{background:linear-gradient(to top,#c9d9bc 0,#c9d9bc .32em,transparent .32em)}
.crowd-line[data-note-count]::after{content:attr(data-note-count);display:inline-block;min-width:1.5em;margin:0 .2em;padding:0 .35em;border-radius:.8em;background:#6f8b65;color:#fff;font:600 11px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;text-align:center;text-indent:0;vertical-align:.3em}
.crowd-popover{position:fixed;z-index:90;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 13px;border:1px solid var(--line-strong);border-radius:10px;background:var(--paper);box-shadow:0 6px 22px #28432b22;font-size:13px;color:var(--ink-secondary);white-space:nowrap}
.crowd-popover[hidden]{display:none}
.crowd-popover button{color:var(--green);font-size:13px;min-height:36px;padding:4px 8px}
/* 划线工具: one dark row of tools on every screen, like a reading app (placed by placeSelection in app.js). */
.selection-popover{width:auto;max-width:calc(100vw - 24px);padding:0;border:0;border-radius:12px;background:#2f3a2d;color:#eef2e9;box-shadow:0 10px 30px #1c261a40}
.selection-popover::after{content:"";position:absolute;left:calc(var(--arrow-x,50%) - 7px);top:-7px;border:7px solid transparent;border-top:0;border-bottom-color:#2f3a2d}
.selection-popover.is-above::after{top:auto;bottom:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#2f3a2d}
.selection-toolbar{display:flex;align-items:stretch}
.selection-tools{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:5px 4px}
.selection-tools::-webkit-scrollbar{display:none}
.selection-tool{position:relative;display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:var(--tool-w,58px);max-width:var(--tool-w,none);min-height:56px;padding:6px 4px 5px;border-radius:8px;color:#eef2e9;font-size:11px;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;scroll-snap-align:start}
.selection-tool[hidden]{display:none}
.selection-tool:hover,.selection-tool:focus-visible,.selection-tool[aria-expanded=true]{background:#ffffff17}
.selection-tool svg{width:21px;height:21px}
.selection-tool.selection-primary{color:#cfe6bf;font-weight:600}
.selection-tool.selection-delete{color:#f2c6b6}
.selection-share input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.selection-share .share-off,.selection-share.is-private .share-on{display:none}
.selection-share.is-private .share-off{display:inline-block}
.selection-share.is-private{color:#c3cabd}
.selection-share:has(input:focus-visible){outline:2px solid #cfe6bf;outline-offset:-2px}
.selection-more{flex:0 0 auto;width:34px;border-left:1px solid #ffffff1f;border-radius:0 12px 12px 0;color:#eef2e9}
.selection-more[hidden]{display:none}
.selection-more.is-back svg{transform:rotate(180deg)}
.selection-tag-panel{border-top:1px solid #ffffff1f}
.selection-tag-panel[hidden]{display:none}
.selection-popover .selection-popover-top{border-bottom-color:#ffffff14}
.selection-popover .selection-popover-top strong{color:#cfe6bf;font-size:12px}
.selection-popover .selection-popover-top > span{color:#aeb9a6;font-size:11px}
.selection-popover .selection-popover-top .icon-button{color:#aeb9a6}
.selection-popover .selection-category{color:#e4eadf}
.selection-popover .selection-category:hover{background:#ffffff14}
.selection-popover .selection-category .color-line{background:color-mix(in srgb,var(--mark-color,#9cb68b) 78%,transparent)}
.selection-popover .selection-category .shortcut{color:#93a08b}
.selection-popover .selection-popover-bottom{background:transparent;border-top-color:#ffffff14;border-radius:0 0 12px 12px}
.selection-popover .selection-popover-bottom > span{color:#aeb9a6}
.selection-popover .selection-popover-bottom .text-button{color:#cfe6bf}