@illli-studio/dsh-mory 0.0.0-stage → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/LICENSE +17 -0
  2. package/README.md +254 -2
  3. package/assets/memory-protocol.mjs +88 -0
  4. package/assets/mory-logo-premium.svg +51 -0
  5. package/assets/source.json +6 -0
  6. package/assets/website-i18n.tsx +106 -0
  7. package/assets/website-styles.css +7451 -0
  8. package/assets/website-theme.tsx +65 -0
  9. package/client.js +459 -0
  10. package/cordis.patch.yml +4 -0
  11. package/docs/source-assets.md +62 -0
  12. package/icon.svg +51 -0
  13. package/index.js +124 -0
  14. package/locale/en.json +6 -0
  15. package/locale/zh.json +6 -0
  16. package/package.json +32 -4
  17. package/protocol.mjs +88 -0
  18. package/scripts/build-client.mjs +172 -0
  19. package/service.mjs +165 -0
  20. package/settings.mjs +294 -0
  21. package/src/client.js +458 -0
  22. package/test/service.mjs +395 -0
  23. package/test/settings.mjs +278 -0
package/client.js ADDED
@@ -0,0 +1,459 @@
1
+ // Generated by scripts/build-client.mjs; edit src/client.js and website source assets.
2
+ window.__ModuleLoader__.load({
3
+ id: '@illli-studio/dsh-mory',
4
+ factory(require) {
5
+ const React = require('react');
6
+ const h = React.createElement;
7
+ const css = ".mory-app{container-type:inline-size;container-name:mory;position:relative;isolation:isolate;height:100%;overflow:auto;min-width:0;}\n@scope (.mory-app) {\n\r\n\r\n:scope {\r\n /* shadcn-compatible semantic tokens, mapped to Mory's warm repository palette */\r\n --background: 48 20% 95%;\r\n --foreground: 225 15% 11%;\r\n --card: 60 100% 99%;\r\n --card-foreground: 225 15% 11%;\r\n --popover: 60 100% 99%;\r\n --popover-foreground: 225 15% 11%;\r\n --primary-foreground: 60 100% 99%;\r\n --secondary: 48 18% 94%;\r\n --secondary-foreground: 225 10% 25%;\r\n --muted-foreground: 220 6% 46%;\r\n --accent-foreground: 161 45% 26%;\r\n --destructive: 5 57% 39%;\r\n --ring: 161 45% 26%;\r\n /* One shared corner system: use the same 12px radius for everyday UI. */\r\n --radius: 12px;\r\n --radius-ui: 12px;\r\n --radius-pill: 999px;\r\n --bg: #f5f4f0;\r\n --surface: #fffffc;\r\n --surface-muted: #f7f6f1;\r\n --surface-raised: rgba(255, 255, 252, 0.92);\r\n --border: #dedbd3;\r\n --border-soft: #e7e4dc;\r\n --text: #17191f;\r\n --muted: #70757d;\r\n --primary: 225 15% 11%;\r\n --primary-hover: #2a2d35;\r\n --accent: #245f51;\r\n --danger: #9d352b;\r\n --radius-sm: var(--radius-ui);\r\n --radius-md: var(--radius-ui);\r\n --radius-lg: var(--radius-ui);\r\n --shadow-soft: 0 18px 54px rgba(25, 28, 35, 0.08);\r\n --shadow-menu: 0 18px 48px rgba(25, 28, 35, 0.14);\r\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n color: var(--text);\r\n background: var(--bg);\r\n font-synthesis: none;\r\n text-rendering: optimizeLegibility;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.ui-select-trigger { min-height: 42px; width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-muted); color: var(--text); padding: 0 12px; font-weight: 850; }\r\n.ui-select-content { z-index: 200; min-width: var(--radix-select-trigger-width); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-ui); background: var(--surface-raised); padding: 6px; box-shadow: var(--shadow-menu); }\r\n.ui-select-item { position: relative; display: flex; min-height: 38px; align-items: center; justify-content: space-between; border-radius: var(--radius-ui); padding: 0 10px; color: var(--text); font-size: 14px; outline: none; }\r\n.ui-select-item[data-highlighted] { background: var(--surface-muted); }\r\n.ui-tabs-list { display: flex; }\r\n.ui-tabs-trigger[data-state=\"active\"] { border-color: var(--text); background: var(--text); color: var(--surface); }\r\n.ui-dialog-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(23, 25, 31, 0.18); }\r\n.ui-dialog-content { position: fixed; left: 50%; top: 50%; z-index: 101; width: min(560px, calc(100% - 32px)); transform: translate(-50%, -50%); border: 1px solid var(--border); border-radius: var(--radius-ui); background: var(--surface); padding: 22px; box-shadow: var(--shadow-soft); }\r\n.ui-dialog-close { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); }\r\n.ui-dropdown-content { z-index: 300; min-width: 190px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-ui); background: var(--surface-raised); padding: 6px; box-shadow: var(--shadow-menu); }\r\n.ui-dropdown-item { display: flex; min-height: 38px; align-items: center; border-radius: var(--radius-ui); padding: 0 10px; color: var(--text); outline: none; }\r\n.ui-dropdown-item[data-highlighted] { background: var(--surface-muted); }\r\n.ui-dropdown-item .bookmark-import { width: 100%; min-height: 38px; border: 0; border-radius: var(--radius-ui); background: transparent; box-shadow: none; justify-content: flex-start; }\r\n\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\n:scope {\r\n margin: 0;\r\n min-width: 0;\r\n min-height: 100vh;\r\n}\r\n\r\nbutton,\r\ninput,\r\nselect,\r\ntextarea {\r\n font: inherit;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n}\r\n\r\n.product-shell {\r\n min-height: 100vh;\r\n padding: 18px;\r\n background:\r\n radial-gradient(circle at 20% 0%, rgba(255, 255, 252, 0.9), transparent 34%),\r\n linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 244, 240, 0.72)),\r\n var(--bg);\r\n}\r\n\r\n.product-header,\r\n.workspace-layout,\r\n.feed-section {\r\n width: min(1480px, 100%);\r\n margin: 0 auto;\r\n}\r\n\r\n.product-header {\r\n min-height: 52px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 12px;\r\n padding: 0 4px;\r\n}\r\n\r\n.brand-lockup,\r\n.header-actions,\r\n.card-title,\r\n.mini-signal,\r\n.connector-item,\r\n.memory-card-top,\r\n.memory-card footer,\r\n.section-heading,\r\n.sync-actions,\r\n.memory-tags {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.brand-lockup {\r\n gap: 12px;\r\n}\r\n\r\n@container mory (min-width: 1121px) {\r\n .product-header .brand-lockup {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n}\r\n\r\n.brand-glyph {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 14px;\r\n display: grid;\r\n place-items: center;\r\n border: 1px solid var(--border-soft);\r\n background: var(--surface);\r\n color: var(--text);\r\n box-shadow: 0 8px 22px rgba(25, 28, 35, 0.06);\r\n}\r\n\r\n.brand-glyph.logo-mark {\r\n width: 56px;\r\n height: 56px;\r\n border: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n}\r\n\r\n.product-header .brand-glyph.logo-mark {\r\n width: 52px;\r\n height: 52px;\r\n}\r\n\r\n.brand-lockup strong,\r\n.brand-lockup span {\r\n display: block;\r\n}\r\n\r\n.brand-lockup strong {\r\n font-size: 18px;\r\n letter-spacing: 0;\r\n}\r\n\r\n.brand-lockup span,\r\n.hero-copy p,\r\n.section-heading p,\r\n.memory-card p,\r\n.empty-feed p,\r\n.tag-stack.empty,\r\n.mini-signal,\r\n.connector-item strong {\r\n color: #6c7078;\r\n}\r\n\r\n.header-actions {\r\n gap: 8px;\r\n}\r\n\r\n.status-chip {\r\n height: 34px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 7px;\r\n border: 1px solid var(--border);\r\n border-radius: 999px;\r\n padding: 0 12px;\r\n background: rgba(255, 255, 255, 0.72);\r\n font-size: 13px;\r\n font-weight: 800;\r\n}\r\n\r\n.status-chip.good {\r\n color: #1f6a55;\r\n}\r\n\r\n.workspace-layout {\r\n position: relative;\r\n z-index: 5;\r\n display: grid;\r\n grid-template-columns: 218px minmax(0, 1fr);\r\n gap: 12px;\r\n align-items: start;\r\n}\r\n\r\n.workspace-nav {\r\n position: sticky;\r\n top: 14px;\r\n z-index: 60;\r\n min-width: 0;\r\n border: 1px solid var(--border);\r\n border-radius: 24px;\r\n background: rgba(255, 255, 252, 0.82);\r\n box-shadow: 0 14px 42px rgba(25, 28, 35, 0.07);\r\n backdrop-filter: blur(22px);\r\n padding: 12px;\r\n}\r\n\r\n.nav-brand-card {\r\n width: 100%;\r\n min-height: 76px;\r\n border: 0;\r\n border-radius: 14px;\r\n background: transparent;\r\n color: var(--text);\r\n padding: 8px 4px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 18px;\r\n text-align: left;\r\n cursor: pointer;\r\n box-shadow: none;\r\n}\r\n\r\n.nav-brand-card:hover {\r\n background: rgba(247, 246, 241, 0.72);\r\n border-color: transparent;\r\n color: var(--text);\r\n}\r\n\r\n.nav-brand-card .brand-glyph {\r\n width: 60px;\r\n height: 60px;\r\n background: transparent;\r\n border: 0;\r\n color: var(--accent);\r\n box-shadow: none;\r\n}\r\n\r\n.nav-brand-card strong,\r\n.nav-brand-card span {\r\n display: block;\r\n}\r\n\r\n.nav-brand-card span {\r\n color: var(--muted);\r\n font-size: 12px;\r\n font-weight: 760;\r\n}\r\n\r\n.nav-section-label {\r\n margin: 14px 6px 8px;\r\n color: var(--muted);\r\n font-size: 11px;\r\n font-weight: 950;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n}\r\n\r\n.record-nav-list,\r\n.shortcut-list {\r\n display: grid;\r\n gap: 6px;\r\n}\r\n\r\n.record-nav-list.measure-only,\r\n.settings-tabs.measure-only {\r\n position: absolute;\r\n left: 12px;\r\n right: 12px;\r\n overflow: hidden;\r\n visibility: hidden;\r\n pointer-events: none;\r\n}\r\n\r\n.record-nav-list button,\r\n.shortcut-list button {\r\n min-height: 38px;\r\n border: 1px solid transparent;\r\n border-radius: 14px;\r\n background: transparent;\r\n color: var(--text);\r\n display: grid;\r\n align-items: center;\r\n gap: 9px;\r\n font-weight: 850;\r\n}\r\n\r\n.record-nav-list button {\r\n grid-template-columns: 18px minmax(0, 1fr) auto;\r\n text-align: left;\r\n padding: 0 10px;\r\n}\r\n\r\n.record-nav-list button:hover,\r\n.shortcut-list button:hover {\r\n border-color: var(--border-soft);\r\n background: var(--surface-muted);\r\n}\r\n\r\n.record-nav-list strong {\r\n color: var(--muted);\r\n font-size: 12px;\r\n}\r\n\r\n.shortcut-list button {\r\n justify-content: start;\r\n padding: 0 10px;\r\n color: #4d535c;\r\n}\r\n\r\n.utility-nav-list {\r\n display: grid;\r\n gap: 4px;\r\n}\r\n\r\n.utility-nav-button {\r\n width: 100%;\r\n min-height: 36px;\r\n display: grid;\r\n grid-template-columns: 18px minmax(0, 1fr) 14px;\r\n align-items: center;\r\n gap: 9px;\r\n padding: 0 10px;\r\n border: 1px solid transparent;\r\n border-radius: 12px;\r\n background: transparent;\r\n color: #4d535c;\r\n font-size: 12px;\r\n font-weight: 820;\r\n text-align: left;\r\n}\r\n\r\n.utility-nav-button svg:last-child {\r\n color: var(--muted);\r\n transform: rotate(-90deg);\r\n}\r\n\r\n.utility-nav-button:hover,\r\n.utility-nav-button.active {\r\n border-color: var(--border-soft);\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n}\r\n\r\n.utility-nav-button.active svg:last-child {\r\n transform: rotate(0deg);\r\n color: var(--accent);\r\n}\r\n\r\n.workspace-main {\r\n min-width: 0;\r\n display: grid;\r\n gap: 12px;\r\n}\r\n\r\n.console-main,\r\n.console-side,\r\n.feed-section {\r\n border: 1px solid var(--border);\r\n background: rgba(255, 255, 252, 0.78);\r\n box-shadow: var(--shadow-soft);\r\n backdrop-filter: blur(22px);\r\n}\r\n\r\n.console-main {\r\n min-width: 0;\r\n overflow: hidden;\r\n min-height: unset;\r\n border-radius: 24px;\r\n padding: clamp(16px, 2.4vw, 24px);\r\n display: grid;\r\n align-content: start;\r\n gap: 12px;\r\n}\r\n\r\n.hero-copy,\r\n.workbench-intro {\r\n max-width: 100%;\r\n}\r\n\r\n.eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #2d6b5c;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0;\r\n text-transform: uppercase;\r\n}\r\n\r\n.workbench-intro {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) auto;\r\n align-items: end;\r\n gap: 14px;\r\n}\r\n\r\n.workbench-intro h1 {\r\n margin: 6px 0 0;\r\n font-size: clamp(30px, 4vw, 48px);\r\n line-height: 1;\r\n letter-spacing: -0.04em;\r\n}\r\n\r\n.today-strip {\r\n display: grid;\r\n grid-template-columns: repeat(3, 96px);\r\n gap: 8px;\r\n}\r\n\r\n.today-strip .metric {\r\n padding: 10px;\r\n border-radius: 14px;\r\n background: rgba(247, 246, 241, 0.78);\r\n}\r\n\r\n.today-strip .metric strong {\r\n margin-top: 4px;\r\n font-size: 20px;\r\n}\r\n\r\n.capture-console,\r\n.search-row,\r\n.command-bar,\r\n.side-card,\r\n.notice,\r\n.memory-card,\r\n.empty-feed {\r\n border: 1px solid var(--border);\r\n background: var(--surface);\r\n}\r\n\r\n.capture-console {\r\n min-width: 0;\r\n overflow: visible;\r\n border-radius: 22px;\r\n padding: 16px;\r\n box-shadow: 0 12px 34px rgba(25, 28, 35, 0.06);\r\n}\r\n\r\n.record-mode-shell {\r\n position: relative;\r\n min-width: 0;\r\n overflow: visible;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 20px;\r\n background:\r\n linear-gradient(180deg, rgba(247, 246, 241, 0.72), rgba(255, 255, 252, 0.88)),\r\n var(--surface-muted);\r\n padding: 10px;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.record-mode-current {\r\n display: flex;\r\n align-items: center;\r\n gap: 11px;\r\n padding: 4px 4px 10px;\r\n}\r\n\r\n.record-mode-orb {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 15px;\r\n background: var(--text);\r\n color: var(--surface);\r\n display: grid;\r\n place-items: center;\r\n box-shadow: 0 12px 28px rgba(25, 28, 35, 0.14);\r\n}\r\n\r\n.record-mode-current strong,\r\n.record-mode-current span {\r\n display: block;\r\n}\r\n\r\n.record-mode-current strong {\r\n font-size: 15px;\r\n}\r\n\r\n.record-mode-current span {\r\n margin-top: 2px;\r\n color: var(--muted);\r\n font-size: 12px;\r\n font-weight: 760;\r\n}\r\n\r\n.record-mode-tabs {\r\n display: flex;\r\n gap: 7px;\r\n overflow: hidden;\r\n min-width: 0;\r\n max-width: 100%;\r\n padding-bottom: 2px;\r\n}\r\n\r\n.record-mode-tabs.measure-only {\r\n position: absolute;\r\n left: 10px;\r\n right: 10px;\r\n visibility: hidden;\r\n pointer-events: none;\r\n}\r\n\r\n.record-mode-select {\r\n display: none;\r\n width: 100%;\r\n min-height: 42px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 14px;\r\n background: var(--surface);\r\n color: var(--text);\r\n padding: 0 12px;\r\n outline: none;\r\n font-weight: 850;\r\n}\r\n\r\n.record-mode-select.visible {\r\n display: block;\r\n}\r\n\r\n.record-mode-tabs button {\r\n flex: 0 0 auto;\r\n min-height: 38px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: rgba(255, 255, 252, 0.72);\r\n color: #555961;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: 0 12px;\r\n font-weight: 900;\r\n font-size: 13px;\r\n transition:\r\n transform 140ms ease,\r\n background 140ms ease,\r\n border-color 140ms ease,\r\n box-shadow 140ms ease;\r\n}\r\n\r\n.record-mode-tabs button:hover,\r\n.record-mode-tabs button.active {\r\n background: var(--text);\r\n border-color: var(--text);\r\n color: var(--surface);\r\n box-shadow: 0 10px 22px rgba(25, 28, 35, 0.14);\r\n}\r\n\r\n.record-mode-tabs button:hover {\r\n transform: translateY(-1px);\r\n}\r\n\r\n.capture-top {\r\n display: grid;\r\n grid-template-columns: 24px minmax(0, 1fr);\r\n align-items: center;\r\n gap: 10px;\r\n min-height: 42px;\r\n padding: 0 4px;\r\n color: #656a73;\r\n min-width: 0;\r\n}\r\n\r\n.capture-top input,\r\n.capture-console textarea,\r\n.capture-bottom input,\r\n.search-row input,\r\n.command-bar input,\r\n.sync-grid input,\r\n.token-input {\r\n width: 100%;\r\n border: none;\r\n outline: none;\r\n background: transparent;\r\n color: var(--text);\r\n}\r\n\r\n.capture-top input {\r\n font-weight: 850;\r\n}\r\n\r\n.capture-console textarea {\r\n min-height: 108px;\r\n resize: vertical;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 18px;\r\n background: rgba(247, 246, 241, 0.76);\r\n padding: 14px;\r\n line-height: 1.6;\r\n}\r\n\r\n.capture-console textarea.chat-textarea {\r\n min-height: 142px;\r\n border-radius: 18px;\r\n padding: 14px;\r\n background:\r\n linear-gradient(180deg, rgba(255, 255, 252, 0.74), rgba(247, 246, 241, 0.72)),\r\n var(--surface-muted);\r\n}\r\n\r\n.scene-fields {\r\n display: grid;\r\n gap: 8px;\r\n min-width: 0;\r\n}\r\n\r\n.scene-panel {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 18px;\r\n background: rgba(247, 246, 241, 0.62);\r\n padding: 8px;\r\n margin: 8px 0;\r\n}\r\n\r\n.scene-empty {\r\n min-height: 42px;\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n color: var(--muted);\r\n padding: 0 10px;\r\n font-size: 13px;\r\n font-weight: 760;\r\n}\r\n\r\n.scene-fields.bill-fields {\r\n grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(128px, 150px);\r\n}\r\n\r\n.scene-fields input {\r\n width: 100%;\r\n min-height: 42px;\r\n border: 1px solid transparent;\r\n border-radius: var(--radius-md);\r\n background: var(--surface);\r\n color: var(--text);\r\n padding: 0 12px;\r\n outline: none;\r\n}\r\n\r\n.scene-fields select {\r\n width: 100%;\r\n min-height: 42px;\r\n border: 1px solid transparent;\r\n border-radius: var(--radius-md);\r\n background: var(--surface);\r\n color: var(--text);\r\n padding: 0 12px;\r\n outline: none;\r\n font-weight: 760;\r\n}\r\n\r\n.scene-fields input:focus,\r\n.scene-fields select:focus,\r\n.capture-console textarea:focus,\r\n.capture-top input:focus,\r\n.capture-bottom input:focus {\r\n border-color: #c7d8d0;\r\n box-shadow: 0 0 0 3px rgba(36, 95, 81, 0.08);\r\n background: var(--surface);\r\n}\r\n\r\n.scene-fields.finance-fields {\r\n grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1.2fr) minmax(0, 1.2fr);\r\n}\r\n\r\n.scene-fields.task-fields {\r\n grid-template-columns: minmax(128px, 150px) minmax(128px, 160px) minmax(0, 1fr);\r\n}\r\n\r\n.capture-bottom {\r\n display: grid;\r\n grid-template-columns: minmax(140px, 160px) minmax(0, 1fr) 104px 118px;\r\n gap: 8px;\r\n margin-top: 10px;\r\n min-width: 0;\r\n}\r\n\r\n.capture-bottom input,\r\n.sync-grid input,\r\n.token-input {\r\n min-height: 42px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: var(--radius-md);\r\n background: var(--surface-muted);\r\n padding: 0 12px;\r\n}\r\n\r\n.capture-bottom button,\r\n.sync-actions button,\r\n.ghost-button,\r\n.source-trigger,\r\n.source-menu button {\r\n border: none;\r\n min-height: 42px;\r\n border-radius: var(--radius-md);\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n font-weight: 900;\r\n}\r\n\r\n.capture-hint {\r\n margin: 10px 2px 0;\r\n color: var(--muted);\r\n font-size: 13px;\r\n font-weight: 760;\r\n}\r\n\r\n.source-select {\r\n position: relative;\r\n min-width: 0;\r\n z-index: 30;\r\n width: 100%;\r\n}\r\n\r\n.source-select.open {\r\n z-index: 80;\r\n}\r\n\r\n.inline-select {\r\n position: relative;\r\n width: 100%;\r\n min-width: 0;\r\n z-index: 45;\r\n}\r\n\r\n.inline-select.open {\r\n z-index: 90;\r\n}\r\n\r\n.inline-trigger {\r\n width: 100%;\r\n min-height: 42px;\r\n border: 1px solid transparent;\r\n border-radius: var(--radius-md);\r\n background: var(--surface);\r\n color: var(--text);\r\n padding: 0 12px;\r\n display: inline-flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n font-weight: 850;\r\n}\r\n\r\n.inline-trigger svg {\r\n color: var(--muted);\r\n transition: transform 160ms ease;\r\n}\r\n\r\n.inline-trigger.open,\r\n.inline-trigger:hover {\r\n border-color: #c7d8d0;\r\n box-shadow: 0 0 0 3px rgba(36, 95, 81, 0.08);\r\n}\r\n\r\n.inline-trigger.open svg {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.inline-menu {\r\n position: absolute;\r\n top: calc(100% + 8px);\r\n left: 0;\r\n right: 0;\r\n z-index: 30;\r\n border: 1px solid var(--border);\r\n border-radius: 18px;\r\n background: var(--surface-raised);\r\n box-shadow: var(--shadow-menu);\r\n backdrop-filter: blur(18px);\r\n padding: 8px;\r\n min-width: 140px;\r\n}\r\n\r\n.inline-menu button {\r\n width: 100%;\r\n min-height: 38px;\r\n border: none;\r\n border-radius: 12px;\r\n background: transparent;\r\n color: #3d4148;\r\n padding: 0 10px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n font-size: 14px;\r\n font-weight: 780;\r\n}\r\n\r\n.inline-menu button:hover,\r\n.inline-menu button.selected {\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n}\r\n\r\n.source-trigger {\r\n width: 100%;\r\n min-width: 160px;\r\n height: 42px;\r\n justify-content: space-between;\r\n border: 1px solid var(--border-soft);\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n padding: 0 12px;\r\n font-size: 15px;\r\n font-weight: 850;\r\n transition:\r\n background 140ms ease,\r\n border-color 140ms ease,\r\n box-shadow 140ms ease;\r\n}\r\n\r\n.source-trigger svg {\r\n color: var(--muted);\r\n transition: transform 160ms ease;\r\n}\r\n\r\n.source-trigger:hover,\r\n.source-trigger.open {\r\n border-color: #d4d0c6;\r\n background: var(--surface);\r\n box-shadow: 0 0 0 3px rgba(23, 25, 31, 0.04);\r\n}\r\n\r\n.source-trigger.open svg {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.source-menu {\r\n position: absolute;\r\n top: calc(100% + 8px);\r\n left: 0;\r\n right: 0;\r\n z-index: 20;\r\n border: 1px solid var(--border);\r\n border-radius: 18px;\r\n background: var(--surface-raised);\r\n box-shadow: var(--shadow-menu);\r\n backdrop-filter: blur(18px);\r\n padding: 8px;\r\n min-width: 160px;\r\n}\r\n\r\n.source-menu button {\r\n width: 100%;\r\n justify-content: space-between;\r\n min-height: 40px;\r\n border: none;\r\n background: transparent;\r\n color: #3d4148;\r\n box-shadow: none;\r\n padding: 0 11px;\r\n font-weight: 760;\r\n font-size: 15px;\r\n}\r\n\r\n.source-menu button:hover,\r\n.source-menu button.selected {\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n}\r\n\r\n.capture-bottom button,\r\n.primary-action {\r\n border: 1px solid var(--border-soft);\r\n background: var(--surface);\r\n color: var(--text);\r\n box-shadow: 0 8px 22px rgba(25, 28, 35, 0.06);\r\n}\r\n\r\n.capture-bottom button:hover,\r\n.primary-action:hover {\r\n background: var(--surface-muted);\r\n border-color: #d4d0c6;\r\n}\r\n\r\n.capture-bottom .clipboard-action {\r\n background: var(--surface-muted);\r\n box-shadow: none;\r\n color: #4d535c;\r\n}\r\n\r\n.capture-bottom button[type=\"submit\"] {\r\n background: var(--text);\r\n border-color: var(--text);\r\n color: var(--surface);\r\n box-shadow: 0 14px 30px rgba(25, 28, 35, 0.18);\r\n}\r\n\r\n.capture-bottom button[type=\"submit\"]:hover {\r\n background: var(--primary-hover);\r\n border-color: var(--primary-hover);\r\n}\r\n\r\n.source-select .source-menu button,\r\n.capture-bottom .source-select .source-menu button {\r\n width: 100%;\r\n justify-content: space-between;\r\n min-height: 40px;\r\n border: none;\r\n border-radius: 12px;\r\n background: transparent;\r\n color: #3d4148;\r\n box-shadow: none;\r\n padding: 0 11px;\r\n font-size: 15px;\r\n font-weight: 760;\r\n}\r\n\r\n.source-select .source-menu button:hover,\r\n.source-select .source-menu button.selected,\r\n.capture-bottom .source-select .source-menu button:hover,\r\n.capture-bottom .source-select .source-menu button.selected {\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n}\r\n\r\n.search-row,\r\n.command-bar {\r\n border-radius: 18px;\r\n padding: 8px;\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) 160px;\r\n gap: 8px;\r\n}\r\n\r\n.command-bar {\r\n border: 1px solid var(--border);\r\n background: var(--surface);\r\n box-shadow: 0 10px 30px rgba(25, 28, 35, 0.05);\r\n}\r\n\r\n.advanced-filters {\r\n border: 1px solid var(--border);\r\n border-radius: 18px;\r\n background: var(--surface);\r\n padding: 8px;\r\n display: grid;\r\n grid-template-columns: 110px repeat(4, minmax(0, 1fr));\r\n gap: 8px;\r\n}\r\n\r\n.advanced-filters > span {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: var(--muted);\r\n font-size: 13px;\r\n font-weight: 850;\r\n padding: 0 10px;\r\n}\r\n\r\n.advanced-filters input,\r\n.advanced-filters select {\r\n min-height: 38px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface);\r\n color: var(--text);\r\n padding: 0 14px;\r\n outline: none;\r\n box-shadow: 0 6px 18px rgba(25, 28, 35, 0.04);\r\n}\r\n\r\n.search-input {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 0 10px;\r\n color: #71757d;\r\n}\r\n\r\n.notice {\r\n border-radius: 14px;\r\n padding: 12px 14px;\r\n font-weight: 850;\r\n}\r\n\r\n.notice.good {\r\n color: #1f6a55;\r\n background: #eff7f2;\r\n}\r\n\r\n.notice.bad {\r\n color: #9d352b;\r\n background: #fff0ed;\r\n}\r\n\r\n.console-side {\r\n position: sticky;\r\n top: 14px;\r\n border-radius: 24px;\r\n padding: 12px;\r\n display: grid;\r\n gap: 10px;\r\n}\r\n\r\n.utility-drawer-backdrop {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 90;\r\n border: 0;\r\n background: rgba(23, 25, 31, 0.16);\r\n cursor: default;\r\n}\r\n\r\n.utility-drawer {\r\n position: fixed;\r\n top: 18px;\r\n right: 18px;\r\n bottom: 18px;\r\n z-index: 100;\r\n width: min(390px, calc(100vw - 36px));\r\n overflow-y: auto;\r\n padding: 14px;\r\n border: 1px solid var(--border);\r\n border-radius: 24px;\r\n background: rgba(255, 255, 252, 0.96);\r\n box-shadow: 0 26px 80px rgba(25, 28, 35, 0.22);\r\n backdrop-filter: blur(24px);\r\n animation: mory-site-utility-drawer-in 160ms ease-out;\r\n}\r\n\r\n.utility-drawer-header {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n gap: 12px;\r\n padding: 6px 4px 14px;\r\n}\r\n\r\n.utility-drawer-header h2 {\r\n margin: 5px 0 0;\r\n font-size: 22px;\r\n letter-spacing: -0.03em;\r\n}\r\n\r\n.utility-drawer-close {\r\n width: 34px;\r\n height: 34px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 12px;\r\n background: var(--surface-muted);\r\n color: var(--muted);\r\n font-size: 22px;\r\n line-height: 1;\r\n}\r\n\r\n.utility-drawer-close:hover {\r\n color: var(--text);\r\n background: var(--surface);\r\n}\r\n\r\n.capture-modal-backdrop {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 110;\r\n border: 0;\r\n background: rgba(23, 25, 31, 0.28);\r\n cursor: default;\r\n}\r\n\r\n.capture-modal {\r\n position: fixed;\r\n z-index: 120;\r\n top: 50%;\r\n left: 50%;\r\n width: min(820px, calc(100vw - 32px));\r\n height: min(760px, calc(100vh - 48px));\r\n max-height: calc(100vh - 48px);\r\n overflow: hidden;\r\n transform: translate(-50%, -50%);\r\n padding: 18px;\r\n border: 1px solid var(--border);\r\n border-radius: 26px;\r\n background: rgba(255, 255, 252, 0.98);\r\n box-shadow: 0 30px 100px rgba(25, 28, 35, 0.26);\r\n animation: mory-site-capture-modal-in 160ms ease-out;\r\n}\r\n\r\n.capture-modal-body {\r\n min-height: 0;\r\n flex: 1;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n padding-right: 8px;\r\n scrollbar-width: thin;\r\n scrollbar-color: #b8b8b2 transparent;\r\n}\r\n\r\n.capture-modal {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.capture-modal-header {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n gap: 12px;\r\n padding: 2px 2px 14px;\r\n}\r\n\r\n.capture-modal-header h2 {\r\n margin: 5px 0 0;\r\n font-size: clamp(22px, 3vw, 30px);\r\n letter-spacing: -0.04em;\r\n}\r\n\r\n.capture-modal .capture-console {\r\n padding: 0;\r\n border: 0;\r\n box-shadow: none;\r\n}\r\n\r\n.capture-modal .source-select.open,\r\n.capture-modal .inline-select.open {\r\n z-index: 150;\r\n}\r\n\r\n@keyframes mory-site-capture-modal-in {\r\n from { opacity: 0; transform: translate(-50%, -48%); }\r\n to { opacity: 1; transform: translate(-50%, -50%); }\r\n}\r\n\r\n.utility-panel-tabs {\r\n display: flex;\r\n gap: 6px;\r\n overflow-x: auto;\r\n padding: 0 4px 12px;\r\n}\r\n\r\n.utility-panel-tabs button {\r\n flex: 0 0 auto;\r\n min-height: 32px;\r\n padding: 0 10px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface-muted);\r\n color: var(--muted);\r\n font-size: 12px;\r\n font-weight: 850;\r\n}\r\n\r\n.utility-panel-tabs button.active,\r\n.utility-panel-tabs button:hover {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--surface);\r\n}\r\n\r\n.utility-drawer .side-card {\r\n box-shadow: none;\r\n}\r\n\r\n@keyframes mory-site-utility-drawer-in {\r\n from { opacity: 0; transform: translateX(12px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n}\r\n\r\n.side-card {\r\n border-radius: 18px;\r\n padding: 14px;\r\n}\r\n\r\n.card-title {\r\n gap: 9px;\r\n margin-bottom: 14px;\r\n}\r\n\r\n.card-title h3,\r\n.section-heading h2,\r\n.memory-card h3,\r\n.empty-feed h3 {\r\n margin: 0;\r\n}\r\n\r\n.health-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 8px;\r\n}\r\n\r\n.metric {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 16px;\r\n padding: 12px;\r\n background: var(--surface-muted);\r\n}\r\n\r\n.metric span,\r\n.metric strong {\r\n display: block;\r\n}\r\n\r\n.metric span {\r\n color: var(--muted);\r\n font-size: 12px;\r\n}\r\n\r\n.metric strong {\r\n margin-top: 8px;\r\n font-size: 24px;\r\n}\r\n\r\n.mini-signal {\r\n justify-content: space-between;\r\n gap: 8px;\r\n margin: 12px 0;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 14px;\r\n padding: 10px;\r\n background: var(--surface-muted);\r\n font-size: 13px;\r\n font-weight: 800;\r\n}\r\n\r\n.tag-stack,\r\n.connector-list {\r\n display: grid;\r\n gap: 8px;\r\n}\r\n\r\n.tag-stack:not(.empty) {\r\n display: flex;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.tag-stack button,\r\n.memory-tags button {\r\n border: 1px solid #e1ded7;\r\n border-radius: 999px;\r\n background: #f6f5f0;\r\n color: #245f51;\r\n padding: 7px 10px;\r\n font-size: 12px;\r\n font-weight: 850;\r\n}\r\n\r\n.tag-stack button span {\r\n margin-left: 6px;\r\n color: #72767e;\r\n}\r\n\r\n.tag-stack.empty {\r\n grid-template-columns: 18px minmax(0, 1fr);\r\n align-items: center;\r\n font-size: 13px;\r\n}\r\n\r\n.sync-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 8px;\r\n}\r\n\r\n.settings-content {\r\n max-width: 1120px;\r\n}\r\n\r\n.sync-card {\r\n max-width: 1080px;\r\n padding: 0 0 4px;\r\n}\r\n\r\n.sync-card .card-title {\r\n align-items: flex-start;\r\n gap: 12px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.sync-card .card-title h3 {\r\n font-size: 19px;\r\n letter-spacing: -0.02em;\r\n}\r\n\r\n.sync-card-subtitle {\r\n display: block;\r\n margin-top: 4px;\r\n color: var(--muted);\r\n font-size: 12px;\r\n font-weight: 700;\r\n}\r\n\r\n.sync-config-section,\r\n.sync-security-section {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 20px;\r\n padding: 18px;\r\n background: linear-gradient(180deg, rgba(255, 255, 252, 0.86), rgba(247, 246, 241, 0.58));\r\n}\r\n\r\n.sync-connection-card {\r\n overflow: hidden;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 20px;\r\n background: linear-gradient(180deg, rgba(255, 255, 252, 0.86), rgba(247, 246, 241, 0.58));\r\n}\r\n\r\n.sync-connection-card .sync-config-section,\r\n.sync-connection-card .sync-security-section {\r\n border: 0;\r\n border-radius: 0;\r\n background: transparent;\r\n}\r\n\r\n.sync-connection-card .sync-security-section {\r\n margin-top: 0;\r\n padding-top: 0;\r\n}\r\n\r\n.sync-config-section {\r\n display: grid;\r\n grid-template-columns: 180px minmax(0, 1fr);\r\n gap: 12px 16px;\r\n align-items: end;\r\n}\r\n\r\n.sync-config-section .sync-section-heading {\r\n grid-column: 1 / -1;\r\n}\r\n\r\n.sync-config-section .language-field {\r\n margin: 0;\r\n}\r\n\r\n.sync-section-heading {\r\n display: flex;\r\n align-items: baseline;\r\n gap: 10px;\r\n margin-bottom: 2px;\r\n min-width: 0;\r\n}\r\n\r\n.sync-section-heading strong {\r\n color: var(--text);\r\n font-size: 14px;\r\n}\r\n\r\n.sync-section-heading span {\r\n color: var(--muted);\r\n font-size: 12px;\r\n min-width: 0;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.sync-security-section {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);\r\n gap: 12px;\r\n margin-top: 12px;\r\n}\r\n\r\n.sync-security-section .sync-section-heading {\r\n grid-column: 1 / -1;\r\n}\r\n\r\n.sync-security-section .token-input {\r\n margin: 0;\r\n}\r\n\r\n.sync-auto-option {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin: 12px 0;\r\n padding: 13px 15px;\r\n border: 1px solid #cfe4d8;\r\n border-radius: 16px;\r\n background: #eff8f3;\r\n color: var(--text);\r\n cursor: pointer;\r\n}\r\n\r\n.sync-auto-option input[type=\"checkbox\"] {\r\n width: 18px;\r\n height: 18px;\r\n accent-color: var(--accent);\r\n}\r\n\r\n.sync-auto-option span {\r\n display: grid;\r\n gap: 2px;\r\n}\r\n\r\n.sync-auto-option small {\r\n color: var(--muted);\r\n font-size: 12px;\r\n font-weight: 650;\r\n}\r\n\r\n.token-input {\r\n margin: 8px 0;\r\n}\r\n\r\n.sync-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding-top: 4px;\r\n}\r\n\r\n.sync-actions .primary-action {\r\n flex: 1;\r\n min-height: 48px;\r\n font-size: 14px;\r\n}\r\n\r\n.sync-actions button:not(.primary-action) {\r\n width: 42px;\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n}\r\n\r\n.sync-guide-button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n min-height: 42px;\r\n margin-top: 10px;\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius-ui);\r\n color: var(--text);\r\n background: var(--surface-muted);\r\n font-size: 14px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n transition: background .2s ease, border-color .2s ease;\r\n}\r\n\r\n.sync-guide-button:hover {\r\n border-color: var(--accent);\r\n background: var(--surface);\r\n}\r\n\r\n.connector-list {\r\n gap: 6px;\r\n}\r\n\r\n.collection-list {\r\n display: grid;\r\n gap: 8px;\r\n}\r\n\r\n.collection-list button {\r\n min-height: 38px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 14px;\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 0 10px;\r\n font-weight: 850;\r\n}\r\n\r\n.collection-list strong {\r\n color: var(--muted);\r\n font-size: 12px;\r\n}\r\n\r\n.empty-note,\r\n.sync-note,\r\n.sync-warning {\r\n margin: 0;\r\n color: var(--muted);\r\n font-size: 12px;\r\n line-height: 1.45;\r\n}\r\n\r\n.sync-note,\r\n.sync-warning {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 12px;\r\n background: var(--surface-muted);\r\n padding: 9px 10px;\r\n margin-bottom: 8px;\r\n font-weight: 760;\r\n}\r\n\r\n.sync-warning {\r\n border-color: #efc9c2;\r\n background: #fff0ed;\r\n color: var(--danger);\r\n}\r\n\r\n.connector-item {\r\n gap: 10px;\r\n min-height: 40px;\r\n border-radius: 12px;\r\n}\r\n\r\n.connector-item span {\r\n flex: 1;\r\n font-weight: 850;\r\n}\r\n\r\n.connector-item strong {\r\n font-size: 12px;\r\n}\r\n\r\n.feed-section {\r\n position: relative;\r\n z-index: 1;\r\n border-radius: 24px;\r\n padding: 16px;\r\n}\r\n\r\n.settings-page {\r\n min-width: 0;\r\n min-height: 620px;\r\n border: 1px solid var(--border);\r\n border-radius: 24px;\r\n padding: clamp(20px, 3vw, 34px);\r\n background: rgba(255, 255, 252, 0.78);\r\n box-shadow: var(--shadow-soft);\r\n backdrop-filter: blur(22px);\r\n}\r\n\r\n.settings-page-header {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n gap: 20px;\r\n padding-bottom: 24px;\r\n}\r\n\r\n.settings-page-header h1 {\r\n margin: 7px 0 0;\r\n font-size: clamp(30px, 4vw, 46px);\r\n letter-spacing: -0.05em;\r\n}\r\n\r\n.settings-page-header p {\r\n margin: 8px 0 0;\r\n color: var(--muted);\r\n}\r\n\r\n.language-setting {\r\n display: grid;\r\n gap: 6px;\r\n min-width: 150px;\r\n padding: 12px 14px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 14px;\r\n background: var(--surface-muted);\r\n}\r\n\r\n.language-setting label {\r\n color: var(--muted);\r\n font-size: 11px;\r\n font-weight: 850;\r\n}\r\n\r\n.language-setting select {\r\n min-height: 32px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 9px;\r\n padding: 0 8px;\r\n background: var(--surface);\r\n color: var(--text);\r\n font: inherit;\r\n font-size: 12px;\r\n font-weight: 750;\r\n}\r\n\r\n.language-setting small {\r\n color: var(--muted);\r\n font-size: 10px;\r\n}\r\n\r\n.settings-tabs {\r\n display: flex;\r\n gap: 8px;\r\n overflow: hidden;\r\n padding: 0 0 18px;\r\n border-bottom: 1px solid var(--border-soft);\r\n}\r\n\r\n.settings-tabs.measure-only {\r\n display: flex;\r\n overflow: hidden;\r\n}\r\n\r\n.settings-select {\r\n max-width: 360px;\r\n}\r\n\r\n.settings-tabs button {\r\n flex: 0 0 auto;\r\n min-height: 38px;\r\n padding: 0 14px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface-muted);\r\n color: var(--muted);\r\n font-size: 13px;\r\n font-weight: 850;\r\n}\r\n\r\n.settings-tabs button.active,\r\n.settings-tabs button[data-state=\"active\"],\r\n.settings-tabs button:hover {\r\n border-color: var(--text);\r\n background: var(--text);\r\n color: var(--surface);\r\n}\r\n\r\n.settings-content {\r\n max-width: 680px;\r\n padding-top: 22px;\r\n}\r\n\r\n.settings-content .side-card {\r\n padding: 0;\r\n border: 0;\r\n background: transparent;\r\n}\r\n\r\n.section-heading {\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 12px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.section-heading .feed-actions {\r\n margin-left: 8px;\r\n}\r\n\r\n.section-heading p {\r\n margin: 4px 0 0;\r\n}\r\n\r\n.feed-summary {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-left: auto;\r\n color: var(--muted);\r\n font-size: 12px;\r\n font-weight: 800;\r\n}\r\n\r\n.feed-summary span {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface-muted);\r\n padding: 7px 10px;\r\n}\r\n\r\n.feed-summary strong {\r\n color: var(--text);\r\n margin-right: 3px;\r\n}\r\n\r\n.ghost-button {\r\n background: var(--surface-muted);\r\n color: #3d4148;\r\n padding: 0 14px;\r\n}\r\n\r\n.feed-actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n justify-content: flex-start;\r\n}\r\n\r\n.feed-controls {\r\n display: grid;\r\n grid-template-columns: minmax(240px, 1.8fr) 145px 64px repeat(4, minmax(100px, 1fr));\r\n gap: 8px;\r\n align-items: center;\r\n border: 1px solid var(--border);\r\n border-radius: 18px;\r\n background: var(--surface);\r\n padding: 8px;\r\n}\r\n\r\n.feed-controls .command-bar,\r\n.feed-controls .advanced-filters {\r\n display: contents;\r\n}\r\n\r\n.feed-controls .search-input,\r\n.feed-controls .advanced-filters > span,\r\n.feed-controls .advanced-filters > input {\r\n min-width: 0;\r\n}\r\n\r\n.feed-controls .search-input {\r\n grid-column: 1;\r\n}\r\n\r\n.feed-controls .command-bar > button.source-trigger {\r\n grid-column: 2;\r\n}\r\n\r\n.feed-controls .advanced-filters > span { grid-column: 3; }\r\n.feed-controls .advanced-filters > button.inline-trigger:nth-of-type(1) { grid-column: 4; }\r\n.feed-controls .advanced-filters > button.inline-trigger:nth-of-type(2) { grid-column: 5; }\r\n.feed-controls .advanced-filters > input { grid-column: 6; }\r\n.feed-controls .advanced-filters > button.inline-trigger:nth-of-type(3) { grid-column: 7; }\r\n\r\n:scope {\r\n --color-background: var(--bg);\r\n --color-foreground: var(--text);\r\n --color-card: var(--surface);\r\n --color-card-foreground: var(--text);\r\n --color-popover: var(--surface-raised);\r\n --color-popover-foreground: var(--text);\r\n --color-primary: var(--text);\r\n --color-primary-foreground: var(--surface);\r\n --color-secondary: var(--surface-muted);\r\n --color-secondary-foreground: var(--text);\r\n --color-accent: var(--surface-muted);\r\n --color-accent-foreground: var(--text);\r\n --color-destructive: var(--danger);\r\n --color-destructive-foreground: var(--surface);\r\n --color-border: var(--border-soft);\r\n --color-ring: #b8d6cb;\r\n --color-muted-foreground: var(--muted);\r\n}\r\n\r\n.memory-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\r\n gap: 10px;\r\n}\r\n\r\n.memory-card {\r\n border-radius: 18px;\r\n padding: 14px;\r\n min-height: 218px;\r\n display: grid;\r\n align-content: start;\r\n gap: 10px;\r\n}\r\n\r\n.memory-card.selected {\r\n border-color: #b8d6cb;\r\n box-shadow: 0 0 0 3px rgba(36, 95, 81, 0.08);\r\n}\r\n\r\n.memory-card-top {\r\n justify-content: space-between;\r\n}\r\n\r\n.memory-card-top span,\r\n.memory-card-top strong {\r\n border-radius: 999px;\r\n background: #f3f2ed;\r\n color: #555961;\r\n padding: 6px 9px;\r\n font-size: 12px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n}\r\n\r\n.memory-card p {\r\n margin: 0;\r\n line-height: 1.58;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 5;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n.scene-preview {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 16px;\r\n background: var(--surface-muted);\r\n padding: 10px;\r\n}\r\n\r\n.bill-preview {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) auto;\r\n gap: 4px 10px;\r\n align-items: center;\r\n}\r\n\r\n.bill-preview strong {\r\n font-size: 24px;\r\n letter-spacing: -0.03em;\r\n}\r\n\r\n.bill-preview span {\r\n color: var(--text);\r\n font-weight: 850;\r\n}\r\n\r\n.bill-preview em {\r\n grid-column: 1 / -1;\r\n color: var(--muted);\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 820;\r\n}\r\n\r\n.finance-preview strong {\r\n color: #245f51;\r\n}\r\n\r\n.chat-preview,\r\n.bookmark-preview {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: var(--accent);\r\n font-size: 13px;\r\n font-weight: 880;\r\n}\r\n\r\n.status-preview {\r\n display: grid;\r\n grid-template-columns: 18px minmax(0, 1fr) auto;\r\n align-items: center;\r\n gap: 8px;\r\n color: var(--accent);\r\n font-size: 13px;\r\n font-weight: 880;\r\n}\r\n\r\n.status-preview em {\r\n color: var(--muted);\r\n font-style: normal;\r\n font-size: 12px;\r\n}\r\n\r\n.waiting-preview {\r\n color: #7b5d21;\r\n}\r\n\r\n.memory-url {\r\n color: var(--accent);\r\n font-size: 13px;\r\n font-weight: 780;\r\n overflow-wrap: anywhere;\r\n text-decoration: none;\r\n}\r\n\r\n.memory-tags {\r\n flex-wrap: wrap;\r\n gap: 7px;\r\n}\r\n\r\n.card-actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 7px;\r\n}\r\n\r\n.card-actions label,\r\n.card-actions button,\r\n.bookmark-import,\r\n.context-pack button {\r\n min-height: 34px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 0 10px;\r\n font-size: 12px;\r\n font-weight: 850;\r\n}\r\n\r\n.card-actions input {\r\n margin: 0;\r\n}\r\n\r\n.edit-stack {\r\n display: grid;\r\n gap: 8px;\r\n}\r\n\r\n.edit-stack input,\r\n.edit-stack textarea {\r\n width: 100%;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 12px;\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n padding: 10px;\r\n outline: none;\r\n}\r\n\r\n.edit-stack textarea {\r\n min-height: 120px;\r\n resize: vertical;\r\n line-height: 1.5;\r\n}\r\n\r\n.context-pack {\r\n border: 1px solid #b8d6cb;\r\n border-radius: 20px;\r\n background: #eff7f2;\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) auto;\r\n align-items: center;\r\n gap: 14px;\r\n padding: 12px 14px;\r\n}\r\n\r\n.context-pack-main {\r\n display: flex;\r\n min-width: 0;\r\n align-items: center;\r\n gap: 12px;\r\n}\r\n\r\n.context-pack span {\r\n color: var(--muted);\r\n font-size: 13px;\r\n line-height: 1.4;\r\n}\r\n\r\n.context-icon {\r\n width: 36px;\r\n height: 36px;\r\n border: 1px solid #c9ded5;\r\n border-radius: 12px;\r\n background: rgba(255, 255, 252, 0.72);\r\n color: var(--accent);\r\n display: grid;\r\n place-items: center;\r\n flex: 0 0 auto;\r\n}\r\n\r\n.context-actions {\r\n display: flex;\r\n gap: 8px;\r\n justify-content: flex-end;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.context-actions select {\r\n min-height: 34px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface);\r\n color: var(--text);\r\n padding: 0 10px;\r\n font-size: 12px;\r\n font-weight: 850;\r\n box-shadow: 0 6px 18px rgba(25, 28, 35, 0.04);\r\n}\r\n\r\n.feed-tools {\r\n margin-top: 14px;\r\n display: flex;\r\n justify-content: flex-end;\r\n}\r\n\r\n.bookmark-import {\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.bookmark-import input {\r\n position: absolute;\r\n inset: 0;\r\n opacity: 0;\r\n cursor: pointer;\r\n}\r\n\r\n.memory-card footer {\r\n justify-content: space-between;\r\n margin-top: auto;\r\n color: #777b83;\r\n font-size: 12px;\r\n}\r\n\r\n.memory-card footer button {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n min-height: 30px;\r\n padding: 0 10px;\r\n font-size: 12px;\r\n font-weight: 850;\r\n}\r\n\r\n.drawer-backdrop {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 100;\r\n background: rgba(23, 25, 31, 0.18);\r\n display: flex;\r\n justify-content: flex-end;\r\n}\r\n\r\n.memory-drawer {\r\n width: min(560px, 100%);\r\n height: 100vh;\r\n overflow: auto;\r\n border-left: 1px solid var(--border);\r\n background: var(--surface);\r\n box-shadow: -24px 0 70px rgba(25, 28, 35, 0.16);\r\n padding: 22px;\r\n display: grid;\r\n align-content: start;\r\n gap: 18px;\r\n}\r\n\r\n.memory-drawer header {\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 12px;\r\n align-items: flex-start;\r\n}\r\n\r\n.memory-drawer h2 {\r\n margin: 8px 0 0;\r\n font-size: 30px;\r\n line-height: 1.05;\r\n}\r\n\r\n.memory-drawer header button,\r\n.drawer-actions button {\r\n min-height: 38px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 7px;\r\n padding: 0 12px;\r\n font-size: 13px;\r\n font-weight: 850;\r\n}\r\n\r\n.drawer-grid {\r\n display: grid;\r\n gap: 12px;\r\n}\r\n\r\n.drawer-grid label {\r\n display: grid;\r\n gap: 7px;\r\n color: var(--muted);\r\n font-size: 12px;\r\n font-weight: 850;\r\n}\r\n\r\n.drawer-grid input,\r\n.drawer-grid textarea {\r\n width: 100%;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 14px;\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n padding: 11px;\r\n outline: none;\r\n}\r\n\r\n.drawer-grid textarea {\r\n min-height: 220px;\r\n resize: vertical;\r\n line-height: 1.55;\r\n}\r\n\r\n.drawer-meta,\r\n.drawer-actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n}\r\n\r\n.drawer-meta span {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface-muted);\r\n color: var(--muted);\r\n padding: 6px 10px;\r\n font-size: 12px;\r\n font-weight: 820;\r\n}\r\n\r\n.drawer-summary {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 16px;\r\n background: var(--surface-muted);\r\n padding: 14px;\r\n}\r\n\r\n.drawer-fields {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 16px;\r\n background: var(--surface-muted);\r\n padding: 14px;\r\n}\r\n\r\n.drawer-fields > div {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 8px;\r\n margin-top: 10px;\r\n}\r\n\r\n.drawer-fields span {\r\n min-height: 48px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 14px;\r\n background: var(--surface);\r\n padding: 8px 10px;\r\n display: grid;\r\n gap: 3px;\r\n color: var(--text);\r\n font-weight: 850;\r\n}\r\n\r\n.drawer-fields em {\r\n color: var(--muted);\r\n font-size: 11px;\r\n font-style: normal;\r\n text-transform: uppercase;\r\n}\r\n\r\n.drawer-summary p {\r\n margin: 8px 0 0;\r\n color: var(--muted);\r\n line-height: 1.55;\r\n}\r\n\r\n.empty-feed {\r\n min-height: 260px;\r\n border-style: dashed;\r\n border-radius: 20px;\r\n display: grid;\r\n place-items: center;\r\n align-content: center;\r\n gap: 8px;\r\n text-align: center;\r\n}\r\n\r\n@container mory (max-width: 1120px) {\r\n .workspace-layout,\r\n .memory-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .workspace-nav {\r\n position: static;\r\n order: -1;\r\n }\r\n\r\n .nav-brand-card {\r\n display: flex;\r\n }\r\n\r\n .record-nav-list {\r\n display: flex;\r\n overflow: hidden;\r\n padding-bottom: 4px;\r\n }\r\n\r\n .record-nav-list.measure-only {\r\n display: flex;\r\n overflow: hidden;\r\n }\r\n\r\n .record-nav-list button {\r\n flex: 0 0 auto;\r\n min-width: 128px;\r\n }\r\n\r\n .shortcut-list {\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n }\r\n\r\n .console-side {\r\n position: static;\r\n order: 2;\r\n }\r\n}\r\n\r\n@container mory (max-width: 680px) {\r\n .product-shell {\r\n padding: 8px;\r\n }\r\n\r\n .product-header,\r\n .section-heading,\r\n .settings-page-header {\r\n display: grid;\r\n }\r\n\r\n .language-setting {\r\n width: 100%;\r\n }\r\n\r\n .header-actions {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .console-main,\r\n .console-side,\r\n .feed-section,\r\n .workspace-nav {\r\n border-radius: 18px;\r\n }\r\n\r\n .workbench-intro {\r\n grid-template-columns: 1fr;\r\n align-items: start;\r\n }\r\n\r\n .workbench-intro h1 {\r\n font-size: 34px;\r\n line-height: 1;\r\n }\r\n\r\n .today-strip {\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n }\r\n\r\n .capture-bottom,\r\n .search-row,\r\n .command-bar,\r\n .sync-grid,\r\n .context-pack,\r\n .advanced-filters,\r\n .record-mode-tabs,\r\n .scene-fields.bill-fields,\r\n .scene-fields.finance-fields,\r\n .scene-fields.task-fields,\r\n .drawer-fields > div {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .context-actions,\r\n .feed-actions,\r\n .feed-summary {\r\n justify-content: flex-start;\r\n }\r\n\r\n .capture-console {\r\n padding: 12px;\r\n }\r\n\r\n .record-mode-current {\r\n align-items: flex-start;\r\n }\r\n\r\n .record-mode-tabs {\r\n padding-bottom: 6px;\r\n }\r\n\r\n .feed-section {\r\n padding: 12px;\r\n }\r\n\r\n .settings-page {\r\n min-height: 0;\r\n padding: 16px;\r\n }\r\n\r\n .settings-content,\r\n .sync-card {\r\n max-width: none;\r\n }\r\n\r\n .sync-config-section,\r\n .sync-security-section {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .sync-config-section .sync-section-heading,\r\n .sync-security-section .sync-section-heading {\r\n grid-column: auto;\r\n }\r\n\r\n .sync-section-heading {\r\n display: grid;\r\n gap: 3px;\r\n }\r\n\r\n .memory-card {\r\n min-height: 0;\r\n }\r\n}\r\n\r\n/* Dense repository list layout */\r\n.memory-list-header {\r\n display: grid;\r\n grid-template-columns: 108px 150px minmax(260px, 1fr) 120px 110px 96px;\r\n gap: 12px;\r\n align-items: center;\r\n min-height: 42px;\r\n padding: 0 14px;\r\n border: 1px solid var(--border);\r\n border-bottom: 0;\r\n border-radius: 18px 18px 0 0;\r\n background: var(--surface-muted);\r\n color: var(--muted);\r\n font-size: 12px;\r\n font-weight: 900;\r\n letter-spacing: 0.04em;\r\n text-transform: uppercase;\r\n}\r\n\r\n.memory-grid {\r\n display: block;\r\n overflow: hidden;\r\n border: 1px solid var(--border);\r\n border-radius: 0 0 18px 18px;\r\n background: var(--surface);\r\n}\r\n\r\n.memory-card {\r\n display: grid;\r\n grid-template-columns: 108px 150px minmax(260px, 1fr) 120px 110px 96px;\r\n gap: 12px;\r\n align-items: center;\r\n min-height: 76px;\r\n padding: 11px 14px;\r\n border: 0;\r\n border-bottom: 1px solid var(--border-soft);\r\n border-radius: 0;\r\n background: var(--surface);\r\n box-shadow: none;\r\n cursor: pointer;\r\n}\r\n\r\n.memory-list-header.selection-mode,\r\n.memory-card.selection-mode {\r\n grid-template-columns: 36px 108px 150px minmax(260px, 1fr) 120px 110px;\r\n}\r\n\r\n.selection-toggle {\r\n min-height: 30px;\r\n padding: 0 8px;\r\n font-size: 11px;\r\n font-weight: 700;\r\n}\r\n\r\n.memory-selection-cell {\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n.memory-card:last-child {\r\n border-bottom: 0;\r\n}\r\n\r\n.memory-card:hover {\r\n background: #fbfaf7;\r\n}\r\n\r\n.memory-card.selected {\r\n background: #eff7f2;\r\n box-shadow: inset 3px 0 0 var(--accent);\r\n}\r\n\r\n.memory-card:focus-visible {\r\n outline: none;\r\n box-shadow: inset 0 0 0 2px var(--accent);\r\n}\r\n\r\n.memory-time,\r\n.memory-entity span,\r\n.memory-category span {\r\n color: var(--muted);\r\n font-size: 12px;\r\n}\r\n\r\n.memory-entity {\r\n display: grid;\r\n gap: 3px;\r\n min-width: 0;\r\n}\r\n\r\n.memory-entity strong {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-size: 13px;\r\n}\r\n\r\n.memory-content-cell {\r\n min-width: 0;\r\n}\r\n\r\n.memory-title-button {\r\n max-width: 100%;\r\n overflow: hidden;\r\n border: 0;\r\n background: transparent;\r\n color: var(--text);\r\n padding: 0;\r\n font-weight: 850;\r\n text-align: left;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.memory-title-button:hover {\r\n color: var(--accent);\r\n}\r\n\r\n.memory-content-cell p {\r\n display: block;\r\n overflow: hidden;\r\n margin: 4px 0 0;\r\n color: var(--muted);\r\n font-size: 12px;\r\n line-height: 1.35;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.memory-category {\r\n display: grid;\r\n justify-items: start;\r\n gap: 4px;\r\n min-width: 0;\r\n}\r\n\r\n.memory-category [data-slot=\"button\"],\r\n.memory-life [data-slot=\"badge\"] {\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface-muted);\r\n color: var(--accent);\r\n padding: 5px 8px;\r\n font-size: 11px;\r\n font-weight: 850;\r\n}\r\n\r\n.memory-category span {\r\n overflow: hidden;\r\n max-width: 100%;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.memory-life {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.memory-life strong {\r\n color: var(--muted);\r\n font-size: 12px;\r\n}\r\n\r\n.memory-card .card-actions {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr);\r\n justify-content: stretch;\r\n align-items: center;\r\n gap: 5px;\r\n min-width: 0;\r\n overflow: hidden;\r\n}\r\n\r\n.memory-card .card-actions > * {\r\n min-width: 0;\r\n width: 100%;\r\n justify-content: center;\r\n white-space: nowrap;\r\n}\r\n\r\n.memory-card .card-actions label {\r\n justify-self: end;\r\n width: auto;\r\n min-width: 76px;\r\n}\r\n\r\n@container mory (max-width: 1450px) and (min-width: 1121px) {\r\n .workspace-layout {\r\n grid-template-columns: 188px minmax(0, 1fr);\r\n }\r\n\r\n .memory-list-header,\r\n .memory-card {\r\n grid-template-columns: 74px 88px minmax(130px, 1fr) 76px 76px 82px;\r\n gap: 8px;\r\n }\r\n\r\n .memory-list-header.selection-mode,\r\n .memory-card.selection-mode {\r\n grid-template-columns: 30px 74px 88px minmax(130px, 1fr) 76px 76px;\r\n }\r\n\r\n .memory-list-header {\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n font-size: 10px;\r\n }\r\n\r\n .memory-card {\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n }\r\n\r\n .memory-card .card-actions {\r\n gap: 4px;\r\n }\r\n\r\n .memory-card .card-actions label,\r\n .memory-card .card-actions button {\r\n padding-left: 7px;\r\n padding-right: 7px;\r\n font-size: 11px;\r\n }\r\n}\r\n\r\n@container mory (max-width: 1120px) {\r\n .memory-list-header {\r\n grid-template-columns: 92px 130px minmax(220px, 1fr) 100px 94px 82px;\r\n }\r\n\r\n .memory-card {\r\n grid-template-columns: 92px 130px minmax(220px, 1fr) 100px 94px 82px;\r\n }\r\n\r\n .memory-list-header.selection-mode,\r\n .memory-card.selection-mode {\r\n grid-template-columns: 32px 92px 130px minmax(220px, 1fr) 100px 94px;\r\n }\r\n}\r\n\r\n@container mory (max-width: 780px) {\r\n .memory-list-header {\r\n display: none;\r\n }\r\n\r\n .memory-grid {\r\n border-radius: 18px;\r\n }\r\n\r\n .memory-card {\r\n grid-template-columns: minmax(0, 1fr) auto;\r\n gap: 8px 12px;\r\n padding: 14px;\r\n }\r\n\r\n .memory-card.selection-mode {\r\n grid-template-columns: 28px minmax(0, 1fr) auto;\r\n }\r\n\r\n .memory-selection-cell {\r\n grid-column: 1;\r\n grid-row: 1;\r\n }\r\n\r\n .memory-time {\r\n grid-column: 1 / 2;\r\n grid-row: 1;\r\n }\r\n\r\n .memory-card.selection-mode .memory-time {\r\n grid-column: 2;\r\n }\r\n\r\n .memory-entity {\r\n grid-column: 2;\r\n grid-row: 1;\r\n justify-items: end;\r\n }\r\n\r\n .memory-card.selection-mode .memory-entity {\r\n grid-column: 3;\r\n }\r\n\r\n .memory-content-cell,\r\n .memory-category,\r\n .memory-life,\r\n .memory-card .card-actions {\r\n grid-column: 1 / -1;\r\n }\r\n\r\n .memory-card .card-actions {\r\n justify-content: flex-start;\r\n }\r\n}\r\n\r\n@container mory (max-width: 780px) {\r\n .feed-actions {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n\r\n .feed-actions .bookmark-import,\r\n .feed-actions [data-slot=\"button\"] {\r\n width: 100%;\r\n }\r\n}\r\n\r\n/* Context rules only control layout; shadcn primitives own visual states. */\r\n.feed-actions [data-slot=\"button\"],\r\n.feed-actions .bookmark-import {\r\n min-height: 36px;\r\n border-radius: 999px;\r\n box-shadow: none;\r\n}\r\n\r\n.memory-title-button {\r\n min-height: 0;\r\n line-height: 1.35;\r\n box-shadow: none;\r\n}\r\n\r\n.memory-category [data-slot=\"button\"] {\r\n min-height: 26px;\r\n padding: 0 8px;\r\n border-radius: 999px;\r\n box-shadow: none;\r\n font-size: 11px;\r\n}\r\n\r\n.card-actions [data-slot=\"button\"] {\r\n min-height: 30px;\r\n border-radius: 999px;\r\n box-shadow: none;\r\n font-size: 12px;\r\n}\r\n\r\n.context-actions [data-slot=\"button\"] {\r\n min-height: 34px;\r\n border-radius: 999px;\r\n box-shadow: none;\r\n}\r\n\r\n.ui-dropdown-item .bookmark-import {\r\n min-height: 38px;\r\n width: 100%;\r\n justify-content: flex-start;\r\n border: 0;\r\n border-radius: 10px;\r\n background: transparent;\r\n box-shadow: none;\r\n}\r\n\r\n.memory-card .memory-title-button:hover {\r\n transform: none;\r\n}\r\n\r\n@container mory (max-width: 900px) {\r\n .feed-controls {\r\n grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr);\r\n }\r\n\r\n .feed-controls .search-input { grid-column: 1 / -1; }\r\n .feed-controls .command-bar > button.source-trigger { grid-column: 1 / -1; }\r\n .feed-controls .advanced-filters > span { grid-column: 1 / -1; }\r\n .feed-controls .advanced-filters > button.inline-trigger:nth-of-type(1),\r\n .feed-controls .advanced-filters > button.inline-trigger:nth-of-type(2),\r\n .feed-controls .advanced-filters > input,\r\n .feed-controls .advanced-filters > button.inline-trigger:nth-of-type(3) { grid-column: auto; }\r\n}\r\n\r\n/* Standard shadcn Button contract. Context CSS may size buttons, never restyle them. */\r\n[data-slot=\"button\"] {\r\n min-height: 40px;\r\n border: 1px solid transparent;\r\n border-radius: 6px;\r\n font-weight: 500;\r\n transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;\r\n}\r\n\r\n[data-slot=\"button\"][data-variant=\"default\"] { background: var(--text); color: var(--surface); border-color: var(--text); }\r\n[data-slot=\"button\"][data-variant=\"secondary\"] { background: var(--surface-muted); color: var(--text); border-color: var(--border-soft); }\r\n[data-slot=\"button\"][data-variant=\"outline\"] { background: var(--surface); color: var(--text); border-color: var(--border-soft); }\r\n[data-slot=\"button\"][data-variant=\"ghost\"] { background: transparent; color: var(--text); border-color: transparent; }\r\n[data-slot=\"button\"][data-variant=\"destructive\"] { background: var(--danger); color: var(--surface); border-color: var(--danger); }\r\n\r\n[data-slot=\"button\"]:not(:disabled):hover { transform: translateY(-1px); }\r\n[data-slot=\"button\"][data-variant=\"default\"]:not(:disabled):hover { background: var(--primary-hover); border-color: var(--primary-hover); }\r\n[data-slot=\"button\"][data-variant=\"secondary\"]:not(:disabled):hover,\r\n[data-slot=\"button\"][data-variant=\"outline\"]:not(:disabled):hover,\r\n[data-slot=\"button\"][data-variant=\"ghost\"]:not(:disabled):hover { background: var(--surface-muted); border-color: var(--border-soft); }\r\n[data-slot=\"button\"][data-variant=\"destructive\"]:not(:disabled):hover { background: #7f2b24; border-color: #7f2b24; }\r\n[data-slot=\"button\"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(36, 95, 81, 0.15); }\r\n[data-slot=\"button\"]:disabled { cursor: not-allowed; opacity: .5; }\r\n\r\n/* Small contextual variants keep the same shadcn primitive contract. */\r\n.memory-category [data-slot=\"button\"] {\r\n background: var(--surface-muted);\r\n border-color: var(--border-soft);\r\n color: var(--accent);\r\n}\r\n\r\n.memory-category [data-slot=\"button\"]:not(:disabled):hover {\r\n background: var(--surface);\r\n border-color: var(--border);\r\n color: var(--text);\r\n}\r\n\r\n[data-slot=\"badge\"] {\r\n border-color: var(--border-soft);\r\n background: var(--surface-muted);\r\n color: var(--accent);\r\n font-size: 11px;\r\n font-weight: 700;\r\n}\r\n\r\n[data-slot=\"input\"]:focus-visible,\r\n[data-slot=\"textarea\"]:focus-visible {\r\n outline: none;\r\n border-color: #b8d6cb;\r\n box-shadow: 0 0 0 3px rgba(36, 95, 81, 0.13);\r\n}\r\n\r\n.nav-brand-card[data-slot=\"button\"],\r\n.nav-brand-card[data-slot=\"button\"]:hover,\r\n.nav-brand-card[data-slot=\"button\"]:focus-visible {\r\n border-color: transparent;\r\n background: transparent;\r\n box-shadow: none;\r\n}\r\n\r\n.nav-brand-card[data-slot=\"button\"]:hover {\r\n background: rgba(247, 246, 241, 0.72);\r\n}\r\n\r\n/* Mory product surface refinement */\r\n:scope {\r\n --bg: #f1f3f2;\r\n --surface: #ffffff;\r\n --surface-muted: #f5f7f6;\r\n --surface-raised: rgba(255, 255, 255, 0.98);\r\n --border: #dce4e0;\r\n --border-soft: #e8eeeb;\r\n --text: #17221f;\r\n --muted: #6c7a75;\r\n --accent: #1f6b58;\r\n --primary-hover: #264b40;\r\n --shadow-soft: 0 14px 40px rgba(25, 53, 44, 0.07);\r\n}\r\n\r\n:scope {\r\n background: var(--bg);\r\n}\r\n\r\n.product-shell {\r\n min-height: 100vh;\r\n padding: 20px clamp(12px, 2.5vw, 36px) 40px;\r\n background:\r\n radial-gradient(circle at 8% -8%, rgba(219, 241, 232, 0.85), transparent 28%),\r\n linear-gradient(180deg, #f7faf8 0%, var(--bg) 48%, #edf1ef 100%);\r\n}\r\n\r\n.product-header {\r\n width: min(1560px, 100%);\r\n min-height: 58px;\r\n margin-bottom: 16px;\r\n padding: 0 4px;\r\n}\r\n\r\n.product-header .brand-lockup {\r\n opacity: 1;\r\n pointer-events: auto;\r\n}\r\n\r\n.brand-lockup strong,\r\n.nav-brand-card strong {\r\n letter-spacing: -0.02em;\r\n}\r\n\r\n.brand-lockup span {\r\n margin-top: 2px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: var(--muted);\r\n}\r\n\r\n.header-actions {\r\n gap: 10px;\r\n}\r\n\r\n.status-chip {\r\n height: 32px;\r\n border-color: var(--border-soft);\r\n background: var(--surface-muted);\r\n color: var(--muted);\r\n font-size: 12px;\r\n}\r\n\r\n.status-chip.good {\r\n border-color: #cfe5da;\r\n background: #eef8f3;\r\n color: var(--accent);\r\n}\r\n\r\n.status-chip.syncing {\r\n color: var(--accent);\r\n}\r\n\r\n.status-chip.synced {\r\n color: var(--accent);\r\n}\r\n\r\n.status-chip.error {\r\n color: #b94a48;\r\n border-color: color-mix(in srgb, #b94a48 30%, var(--border-soft));\r\n}\r\n\r\n.status-chip-spin {\r\n animation: mory-site-status-chip-spin 1s linear infinite;\r\n}\r\n\r\n@keyframes mory-site-status-chip-spin {\r\n to { transform: rotate(360deg); }\r\n}\r\n\r\n.workspace-layout {\r\n width: min(1560px, 100%);\r\n grid-template-columns: 232px minmax(0, 1fr);\r\n gap: 18px;\r\n}\r\n\r\n.workspace-nav,\r\n.feed-section,\r\n.settings-page {\r\n border-color: var(--border);\r\n border-radius: 20px;\r\n background: rgba(255, 255, 255, 0.82);\r\n box-shadow: var(--shadow-soft);\r\n}\r\n\r\n.workspace-nav {\r\n top: 20px;\r\n padding: 14px;\r\n}\r\n\r\n.nav-brand-card {\r\n min-height: 72px;\r\n margin-bottom: 20px;\r\n padding: 8px 6px;\r\n}\r\n\r\n.nav-section-label {\r\n margin-top: 18px;\r\n color: #87948f;\r\n font-size: 10px;\r\n letter-spacing: 0.11em;\r\n}\r\n\r\n.record-nav-list,\r\n.shortcut-list {\r\n gap: 3px;\r\n}\r\n\r\n.record-nav-list button,\r\n.shortcut-list button,\r\n.utility-nav-button {\r\n min-height: 40px;\r\n border-radius: 11px;\r\n font-size: 13px;\r\n}\r\n\r\n.record-nav-list button:hover,\r\n.shortcut-list button:hover,\r\n.utility-nav-button:hover,\r\n.utility-nav-button.active {\r\n border-color: #d8e7e0;\r\n background: #eef7f2;\r\n color: var(--accent);\r\n}\r\n\r\n.record-nav-list button.active {\r\n border-color: #d3e8de;\r\n background: #eaf6f0;\r\n color: var(--accent);\r\n}\r\n\r\n.sidebar-more {\r\n margin-top: 8px;\r\n padding-top: 8px;\r\n border-top: 1px solid var(--border-soft);\r\n}\r\n\r\n.sidebar-more .source-trigger {\r\n min-width: 0;\r\n min-height: 38px;\r\n border-color: transparent;\r\n background: transparent;\r\n color: var(--muted);\r\n font-size: 12px;\r\n box-shadow: none;\r\n}\r\n\r\n.sidebar-more .source-trigger:hover {\r\n border-color: var(--border-soft);\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n box-shadow: none;\r\n}\r\n\r\n.sidebar-footer {\r\n margin-top: 18px;\r\n padding-top: 10px;\r\n border-top: 1px solid var(--border-soft);\r\n}\r\n\r\n.sidebar-footer .utility-nav-button {\r\n color: var(--muted);\r\n}\r\n\r\n.feed-section {\r\n padding: clamp(14px, 2vw, 24px);\r\n}\r\n\r\n.feed-controls {\r\n grid-template-columns: minmax(220px, 1fr) 150px;\r\n gap: 10px;\r\n padding: 10px;\r\n border-color: var(--border-soft);\r\n border-radius: 16px;\r\n background: #f8faf9;\r\n}\r\n\r\n.feed-controls .command-bar,\r\n.feed-controls .advanced-filters {\r\n display: contents;\r\n}\r\n\r\n.feed-controls .search-input {\r\n grid-column: 1;\r\n}\r\n\r\n.feed-controls .command-bar > button.source-trigger {\r\n grid-column: 2;\r\n}\r\n\r\n.feed-controls .advanced-filters {\r\n display: grid;\r\n grid-column: 1 / -1;\r\n grid-template-columns: auto repeat(4, minmax(110px, 1fr));\r\n gap: 8px;\r\n align-items: center;\r\n}\r\n\r\n.feed-controls .advanced-filters > * {\r\n display: inline-flex;\r\n min-width: 0;\r\n}\r\n\r\n.feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n}\r\n\r\n.feed-controls .advanced-filters > span {\r\n align-items: center;\r\n gap: 6px;\r\n padding: 0 4px;\r\n color: var(--muted);\r\n font-size: 12px;\r\n font-weight: 800;\r\n}\r\n\r\n.search-input,\r\n.source-trigger {\r\n min-height: 44px;\r\n border-radius: 12px;\r\n}\r\n\r\n.search-input {\r\n border: 1px solid var(--border-soft);\r\n background: var(--surface);\r\n box-shadow: none;\r\n}\r\n\r\n.search-input:focus-within {\r\n border-color: #9bc8b5;\r\n box-shadow: 0 0 0 3px rgba(31, 107, 88, 0.1);\r\n}\r\n\r\n.search-input [data-slot=\"input\"] {\r\n min-height: 42px;\r\n height: 42px;\r\n border: 0;\r\n border-radius: 0;\r\n background: transparent;\r\n padding: 0;\r\n box-shadow: none;\r\n font-size: 15px;\r\n}\r\n\r\n.search-input [data-slot=\"input\"]:focus,\r\n.search-input [data-slot=\"input\"]:focus-visible {\r\n border: 0;\r\n outline: none;\r\n box-shadow: none;\r\n}\r\n\r\n.section-heading {\r\n align-items: end;\r\n gap: 16px;\r\n margin: 24px 2px 14px;\r\n}\r\n\r\n.section-heading h2 {\r\n margin: 0;\r\n font-size: clamp(22px, 2.2vw, 30px);\r\n letter-spacing: -0.04em;\r\n}\r\n\r\n.section-heading p {\r\n color: var(--muted);\r\n font-size: 13px;\r\n}\r\n\r\n.feed-summary {\r\n gap: 6px;\r\n}\r\n\r\n.feed-summary span {\r\n padding: 6px 9px;\r\n border-color: var(--border-soft);\r\n background: #f6f8f7;\r\n font-size: 11px;\r\n}\r\n\r\n.feed-actions {\r\n gap: 7px;\r\n}\r\n\r\n.feed-actions [data-slot=\"button\"],\r\n.feed-actions .bookmark-import {\r\n min-height: 38px;\r\n padding-inline: 12px;\r\n border-radius: 10px;\r\n}\r\n\r\n.capture-cta[data-slot=\"button\"] {\r\n background: var(--accent);\r\n border-color: var(--accent);\r\n color: #fff;\r\n box-shadow: 0 8px 18px rgba(31, 107, 88, 0.18);\r\n}\r\n\r\n.capture-cta[data-slot=\"button\"]:hover {\r\n background: #185643;\r\n border-color: #185643;\r\n}\r\n\r\n.memory-grid {\r\n border-color: var(--border-soft);\r\n border-radius: 14px;\r\n}\r\n\r\n.memory-list-header {\r\n min-height: 38px;\r\n border-color: var(--border-soft);\r\n background: #f5f8f6;\r\n font-size: 10px;\r\n letter-spacing: 0.08em;\r\n}\r\n\r\n.memory-card {\r\n min-height: 72px;\r\n border-bottom-color: var(--border-soft);\r\n transition: background 140ms ease, box-shadow 140ms ease;\r\n}\r\n\r\n.memory-card:hover {\r\n background: #f8fbf9;\r\n}\r\n\r\n.memory-card.selected {\r\n background: #edf8f2;\r\n box-shadow: inset 3px 0 0 var(--accent);\r\n}\r\n\r\n.memory-title-button {\r\n font-size: 13px;\r\n}\r\n\r\n.memory-content-cell p {\r\n color: #7a8983;\r\n}\r\n\r\n.settings-page {\r\n padding: clamp(18px, 3vw, 36px);\r\n}\r\n\r\n@container mory (max-width: 900px) {\r\n .feed-controls {\r\n grid-template-columns: 1fr 150px;\r\n }\r\n\r\n .feed-controls .advanced-filters > * {\r\n display: inline-flex;\r\n }\r\n}\r\n\r\n@container mory (max-width: 680px) {\r\n .product-shell {\r\n padding: 10px 8px 24px;\r\n }\r\n\r\n .product-header {\r\n min-height: 50px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .header-actions {\r\n margin-top: 8px;\r\n }\r\n\r\n .workspace-layout {\r\n gap: 10px;\r\n }\r\n\r\n .workspace-nav {\r\n padding: 10px;\r\n }\r\n\r\n .nav-brand-card {\r\n min-height: 58px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .compact-record-nav {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n\r\n .compact-record-nav button {\r\n min-width: 0;\r\n }\r\n\r\n .feed-controls {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > button.source-trigger {\r\n grid-column: 1;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .feed-controls .advanced-filters > * {\r\n width: 100%;\r\n }\r\n\r\n .section-heading {\r\n align-items: start;\r\n margin-top: 20px;\r\n }\r\n\r\n .section-heading .feed-summary {\r\n order: 3;\r\n width: 100%;\r\n }\r\n\r\n .feed-actions {\r\n width: 100%;\r\n }\r\n\r\n .feed-actions [data-slot=\"button\"],\r\n .feed-actions .bookmark-import {\r\n flex: 1;\r\n justify-content: center;\r\n }\r\n}\r\n\r\n/* The navigation is a visible index, not a second search box. */\r\n.record-nav-list {\r\n display: grid;\r\n overflow: visible;\r\n}\r\n\r\n.record-nav-list.measure-only {\r\n position: static;\r\n visibility: visible;\r\n pointer-events: auto;\r\n}\r\n\r\n@container mory (max-width: 1120px) {\r\n .record-nav-list {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 4px;\r\n }\r\n\r\n .record-nav-list button {\r\n min-width: 0;\r\n }\r\n\r\n .record-nav-list button strong {\r\n display: none;\r\n }\r\n}\r\n\r\n@container mory (max-width: 680px) {\r\n .record-nav-list {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n}\r\n\r\n/* Keep the table header aligned with the actual row structure. */\r\n.memory-list-header {\r\n grid-template-columns: 108px 150px minmax(260px, 1fr) 120px 110px;\r\n}\r\n\r\n.memory-list-header.selection-mode {\r\n grid-template-columns: 36px 108px 150px minmax(260px, 1fr) 120px 110px;\r\n}\r\n\r\n.selection-header-label {\r\n color: var(--accent);\r\n text-transform: none;\r\n letter-spacing: 0;\r\n}\r\n\r\n.selection-toolbar-button[data-slot=\"button\"] {\r\n min-height: 38px;\r\n border-radius: 10px;\r\n}\r\n\r\n.capture-modal {\r\n height: auto;\r\n max-height: min(780px, calc(100vh - 32px));\r\n top: 5vh;\r\n transform: translateX(-50%);\r\n}\r\n\r\n@keyframes mory-site-capture-modal-in {\r\n from { opacity: 0; transform: translate(-50%, -8px); }\r\n to { opacity: 1; transform: translate(-50%, 0); }\r\n}\r\n\r\n@container mory (max-width: 1450px) and (min-width: 1121px) {\r\n .memory-list-header {\r\n grid-template-columns: 74px 88px minmax(130px, 1fr) 76px 76px;\r\n }\r\n\r\n .memory-list-header.selection-mode {\r\n grid-template-columns: 30px 74px 88px minmax(130px, 1fr) 76px 76px;\r\n }\r\n}\r\n\r\n@container mory (max-width: 1120px) {\r\n .memory-list-header {\r\n grid-template-columns: 92px 130px minmax(220px, 1fr) 100px 94px;\r\n }\r\n\r\n .memory-list-header.selection-mode {\r\n grid-template-columns: 32px 92px 130px minmax(220px, 1fr) 100px 94px;\r\n }\r\n}\r\n\r\n@container mory (max-width: 780px) {\r\n .selection-header-label {\r\n display: none;\r\n }\r\n\r\n .capture-modal {\r\n top: 16px;\r\n max-height: calc(100vh - 32px);\r\n }\r\n}\r\n\r\n/* Medium screens need a full-width navigation row before switching to a phone layout. */\r\n@container mory (max-width: 1180px) {\r\n .product-shell {\r\n padding-inline: 16px;\r\n }\r\n\r\n .workspace-layout {\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .workspace-nav {\r\n position: static;\r\n width: 100%;\r\n order: -1;\r\n }\r\n\r\n .nav-brand-card {\r\n width: auto;\r\n min-width: 210px;\r\n margin-bottom: 0;\r\n }\r\n\r\n .workspace-nav {\r\n display: grid;\r\n grid-template-columns: auto minmax(0, 1fr) auto;\r\n align-items: center;\r\n column-gap: 18px;\r\n }\r\n\r\n .workspace-nav .nav-section-label {\r\n display: none;\r\n }\r\n\r\n .workspace-nav .all-memory-list {\r\n display: flex;\r\n min-width: 0;\r\n gap: 4px;\r\n }\r\n\r\n .workspace-nav .all-memory-list button {\r\n flex: 0 0 auto;\r\n }\r\n\r\n .workspace-nav .all-types-list {\r\n grid-column: 1 / -1;\r\n grid-row: 2;\r\n grid-template-columns: repeat(5, minmax(0, 1fr));\r\n margin-top: 6px;\r\n }\r\n\r\n .sidebar-footer {\r\n margin-top: 0;\r\n padding-top: 0;\r\n border-top: 0;\r\n }\r\n}\r\n\r\n@container mory (max-width: 760px) {\r\n .product-header {\r\n align-items: flex-start;\r\n }\r\n\r\n .workspace-nav {\r\n display: block;\r\n }\r\n\r\n .nav-brand-card {\r\n width: 100%;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .workspace-nav .all-memory-list,\r\n .workspace-nav .all-types-list {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n margin-top: 0;\r\n }\r\n\r\n .sidebar-footer {\r\n margin-top: 14px;\r\n padding-top: 10px;\r\n border-top: 1px solid var(--border-soft);\r\n }\r\n\r\n .feed-controls {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > button.source-trigger {\r\n grid-column: 1;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .feed-controls .advanced-filters > * {\r\n width: 100%;\r\n }\r\n}\r\n\r\n/* Final settings composition: two balanced work areas instead of one long\r\n full-width form. */\r\n.sync-layout {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);\r\n gap: 14px;\r\n align-items: start;\r\n}\r\n\r\n.sync-column {\r\n display: flex;\r\n min-width: 0;\r\n flex-direction: column;\r\n gap: 10px;\r\n}\r\n\r\n.sync-config-section,\r\n.sync-security-section {\r\n margin: 0;\r\n padding: 15px;\r\n}\r\n\r\n.sync-config-section {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n}\r\n\r\n.sync-config-section .language-field {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 5px;\r\n}\r\n\r\n.sync-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 10px;\r\n}\r\n\r\n.sync-security-section {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 10px;\r\n}\r\n\r\n.sync-security-section .sync-section-heading {\r\n grid-column: 1 / -1;\r\n}\r\n\r\n.sync-auto-option {\r\n margin: 0;\r\n}\r\n\r\n.sync-note,\r\n.sync-warning {\r\n margin: 0;\r\n padding: 10px 12px;\r\n font-size: 12px;\r\n line-height: 1.45;\r\n}\r\n\r\n.sync-actions {\r\n padding-top: 0;\r\n}\r\n\r\n@container mory (max-width: 860px) {\r\n .sync-layout {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n\r\n@container mory (max-width: 520px) {\r\n .sync-grid,\r\n .sync-security-section {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .sync-security-section .sync-section-heading {\r\n grid-column: auto;\r\n }\r\n}\r\n\r\n/* Portrait tablets and narrow laptop windows: prioritize reading width over fill. */\r\n@media (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {\r\n .product-shell {\r\n padding: 18px 16px 32px;\r\n }\r\n\r\n .product-header,\r\n .workspace-layout {\r\n width: min(760px, 100%);\r\n max-width: 760px;\r\n margin-inline: auto;\r\n }\r\n\r\n .product-header {\r\n align-items: center;\r\n }\r\n\r\n .workspace-nav {\r\n display: block;\r\n padding: 14px 16px;\r\n }\r\n\r\n .nav-brand-card {\r\n width: 100%;\r\n min-width: 0;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .workspace-nav .nav-section-label {\r\n display: block;\r\n margin-top: 12px;\r\n }\r\n\r\n .workspace-nav .all-memory-list,\r\n .workspace-nav .all-types-list {\r\n display: grid;\r\n grid-template-columns: repeat(5, minmax(0, 1fr));\r\n margin-top: 0;\r\n }\r\n\r\n .workspace-nav .all-memory-list button {\r\n grid-column: 1 / -1;\r\n }\r\n\r\n .workspace-nav .all-types-list button {\r\n min-width: 0;\r\n min-height: 36px;\r\n gap: 6px;\r\n padding-inline: 8px;\r\n font-size: 12px;\r\n }\r\n\r\n .workspace-nav .all-types-list button strong {\r\n display: inline;\r\n font-size: 11px;\r\n }\r\n\r\n .sidebar-footer {\r\n margin-top: 12px;\r\n padding-top: 10px;\r\n border-top: 1px solid var(--border-soft);\r\n }\r\n\r\n .feed-section,\r\n .settings-page {\r\n width: 100%;\r\n max-width: 760px;\r\n margin-inline: auto;\r\n }\r\n\r\n .feed-controls {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > button.source-trigger {\r\n grid-column: 1;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n border: 0;\r\n background: transparent;\r\n padding: 0;\r\n }\r\n\r\n .feed-controls .advanced-filters > span {\r\n grid-column: 1 / -1 !important;\r\n }\r\n\r\n .section-heading {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n align-items: end;\r\n }\r\n\r\n .section-heading .feed-summary {\r\n grid-column: 1 / -1;\r\n margin-left: 0;\r\n order: 3;\r\n }\r\n\r\n .section-heading .feed-actions {\r\n justify-content: flex-end;\r\n }\r\n}\r\n\r\n@media (max-width: 760px) and (orientation: portrait) {\r\n .workspace-nav {\r\n padding: 10px 12px;\r\n border-radius: 16px;\r\n }\r\n\r\n .workspace-nav .nav-brand-card {\r\n display: none;\r\n }\r\n\r\n .workspace-nav .nav-section-label {\r\n display: none;\r\n }\r\n\r\n .workspace-nav .all-memory-list,\r\n .workspace-nav .all-types-list {\r\n margin: 0;\r\n }\r\n\r\n .workspace-nav .all-memory-list button {\r\n min-height: 34px;\r\n }\r\n\r\n .workspace-nav .all-types-list {\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 2px;\r\n }\r\n\r\n .workspace-nav .all-types-list button {\r\n min-height: 32px;\r\n padding-inline: 6px;\r\n font-size: 11px;\r\n }\r\n\r\n .workspace-nav .all-types-list button strong {\r\n display: none;\r\n }\r\n\r\n .sidebar-footer {\r\n margin-top: 6px;\r\n padding-top: 6px;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n border: 0;\r\n background: transparent;\r\n padding: 0;\r\n }\r\n\r\n .feed-controls .advanced-filters > span {\r\n grid-column: 1 / -1 !important;\r\n }\r\n\r\n .feed-controls .advanced-filters > * {\r\n width: auto;\r\n min-width: 0;\r\n }\r\n\r\n .feed-controls .advanced-filters .inline-trigger {\r\n min-width: 0;\r\n padding-inline: 10px;\r\n font-size: 12px;\r\n }\r\n}\r\n\r\n/* Desktop/tablet records are a single aligned data row. */\r\n@container mory (min-width: 900px) {\r\n .memory-list-header,\r\n .memory-card {\r\n grid-template-columns: 34px 110px 150px minmax(220px, 1fr) 130px 110px;\r\n gap: 14px;\r\n }\r\n\r\n .memory-card {\r\n min-height: 68px;\r\n padding-block: 8px;\r\n }\r\n\r\n .memory-entity span,\r\n .memory-content-cell p,\r\n .memory-category span {\r\n display: none;\r\n }\r\n\r\n .memory-content-cell,\r\n .memory-title-button,\r\n .memory-entity,\r\n .memory-category,\r\n .memory-life {\r\n min-width: 0;\r\n }\r\n\r\n .memory-title-button,\r\n .memory-entity strong,\r\n .memory-time,\r\n .memory-category [data-slot=\"button\"] {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .memory-life {\r\n white-space: nowrap;\r\n }\r\n\r\n .memory-list-header.selection-mode,\r\n .memory-card.selection-mode {\r\n grid-template-columns: 34px 110px 150px minmax(220px, 1fr) 130px 110px;\r\n }\r\n}\r\n\r\n/* Final shared text-field override: keep every editable text field aligned\r\n after component-specific layout rules. */\r\n[data-slot=\"input\"]:not([type=\"checkbox\"]):not([type=\"date\"]):not([type=\"file\"]),\r\n[data-slot=\"textarea\"] {\r\n border: 1px solid var(--border-soft) !important;\r\n border-radius: 18px !important;\r\n background: var(--surface) !important;\r\n font-weight: 400;\r\n box-shadow: 0 4px 12px rgba(25, 28, 35, 0.05);\r\n}\r\n\r\n/* Absolute last-resort viewport rules. */\r\n:scope, :scope, :scope,\r\n.product-shell, .product-header, .workspace-layout, .workspace-main,\r\n.feed-section, .settings-page, .feed-controls, .memory-grid, .memory-card {\r\n min-width: 0;\r\n max-width: 100%;\r\n}\r\n\r\n:scope { overflow-x: hidden; }\r\n\r\n@container mory (max-width: 1180px) {\r\n .workspace-layout { display: block; }\r\n .workspace-nav { display: none !important; }\r\n .workspace-main { width: 100%; }\r\n}\r\n\r\n@container mory (max-width: 900px) {\r\n .feed-controls {\r\n display: grid !important;\r\n grid-template-columns: minmax(0, 1fr) minmax(132px, .45fr) !important;\r\n gap: 8px;\r\n overflow: visible;\r\n }\r\n .feed-controls .command-bar { display: contents !important; }\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger { grid-column: 1 / -1 !important; }\r\n .feed-controls .advanced-filters {\r\n display: grid !important;\r\n grid-column: 1 / -1 !important;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 8px;\r\n }\r\n .feed-controls .advanced-filters > span { display: none; }\r\n .feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n width: 100%;\r\n min-width: 0;\r\n }\r\n}\r\n\r\n@container mory (max-width: 760px) {\r\n .product-shell { padding: 8px 8px 20px; }\r\n .product-header { display: flex; gap: 10px; }\r\n .header-actions { max-width: none; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }\r\n .brand-lockup, .brand-lockup > div:last-child { min-width: 0; }\r\n .brand-lockup span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n .feed-section { padding: 12px; border-radius: 16px; }\r\n .section-heading {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) auto;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .section-heading > div:first-child { grid-column: 1; }\r\n .section-heading > .feed-actions { grid-column: 2; grid-row: 1; margin-left: 0; }\r\n .section-heading > .context-pack { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }\r\n .feed-controls { grid-template-columns: 1fr !important; gap: 8px; padding: 8px; }\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger,\r\n .feed-controls .advanced-filters { grid-column: 1 / -1 !important; }\r\n .feed-controls .advanced-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n .memory-card {\r\n grid-template-columns: 28px minmax(0, 1fr) auto !important;\r\n gap: 8px 10px;\r\n padding: 12px;\r\n }\r\n .memory-card .memory-time { grid-column: 2 !important; }\r\n .memory-card .memory-entity { grid-column: 3 !important; justify-items: end; }\r\n .memory-content-cell, .memory-category, .memory-life,\r\n .memory-card .card-actions { grid-column: 1 / -1 !important; }\r\n .settings-page { padding: 18px 14px 28px; }\r\n .settings-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }\r\n .settings-tabs::-webkit-scrollbar { display: none; }\r\n}\r\n\r\n@container mory (max-width: 600px) {\r\n .capture-modal {\r\n width: calc(100vw - 20px) !important;\r\n max-height: calc(100dvh - 20px) !important;\r\n overflow-y: auto;\r\n padding: 16px !important;\r\n }\r\n .capture-modal .capture-bottom {\r\n display: grid !important;\r\n grid-template-columns: 1fr 1fr !important;\r\n gap: 8px !important;\r\n }\r\n .capture-modal .capture-bottom > * { width: 100% !important; min-width: 0 !important; }\r\n .capture-modal .capture-bottom > [data-slot=\"input\"] { grid-column: 1 / -1; }\r\n}\r\n\r\n@container mory (max-width: 420px) {\r\n .brand-glyph.logo-mark, .product-header .brand-glyph.logo-mark { width: 42px; height: 42px; }\r\n .brand-lockup strong { font-size: 16px; }\r\n .brand-lockup span { max-width: 128px; }\r\n .section-heading h2 { font-size: 22px; }\r\n .feed-controls .advanced-filters { grid-template-columns: 1fr; }\r\n .context-actions { flex-wrap: wrap; }\r\n}\r\n\r\n/* Final responsive overrides. Keep these last: older breakpoint rules above\r\n are preserved for desktop styling, while small screens get one stable\r\n stacking model. */\r\n:scope,\r\n:scope,\r\n:scope,\r\n.product-shell,\r\n.product-header,\r\n.workspace-layout,\r\n.workspace-main,\r\n.feed-section,\r\n.settings-page,\r\n.feed-controls,\r\n.memory-grid,\r\n.memory-card {\r\n min-width: 0;\r\n max-width: 100%;\r\n}\r\n\r\n:scope { overflow-x: hidden; }\r\n\r\n.memory-card > *,\r\n.memory-content-cell,\r\n.memory-content-cell p,\r\n.memory-title-button,\r\n.memory-entity,\r\n.memory-category,\r\n.memory-life,\r\n.card-actions {\r\n min-width: 0;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n@container mory (max-width: 1180px) {\r\n .workspace-layout { display: block; }\r\n .workspace-nav { display: none !important; }\r\n .workspace-main { width: 100%; }\r\n}\r\n\r\n@container mory (max-width: 900px) {\r\n .feed-controls {\r\n display: grid !important;\r\n grid-template-columns: minmax(0, 1fr) minmax(132px, 0.45fr) !important;\r\n gap: 8px;\r\n overflow: visible;\r\n }\r\n\r\n .feed-controls .command-bar { display: contents !important; }\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger { grid-column: 1 / -1 !important; }\r\n .feed-controls .advanced-filters {\r\n display: grid !important;\r\n grid-column: 1 / -1 !important;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 8px;\r\n }\r\n\r\n .feed-controls .advanced-filters > span { display: none; }\r\n .feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n width: 100%;\r\n min-width: 0;\r\n }\r\n}\r\n\r\n@container mory (max-width: 760px) {\r\n .product-shell { padding: 8px 8px 20px; }\r\n .product-header { display: flex; gap: 10px; }\r\n .header-actions { max-width: none; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }\r\n .brand-lockup, .brand-lockup > div:last-child { min-width: 0; }\r\n .brand-lockup span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n\r\n .feed-section { padding: 12px; border-radius: 16px; }\r\n .section-heading {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) auto;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .section-heading > div:first-child { grid-column: 1; }\r\n .section-heading > .feed-actions { grid-column: 2; grid-row: 1; margin-left: 0; }\r\n .section-heading > .context-pack { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }\r\n\r\n .feed-controls {\r\n grid-template-columns: 1fr !important;\r\n gap: 8px;\r\n padding: 8px;\r\n }\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger,\r\n .feed-controls .advanced-filters { grid-column: 1 / -1 !important; }\r\n .feed-controls .advanced-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n\r\n .memory-card {\r\n grid-template-columns: 28px minmax(0, 1fr) auto !important;\r\n gap: 8px 10px;\r\n padding: 12px;\r\n }\r\n .memory-card .memory-time { grid-column: 2 !important; }\r\n .memory-card .memory-entity { grid-column: 3 !important; justify-items: end; }\r\n .memory-content-cell,\r\n .memory-category,\r\n .memory-life,\r\n .memory-card .card-actions { grid-column: 1 / -1 !important; }\r\n\r\n .settings-page { padding: 18px 14px 28px; }\r\n .settings-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }\r\n .settings-tabs::-webkit-scrollbar { display: none; }\r\n}\r\n\r\n@container mory (max-width: 600px) {\r\n .capture-modal {\r\n width: calc(100vw - 20px) !important;\r\n max-height: calc(100dvh - 20px) !important;\r\n overflow-y: auto;\r\n padding: 16px !important;\r\n }\r\n .capture-modal .capture-bottom {\r\n display: grid !important;\r\n grid-template-columns: 1fr 1fr !important;\r\n gap: 8px !important;\r\n }\r\n .capture-modal .capture-bottom > * { width: 100% !important; min-width: 0 !important; }\r\n .capture-modal .capture-bottom > [data-slot=\"input\"] { grid-column: 1 / -1; }\r\n}\r\n\r\n@container mory (max-width: 420px) {\r\n .brand-glyph.logo-mark,\r\n .product-header .brand-glyph.logo-mark { width: 42px; height: 42px; }\r\n .brand-lockup strong { font-size: 16px; }\r\n .brand-lockup span { max-width: 128px; }\r\n .section-heading h2 { font-size: 22px; }\r\n .feed-controls .advanced-filters { grid-template-columns: 1fr; }\r\n .context-actions { flex-wrap: wrap; }\r\n .context-actions .inline-trigger,\r\n .context-actions > [data-slot=\"button\"] { flex: 1 1 auto; }\r\n}\r\n\r\n@container mory (min-width: 900px) {\r\n .feed-controls {\r\n grid-template-columns: minmax(0, 1fr) 160px 150px 176px 176px !important;\r\n gap: 10px !important;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n display: contents !important;\r\n }\r\n}\r\n\r\n/* Feed rhythm: controls, notices, and the memory table use one shared\r\n vertical spacing unit. The table header and rows intentionally stay joined. */\r\n.feed-controls {\r\n margin-bottom: 14px;\r\n padding-bottom: 0;\r\n border-bottom: 0;\r\n}\r\n\r\n.feed-section > .notice {\r\n margin: 0 0 14px;\r\n}\r\n\r\n.feed-section > .memory-list-header {\r\n margin-top: 0;\r\n}\r\n\r\n/* Desktop filter row: every control is a sibling in one grid, so each\r\n boundary gets the same 10px breathing room. */\r\n@container mory (min-width: 900px) {\r\n .feed-controls {\r\n grid-template-columns: minmax(0, 1fr) 160px 150px 176px 176px !important;\r\n gap: 10px !important;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n display: contents !important;\r\n }\r\n}\r\n\r\n/* User-selectable workspace themes. The product's existing styling consumes\r\n these shared tokens, so one choice updates the complete interface. */\r\n:scope[data-theme=\"midnight\"] {\r\n --bg: #101522;\r\n --surface: #171d2c;\r\n --surface-muted: #1d2638;\r\n --surface-raised: rgba(28, 36, 53, 0.98);\r\n --border: #33405a;\r\n --border-soft: #29354d;\r\n --text: #ecf1ff;\r\n --muted: #9aa8c2;\r\n --accent: #8b9cff;\r\n --primary-hover: #303b64;\r\n --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.28);\r\n --shadow-menu: 0 18px 48px rgba(0, 0, 0, 0.4);\r\n --background: 222 30% 9%;\r\n --foreground: 220 40% 96%;\r\n --card: 222 28% 14%;\r\n --card-foreground: 220 40% 96%;\r\n --popover: 222 28% 14%;\r\n --popover-foreground: 220 40% 96%;\r\n --primary-foreground: 222 30% 9%;\r\n --secondary: 222 25% 19%;\r\n --secondary-foreground: 220 30% 88%;\r\n --muted-foreground: 220 18% 68%;\r\n --accent-foreground: 230 100% 88%;\r\n --ring: 230 100% 80%;\r\n}\r\n\r\n:scope[data-theme=\"ocean\"] {\r\n --bg: #eef7fa;\r\n --surface: #ffffff;\r\n --surface-muted: #f2f9fb;\r\n --surface-raised: rgba(255, 255, 255, 0.98);\r\n --border: #cfe3e8;\r\n --border-soft: #deedf0;\r\n --text: #16323d;\r\n --muted: #63808a;\r\n --accent: #176b87;\r\n --primary-hover: #214e60;\r\n --shadow-soft: 0 14px 40px rgba(23, 107, 135, 0.1);\r\n --shadow-menu: 0 18px 48px rgba(23, 75, 92, 0.16);\r\n --background: 192 44% 96%;\r\n --foreground: 194 45% 16%;\r\n --card: 0 0% 100%;\r\n --card-foreground: 194 45% 16%;\r\n --popover: 0 0% 100%;\r\n --popover-foreground: 194 45% 16%;\r\n --primary-foreground: 0 0% 100%;\r\n --secondary: 190 40% 95%;\r\n --secondary-foreground: 194 35% 24%;\r\n --muted-foreground: 194 18% 46%;\r\n --accent-foreground: 194 70% 28%;\r\n --ring: 194 70% 32%;\r\n}\r\n\r\n:scope[data-theme=\"sunset\"] {\r\n --bg: #fff7ed;\r\n --surface: #fffdf9;\r\n --surface-muted: #fff3e4;\r\n --surface-raised: rgba(255, 253, 249, 0.98);\r\n --border: #efd8c0;\r\n --border-soft: #f5e5d4;\r\n --text: #362018;\r\n --muted: #8b7165;\r\n --accent: #a64b2a;\r\n --primary-hover: #5a3024;\r\n --shadow-soft: 0 14px 40px rgba(166, 75, 42, 0.1);\r\n --shadow-menu: 0 18px 48px rgba(116, 61, 35, 0.16);\r\n --background: 34 100% 96%;\r\n --foreground: 17 36% 15%;\r\n --card: 40 100% 99%;\r\n --card-foreground: 17 36% 15%;\r\n --popover: 40 100% 99%;\r\n --popover-foreground: 17 36% 15%;\r\n --primary-foreground: 40 100% 99%;\r\n --secondary: 34 80% 94%;\r\n --secondary-foreground: 17 25% 25%;\r\n --muted-foreground: 18 18% 48%;\r\n --accent-foreground: 16 60% 30%;\r\n --ring: 16 60% 38%;\r\n}\r\n\r\n:scope[data-theme=\"forest\"] {\r\n --bg: #edf5ef; --surface: #ffffff; --surface-muted: #f3f8f4; --surface-raised: rgba(255,255,255,.98);\r\n --border: #cfe2d4; --border-soft: #dfede2; --text: #173226; --muted: #668071; --accent: #2d6a4f; --primary-hover: #24563f;\r\n --shadow-soft: 0 14px 40px rgba(45,106,79,.10); --shadow-menu: 0 18px 48px rgba(35,83,61,.16);\r\n}\r\n\r\n:scope[data-theme=\"lavender\"] {\r\n --bg: #f5f1fb; --surface: #ffffff; --surface-muted: #faf7fd; --surface-raised: rgba(255,255,255,.98);\r\n --border: #ded3ef; --border-soft: #ebe4f5; --text: #2d2540; --muted: #817593; --accent: #7657a8; --primary-hover: #60478d;\r\n --shadow-soft: 0 14px 40px rgba(118,87,168,.11); --shadow-menu: 0 18px 48px rgba(92,67,134,.16);\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] {\r\n --bg: #17191e; --surface: #20242b; --surface-muted: #292e37; --surface-raised: rgba(36,41,49,.98);\r\n --border: #404752; --border-soft: #333a45; --text: #f2f0e9; --muted: #a8adb5; --accent: #d6b36a; --primary-hover: #b28f4c;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.30); --shadow-menu: 0 18px 48px rgba(0,0,0,.44);\r\n}\r\n\r\n:scope[data-theme=\"rose\"] {\r\n --bg: #fff1f4; --surface: #ffffff; --surface-muted: #fff7f8; --surface-raised: rgba(255,255,255,.98);\r\n --border: #efd2db; --border-soft: #f5e2e7; --text: #3d202a; --muted: #90707a; --accent: #b44968; --primary-hover: #963b56;\r\n --shadow-soft: 0 14px 40px rgba(180,73,104,.10); --shadow-menu: 0 18px 48px rgba(137,54,78,.15);\r\n}\r\n\r\n:scope[data-theme=\"terminal\"] {\r\n --bg: #07130f; --surface: #0d2119; --surface-muted: #123124; --surface-raised: rgba(15,38,29,.98);\r\n --border: #285540; --border-soft: #1b412e; --text: #e4fff4; --muted: #8dc4aa; --accent: #63e6be; --primary-hover: #35b891;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.32); --shadow-menu: 0 18px 48px rgba(0,0,0,.46);\r\n}\r\n\r\n:scope[data-theme=\"sand\"] {\r\n --bg: #faf4e8; --surface: #fffdf7; --surface-muted: #fff8ec; --surface-raised: rgba(255,253,247,.98);\r\n --border: #eadbc2; --border-soft: #f2e7d4; --text: #3c2c1d; --muted: #8b7864; --accent: #8a5a2b; --primary-hover: #6e451f;\r\n --shadow-soft: 0 14px 40px rgba(138,90,43,.10); --shadow-menu: 0 18px 48px rgba(111,72,34,.15);\r\n}\r\n\r\n:scope[data-theme=\"cobalt\"] {\r\n --bg: #eef2ff; --surface: #ffffff; --surface-muted: #f5f7ff; --surface-raised: rgba(255,255,255,.98);\r\n --border: #d4dcf5; --border-soft: #e5eaff; --text: #1d2948; --muted: #7180a4; --accent: #3f63d8; --primary-hover: #304eae;\r\n --shadow-soft: 0 14px 40px rgba(63,99,216,.11); --shadow-menu: 0 18px 48px rgba(44,69,151,.16);\r\n}\r\n\r\n:scope[data-theme=\"plum\"] {\r\n --bg: #fbf0fa; --surface: #ffffff; --surface-muted: #fdf6fc; --surface-raised: rgba(255,255,255,.98);\r\n --border: #ead2e8; --border-soft: #f2e3f0; --text: #3d243a; --muted: #92788e; --accent: #914b8b; --primary-hover: #743b70;\r\n --shadow-soft: 0 14px 40px rgba(145,75,139,.10); --shadow-menu: 0 18px 48px rgba(112,57,108,.15);\r\n}\r\n\r\n:scope[data-theme=\"mint\"] {\r\n --bg: #eafaf5; --surface: #ffffff; --surface-muted: #f2fcf8; --surface-raised: rgba(255,255,255,.98);\r\n --border: #cbe9de; --border-soft: #def2eb; --text: #173a34; --muted: #6c9187; --accent: #138a78; --primary-hover: #0e6e60;\r\n --shadow-soft: 0 14px 40px rgba(19,138,120,.10); --shadow-menu: 0 18px 48px rgba(14,105,91,.15);\r\n}\r\n\r\n:scope[data-theme=\"copper\"] {\r\n --bg: #fff2e9; --surface: #fffdfb; --surface-muted: #fff7f1; --surface-raised: rgba(255,253,251,.98);\r\n --border: #efd7c7; --border-soft: #f5e5d9; --text: #3d2419; --muted: #947565; --accent: #b65c35; --primary-hover: #914724;\r\n --shadow-soft: 0 14px 40px rgba(182,92,53,.10); --shadow-menu: 0 18px 48px rgba(142,69,36,.15);\r\n}\r\n\r\n:scope[data-theme=\"mono\"] {\r\n --bg: #f3f3f3; --surface: #ffffff; --surface-muted: #f8f8f8; --surface-raised: rgba(255,255,255,.98);\r\n --border: #d8d8d8; --border-soft: #e7e7e7; --text: #202020; --muted: #747474; --accent: #333333; --primary-hover: #111111;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.09); --shadow-menu: 0 18px 48px rgba(0,0,0,.14);\r\n}\r\n\r\n:scope[data-theme=\"abyss\"] {\r\n --bg: #080b12; --surface: #101722; --surface-muted: #151f2f; --surface-raised: rgba(18,26,41,.98);\r\n --border: #293b56; --border-soft: #1e2d43; --text: #edf4ff; --muted: #8fa5c2; --accent: #6ea8ff; --primary-hover: #4d82d4;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.34); --shadow-menu: 0 18px 48px rgba(0,0,0,.48);\r\n}\r\n\r\n:scope[data-theme=\"ember\"] {\r\n --bg: #160d0b; --surface: #211413; --surface-muted: #2b1815; --surface-raised: rgba(46,25,21,.98);\r\n --border: #61352a; --border-soft: #46251f; --text: #fff1e8; --muted: #c39a89; --accent: #ff9b6b; --primary-hover: #dc7449;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.34); --shadow-menu: 0 18px 48px rgba(0,0,0,.48);\r\n}\r\n\r\n:scope[data-theme=\"aurora\"] {\r\n --bg: #071517; --surface: #0c2427; --surface-muted: #123336; --surface-raised: rgba(15,49,52,.98);\r\n --border: #245c5d; --border-soft: #194849; --text: #e8fffb; --muted: #8dc8c1; --accent: #64e8d2; --primary-hover: #35b9a5;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.34); --shadow-menu: 0 18px 48px rgba(0,0,0,.48);\r\n}\r\n\r\n:scope[data-theme=\"violet\"] {\r\n --bg: #110d1d; --surface: #1b142b; --surface-muted: #261a39; --surface-raised: rgba(40,27,59,.98);\r\n --border: #5c4380; --border-soft: #402d5e; --text: #f8f0ff; --muted: #b39bc9; --accent: #c59bff; --primary-hover: #9f73db;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.34); --shadow-menu: 0 18px 48px rgba(0,0,0,.48);\r\n}\r\n\r\n:scope[data-theme=\"navy\"] {\r\n --bg: #091323; --surface: #101d34; --surface-muted: #162746; --surface-raised: rgba(22,39,70,.98);\r\n --border: #304e78; --border-soft: #223b60; --text: #edf5ff; --muted: #9ab0d1; --accent: #7fb3ff; --primary-hover: #568bd8;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.34); --shadow-menu: 0 18px 48px rgba(0,0,0,.48);\r\n}\r\n\r\n:scope[data-theme=\"crimson\"] {\r\n --bg: #1b0b12; --surface: #28121c; --surface-muted: #32131e; --surface-raised: rgba(53,20,32,.98);\r\n --border: #6b3043; --border-soft: #4a2030; --text: #fff0f3; --muted: #c99aa7; --accent: #ff7187; --primary-hover: #dc5069;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.34); --shadow-menu: 0 18px 48px rgba(0,0,0,.48);\r\n}\r\n\r\n:scope[data-theme=\"sapphire\"] {\r\n --bg: #07111f; --surface: #0d1d31; --surface-muted: #102844; --surface-raised: rgba(16,40,68,.98);\r\n --border: #28547f; --border-soft: #1c3b5d; --text: #eaf6ff; --muted: #91b4d2; --accent: #61b7ff; --primary-hover: #3d8fd1;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.34); --shadow-menu: 0 18px 48px rgba(0,0,0,.48);\r\n}\r\n\r\n:scope[data-theme=\"moss\"] {\r\n --bg: #0c160f; --surface: #142219; --surface-muted: #1a2c1b; --surface-raised: rgba(27,47,29,.98);\r\n --border: #3a5b38; --border-soft: #29442a; --text: #efffe5; --muted: #a9c49b; --accent: #a7d36f; --primary-hover: #7eab4b;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.34); --shadow-menu: 0 18px 48px rgba(0,0,0,.48);\r\n}\r\n\r\n:scope[data-theme=\"solar\"] {\r\n --bg: #17120a; --surface: #251d10; --surface-muted: #302516; --surface-raised: rgba(49,38,22,.98);\r\n --border: #69532b; --border-soft: #4b3b20; --text: #fff8df; --muted: #cbb984; --accent: #ffd166; --primary-hover: #dcae43;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.34); --shadow-menu: 0 18px 48px rgba(0,0,0,.48);\r\n}\r\n\r\n:scope[data-theme=\"ink\"] {\r\n --bg: #0d0f12; --surface: #15181d; --surface-muted: #1c2026; --surface-raised: rgba(29,33,40,.98);\r\n --border: #3b424c; --border-soft: #2b3139; --text: #f2f4f7; --muted: #a4abb5; --accent: #e4e7ec; --primary-hover: #c2c8d1;\r\n --shadow-soft: 0 14px 40px rgba(0,0,0,.36); --shadow-menu: 0 18px 48px rgba(0,0,0,.5);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"],\r\n:scope[data-theme=\"ocean\"],\r\n:scope[data-theme=\"sunset\"],\r\n:scope[data-theme=\"forest\"],\r\n:scope[data-theme=\"lavender\"],\r\n:scope[data-theme=\"graphite\"],\r\n:scope[data-theme=\"rose\"],\r\n:scope[data-theme=\"terminal\"],\r\n:scope[data-theme=\"sand\"],\r\n:scope[data-theme=\"abyss\"],\r\n:scope[data-theme=\"ember\"],\r\n:scope[data-theme=\"aurora\"],\r\n:scope[data-theme=\"violet\"],\r\n:scope[data-theme=\"navy\"],\r\n:scope[data-theme=\"crimson\"],\r\n:scope[data-theme=\"sapphire\"],\r\n:scope[data-theme=\"moss\"],\r\n:scope[data-theme=\"solar\"],\r\n:scope[data-theme=\"ink\"] {\r\n background: var(--bg);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .product-shell {\r\n background: radial-gradient(circle at 8% -8%, rgba(82, 99, 190, 0.22), transparent 28%), linear-gradient(180deg, #151b2a 0%, var(--bg) 48%, #0c101a 100%);\r\n}\r\n\r\n:scope[data-theme=\"ocean\"] .product-shell {\r\n background: radial-gradient(circle at 8% -8%, rgba(164, 224, 235, 0.72), transparent 28%), linear-gradient(180deg, #f8fdfe 0%, var(--bg) 48%, #e8f2f5 100%);\r\n}\r\n\r\n:scope[data-theme=\"sunset\"] .product-shell {\r\n background: radial-gradient(circle at 8% -8%, rgba(255, 209, 157, 0.62), transparent 28%), linear-gradient(180deg, #fffdf9 0%, var(--bg) 48%, #fff0dc 100%);\r\n}\r\n\r\n:scope[data-theme=\"forest\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(164,213,177,.65), transparent 28%), linear-gradient(180deg,#fbfffc 0%,var(--bg) 48%,#e6f0e8 100%); }\r\n:scope[data-theme=\"lavender\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(211,193,241,.62), transparent 28%), linear-gradient(180deg,#fff 0%,var(--bg) 48%,#eee7f8 100%); }\r\n:scope[data-theme=\"graphite\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(214,179,106,.15), transparent 28%), linear-gradient(180deg,#242830 0%,var(--bg) 48%,#101216 100%); }\r\n:scope[data-theme=\"rose\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(246,182,201,.60), transparent 28%), linear-gradient(180deg,#fff 0%,var(--bg) 48%,#f9e4e9 100%); }\r\n:scope[data-theme=\"terminal\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(56,183,145,.16), transparent 28%), linear-gradient(180deg,#10271d 0%,var(--bg) 48%,#040a07 100%); }\r\n:scope[data-theme=\"sand\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(243,211,158,.60), transparent 28%), linear-gradient(180deg,#fffdf7 0%,var(--bg) 48%,#f3ead8 100%); }\r\n:scope[data-theme=\"cobalt\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(168,184,255,.55), transparent 28%), linear-gradient(180deg,#fff 0%,var(--bg) 48%,#e4eaff 100%); }\r\n:scope[data-theme=\"plum\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(235,180,228,.52), transparent 28%), linear-gradient(180deg,#fff 0%,var(--bg) 48%,#f3e3f1 100%); }\r\n:scope[data-theme=\"mint\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(155,234,211,.55), transparent 28%), linear-gradient(180deg,#fff 0%,var(--bg) 48%,#def3eb 100%); }\r\n:scope[data-theme=\"copper\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(250,190,149,.55), transparent 28%), linear-gradient(180deg,#fffdfb 0%,var(--bg) 48%,#f9e6d8 100%); }\r\n:scope[data-theme=\"mono\"] .product-shell { background: linear-gradient(180deg,#fff 0%,var(--bg) 48%,#e8e8e8 100%); }\r\n:scope[data-theme=\"abyss\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(110,168,255,.16), transparent 28%), linear-gradient(180deg,#101722 0%,var(--bg) 48%,#05070c 100%); }\r\n:scope[data-theme=\"ember\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(255,155,107,.16), transparent 28%), linear-gradient(180deg,#211413 0%,var(--bg) 48%,#0b0706 100%); }\r\n:scope[data-theme=\"aurora\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(100,232,210,.16), transparent 28%), linear-gradient(180deg,#0c2427 0%,var(--bg) 48%,#040a0b 100%); }\r\n:scope[data-theme=\"violet\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(197,155,255,.16), transparent 28%), linear-gradient(180deg,#1b142b 0%,var(--bg) 48%,#08060e 100%); }\r\n:scope[data-theme=\"navy\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(127,179,255,.16), transparent 28%), linear-gradient(180deg,#101d34 0%,var(--bg) 48%,#050a14 100%); }\r\n:scope[data-theme=\"crimson\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(255,113,135,.16), transparent 28%), linear-gradient(180deg,#28121c 0%,var(--bg) 48%,#0b0508 100%); }\r\n:scope[data-theme=\"sapphire\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(97,183,255,.16), transparent 28%), linear-gradient(180deg,#0d1d31 0%,var(--bg) 48%,#040912 100%); }\r\n:scope[data-theme=\"moss\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(167,211,111,.14), transparent 28%), linear-gradient(180deg,#142219 0%,var(--bg) 48%,#050a06 100%); }\r\n:scope[data-theme=\"solar\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(255,209,102,.16), transparent 28%), linear-gradient(180deg,#251d10 0%,var(--bg) 48%,#0a0804 100%); }\r\n:scope[data-theme=\"ink\"] .product-shell { background: radial-gradient(circle at 8% -8%, rgba(228,231,236,.08), transparent 28%), linear-gradient(180deg,#15181d 0%,var(--bg) 48%,#07080a 100%); }\r\n\r\n.theme-panel {\r\n max-width: 760px;\r\n padding: 22px;\r\n border: 1px solid var(--border);\r\n border-radius: 22px;\r\n background: var(--surface);\r\n box-shadow: var(--shadow-soft);\r\n}\r\n\r\n.theme-options {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 12px;\r\n margin-top: 18px;\r\n}\r\n\r\n.theme-option {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n min-height: 82px;\r\n padding: 14px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 16px;\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n text-align: left;\r\n transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;\r\n}\r\n\r\n.theme-option:hover { transform: translateY(-1px); border-color: var(--accent); }\r\n.theme-option.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 8px 20px color-mix(in srgb, var(--accent) 14%, transparent); }\r\n.theme-swatches { display: flex; flex: 0 0 auto; overflow: hidden; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 12px; }\r\n.theme-swatches span { flex: 1; }\r\n.theme-option-copy { display: grid; gap: 3px; min-width: 0; }\r\n.theme-option-copy strong { font-size: 15px; }\r\n.theme-option-copy small { color: var(--muted); font-size: 12px; }\r\n.theme-check { margin-left: auto; color: var(--accent); font-size: 18px; font-weight: 900; }\r\n\r\n@container mory (max-width: 620px) {\r\n .theme-options { grid-template-columns: 1fr; }\r\n}\r\n\r\n@container mory (min-width: 1181px) {\r\n .settings-content { max-width: 100%; }\r\n .theme-panel { max-width: none; }\r\n .theme-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }\r\n}\r\n\r\n/* Keep the theme readable across the older, more specific product rules. */\r\n.record-nav-list button:hover,\r\n.shortcut-list button:hover,\r\n.utility-nav-button:hover,\r\n.utility-nav-button.active {\r\n border-color: color-mix(in srgb, var(--accent) 24%, var(--border-soft));\r\n background: color-mix(in srgb, var(--accent) 10%, var(--surface));\r\n color: var(--accent);\r\n}\r\n\r\n.record-nav-list button.active {\r\n border-color: color-mix(in srgb, var(--accent) 28%, var(--border-soft));\r\n background: color-mix(in srgb, var(--accent) 13%, var(--surface));\r\n color: var(--accent);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .workspace-nav,\r\n:scope[data-theme=\"midnight\"] .feed-section,\r\n:scope[data-theme=\"midnight\"] .settings-page {\r\n background: rgba(23, 29, 44, 0.94);\r\n border-color: #33405a;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .settings-page {\r\n backdrop-filter: blur(22px);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .language-setting,\r\n:scope[data-theme=\"midnight\"] .theme-option,\r\n:scope[data-theme=\"midnight\"] .ui-select-trigger,\r\n:scope[data-theme=\"midnight\"] .inline-trigger,\r\n:scope[data-theme=\"midnight\"] .source-trigger {\r\n background: #1d2638 !important;\r\n border-color: #33405a !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .settings-tabs button {\r\n background: #1d2638;\r\n border-color: #33405a;\r\n color: #b7c3dd;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .settings-tabs button.active,\r\n:scope[data-theme=\"midnight\"] .settings-tabs button[data-state=\"active\"],\r\n:scope[data-theme=\"midnight\"] .settings-tabs button:hover {\r\n background: var(--accent);\r\n border-color: var(--accent);\r\n color: #101522;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .settings-page-header h1,\r\n:scope[data-theme=\"midnight\"] .settings-page-header p,\r\n:scope[data-theme=\"midnight\"] .settings-page .eyebrow,\r\n:scope[data-theme=\"midnight\"] .settings-page .card-title h3,\r\n:scope[data-theme=\"midnight\"] .settings-page .card-title svg {\r\n color: var(--text);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .settings-page-header p,\r\n:scope[data-theme=\"midnight\"] .settings-page .sync-note,\r\n:scope[data-theme=\"midnight\"] .settings-page small,\r\n:scope[data-theme=\"midnight\"] .settings-page .muted,\r\n:scope[data-theme=\"midnight\"] .settings-page .language-setting label {\r\n color: var(--muted);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] [data-slot=\"input\"],\r\n:scope[data-theme=\"midnight\"] [data-slot=\"textarea\"],\r\n:scope[data-theme=\"midnight\"] .language-setting select {\r\n background: #171d2c !important;\r\n border-color: #33405a !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .sync-config-section,\r\n:scope[data-theme=\"midnight\"] .sync-security-section {\r\n background: linear-gradient(180deg, rgba(29, 38, 56, 0.96), rgba(23, 29, 44, 0.96));\r\n border-color: #33405a;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .sync-section-heading strong,\r\n:scope[data-theme=\"midnight\"] .sync-card-subtitle {\r\n color: var(--text);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .sync-section-heading span,\r\n:scope[data-theme=\"midnight\"] .sync-auto-option small {\r\n color: var(--muted);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .sync-auto-option {\r\n background: rgba(54, 67, 105, 0.46);\r\n border-color: #526189;\r\n color: var(--text);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .sync-auto-option input[type=\"checkbox\"] {\r\n accent-color: var(--accent);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .header-settings[data-slot=\"button\"]:hover,\r\n:scope[data-theme=\"midnight\"] .header-settings[data-slot=\"button\"][aria-pressed=\"true\"] {\r\n background: #1d2638;\r\n border-color: #526189;\r\n color: var(--accent);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .header-settings[data-slot=\"button\"] {\r\n background: #1d2638 !important;\r\n border-color: #33405a !important;\r\n color: #b7c3dd !important;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .header-settings[data-slot=\"button\"]:hover,\r\n:scope[data-theme=\"midnight\"] .header-settings[data-slot=\"button\"][aria-pressed=\"true\"] {\r\n background: var(--accent) !important;\r\n border-color: var(--accent) !important;\r\n color: #101522 !important;\r\n}\r\n\r\n.metric strong { color: var(--accent); }\r\n.status-chip.good {\r\n border-color: color-mix(in srgb, var(--accent) 25%, var(--border-soft));\r\n background: color-mix(in srgb, var(--accent) 11%, var(--surface));\r\n color: var(--accent);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .status-chip {\r\n background: #1d2638;\r\n border-color: #33405a;\r\n color: #b7c3dd;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .metric,\r\n:scope[data-theme=\"midnight\"] .mini-signal {\r\n background: #1d2638;\r\n border-color: #33405a;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .metric span,\r\n:scope[data-theme=\"midnight\"] .mini-signal {\r\n color: #b7c3dd;\r\n}\r\n\r\n.language-panel {\r\n max-width: 520px;\r\n}\r\n\r\n.language-field {\r\n display: block;\r\n width: 100%;\r\n margin-top: 18px;\r\n}\r\n\r\n.language-select-trigger { width: 100%; }\r\n\r\n/* Capture dialog follows the active theme too; it is a full product surface,\r\n not a separate light-mode form. */\r\n.capture-modal {\r\n border-color: var(--border);\r\n background: var(--surface);\r\n color: var(--text);\r\n}\r\n\r\n.capture-modal-backdrop {\r\n background: color-mix(in srgb, var(--bg) 78%, transparent);\r\n}\r\n\r\n.capture-modal .record-mode-shell {\r\n border-color: var(--border-soft);\r\n background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 84%, transparent), var(--surface-muted));\r\n}\r\n\r\n.capture-modal .record-mode-current strong,\r\n.capture-modal .capture-top,\r\n.capture-modal .capture-top input,\r\n.capture-modal .capture-console textarea,\r\n.capture-modal .capture-bottom input,\r\n.capture-modal .scene-fields input,\r\n.capture-modal .scene-fields select {\r\n color: var(--text);\r\n}\r\n\r\n.capture-modal .record-mode-current span,\r\n.capture-modal .capture-hint {\r\n color: var(--muted);\r\n}\r\n\r\n.capture-modal .record-mode-tabs button {\r\n border-color: var(--border-soft);\r\n background: var(--surface);\r\n color: var(--muted);\r\n}\r\n\r\n.capture-modal .record-mode-tabs button:hover,\r\n.capture-modal .record-mode-tabs button.active {\r\n background: var(--accent);\r\n border-color: var(--accent);\r\n color: var(--surface);\r\n}\r\n\r\n.capture-modal .capture-console textarea,\r\n.capture-modal .scene-panel,\r\n.capture-modal .capture-bottom input,\r\n.capture-modal .scene-fields input,\r\n.capture-modal .scene-fields select {\r\n border-color: var(--border-soft);\r\n background: var(--surface-muted);\r\n}\r\n\r\n.capture-modal .capture-bottom .clipboard-action {\r\n background: var(--surface-muted);\r\n color: var(--text);\r\n}\r\n\r\n.capture-modal .capture-bottom button[type=\"submit\"] {\r\n background: var(--accent);\r\n border-color: var(--accent);\r\n color: var(--surface);\r\n}\r\n\r\n.capture-modal .capture-bottom button[type=\"submit\"]:hover {\r\n background: var(--primary-hover);\r\n border-color: var(--primary-hover);\r\n}\r\n\r\n.feed-controls {\r\n border: 0 !important;\r\n padding: 0 !important;\r\n background: transparent !important;\r\n box-shadow: none !important;\r\n}\r\n\r\n/* The search field is one control: the wrapper owns the surface and the\r\n input inside it stays borderless. */\r\n.feed-controls .search-input {\r\n min-height: 46px;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 18px;\r\n background: var(--surface);\r\n padding: 0 16px;\r\n box-shadow: 0 4px 12px rgba(25, 28, 35, 0.05);\r\n}\r\n\r\n.feed-controls .search-input:focus-within {\r\n border-color: #b7d8cc;\r\n box-shadow: 0 0 0 3px rgba(55, 132, 106, 0.11), 0 4px 12px rgba(25, 28, 35, 0.04);\r\n}\r\n\r\n.feed-controls .search-input input {\r\n min-height: 44px !important;\r\n height: 44px !important;\r\n border: 0 !important;\r\n border-radius: 0 !important;\r\n background: transparent !important;\r\n padding: 0 !important;\r\n box-shadow: none !important;\r\n}\r\n\r\n.feed-controls .search-input input:focus,\r\n.feed-controls .search-input input:focus-visible {\r\n outline: none !important;\r\n border: 0 !important;\r\n box-shadow: none !important;\r\n}\r\n\r\n/* Component utility classes must not recreate a second search-field frame. */\r\n:scope .feed-controls .search-input > input,\r\n:scope .feed-controls .search-input > input:focus,\r\n:scope .feed-controls .search-input > input:focus-visible {\r\n border: 0 !important;\r\n outline: none !important;\r\n border-radius: 0 !important;\r\n background: transparent !important;\r\n box-shadow: none !important;\r\n}\r\n\r\n:scope .feed-controls .search-input:focus-within {\r\n border-color: #b7d8cc !important;\r\n box-shadow: none !important;\r\n}\r\n\r\n[data-slot=\"input\"]:not([type=\"checkbox\"]):not([type=\"date\"]):not([type=\"file\"]) {\r\n min-height: 46px !important;\r\n height: 46px !important;\r\n}\r\n\r\n/* Visible interaction state for every text field and status selector. */\r\n[data-slot=\"input\"]:not([type=\"checkbox\"]):not([type=\"date\"]):not([type=\"file\"]):focus,\r\n[data-slot=\"textarea\"]:focus,\r\n.inline-trigger:focus,\r\n.source-trigger:focus,\r\n.advanced-filters input:focus,\r\n.advanced-filters select:focus,\r\n.scene-fields select:focus {\r\n outline: none;\r\n border-color: #b7d8cc !important;\r\n box-shadow: 0 0 0 3px rgba(55, 132, 106, 0.11), 0 4px 12px rgba(25, 28, 35, 0.04) !important;\r\n}\r\n\r\n[data-slot=\"input\"]:not([type=\"checkbox\"]):not([type=\"date\"]):not([type=\"file\"]):focus-visible,\r\n[data-slot=\"textarea\"]:focus-visible,\r\n.inline-trigger:focus-visible,\r\n.source-trigger:focus-visible {\r\n outline: none;\r\n}\r\n\r\n.inline-trigger.open,\r\n.source-trigger.open {\r\n border-color: #b7d8cc !important;\r\n background: var(--surface) !important;\r\n box-shadow: 0 0 0 3px rgba(55, 132, 106, 0.11), 0 4px 12px rgba(25, 28, 35, 0.04) !important;\r\n}\r\n\r\n/* Selectors and status controls are inputs too: give them the same card-like\r\n surface as the search field instead of the older pill treatment. */\r\n.inline-trigger,\r\n.source-trigger,\r\n.advanced-filters input,\r\n.advanced-filters select,\r\n.scene-fields select {\r\n min-height: 46px;\r\n height: 46px;\r\n border: 1px solid var(--border-soft) !important;\r\n border-radius: 18px !important;\r\n background: var(--surface) !important;\r\n color: var(--text);\r\n padding: 0 16px;\r\n font-size: 16px;\r\n font-weight: 400;\r\n box-shadow: 0 4px 12px rgba(25, 28, 35, 0.05);\r\n}\r\n\r\n.command-bar {\r\n border: 0;\r\n padding: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n}\r\n\r\n/*\r\n * Radius system\r\n *\r\n * Everyday controls, tags, cards, panels, menus and dialogs share one corner\r\n * language. Full pills are intentionally reserved for status indicators and\r\n * compact metadata; circular icons remain circular through their own sizing.\r\n */\r\n:where(\r\n [data-slot=\"button\"],\r\n [data-slot=\"input\"],\r\n [data-slot=\"textarea\"],\r\n [data-slot=\"badge\"],\r\n .status-chip,\r\n .record-nav-list button,\r\n .shortcut-list button,\r\n .utility-nav-button,\r\n .source-trigger,\r\n .inline-trigger,\r\n .record-mode-select,\r\n .capture-console textarea,\r\n .capture-bottom input,\r\n .sync-grid input,\r\n .token-input,\r\n .drawer-grid input,\r\n .drawer-grid textarea,\r\n .tag-stack button,\r\n .memory-tags button,\r\n .workspace-nav,\r\n .console-main,\r\n .feed-section,\r\n .capture-console,\r\n .record-mode-shell,\r\n .scene-panel,\r\n .search-row,\r\n .command-bar,\r\n .advanced-filters,\r\n .console-side,\r\n .utility-drawer,\r\n .capture-modal,\r\n .side-card,\r\n .metric,\r\n .mini-signal,\r\n .notice,\r\n .memory-card,\r\n .empty-feed,\r\n .settings-page,\r\n .drawer-summary,\r\n .drawer-fields,\r\n .ui-select-content,\r\n .ui-select-item,\r\n .ui-dialog-content,\r\n .ui-dropdown-content,\r\n .ui-dropdown-item,\r\n .ui-dropdown-item .bookmark-import\r\n) {\r\n border-radius: var(--radius-ui) !important;\r\n}\r\n\r\n/* The selection toolbar uses one consistent 42px control height. */\r\n.context-actions .inline-trigger,\r\n.context-actions > [data-slot=\"button\"] {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n height: 44px !important;\r\n min-height: 44px !important;\r\n padding-top: 0 !important;\r\n padding-bottom: 0 !important;\r\n line-height: 1 !important;\r\n border-radius: var(--radius-ui) !important;\r\n}\r\n\r\n/* Selected rows keep their background state without the extra left rail. */\r\n.memory-card.selected {\r\n box-shadow: none !important;\r\n}\r\n\r\n/* Compact actions and metadata use the same radius as the main controls. */\r\n:where(\r\n .feed-actions [data-slot=\"button\"],\r\n .feed-actions .bookmark-import,\r\n .memory-category [data-slot=\"button\"],\r\n .memory-life [data-slot=\"badge\"],\r\n .card-actions [data-slot=\"button\"],\r\n .context-actions .inline-trigger,\r\n .context-actions > [data-slot=\"button\"],\r\n .header-settings[data-slot=\"button\"]\r\n) {\r\n border-radius: var(--radius-ui) !important;\r\n}\r\n\r\n/* Keep the feed toolbar to two rows on medium desktop widths:\r\n actions on the first row, all search/filter controls on the second. */\r\n@container mory (min-width: 900px) and (max-width: 1180px) {\r\n .section-heading {\r\n flex-wrap: nowrap;\r\n gap: 10px;\r\n }\r\n\r\n .section-heading > div:first-child {\r\n flex: 1 1 auto;\r\n }\r\n\r\n .feed-actions {\r\n flex: 0 0 auto;\r\n gap: 6px;\r\n }\r\n\r\n .feed-controls {\r\n display: grid !important;\r\n grid-template-columns: minmax(190px, 1fr) 132px 132px 150px 150px !important;\r\n gap: 6px;\r\n align-items: center;\r\n }\r\n\r\n .feed-controls .command-bar {\r\n display: contents !important;\r\n }\r\n\r\n .feed-controls .search-input {\r\n grid-column: 1 !important;\r\n min-width: 0;\r\n }\r\n\r\n .feed-controls .command-bar > .source-trigger {\r\n grid-column: 2 !important;\r\n min-width: 0 !important;\r\n width: 100%;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n display: contents !important;\r\n }\r\n\r\n .feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n min-width: 0;\r\n width: 100%;\r\n }\r\n\r\n .feed-controls .advanced-filters > span {\r\n display: none;\r\n }\r\n}\r\n\r\n/* The in-app browser can report a narrow CSS viewport even on a wide screen.\r\n Keep the complete feed control set on one compact, non-wrapping row. */\r\n@container mory (min-width: 520px) and (max-width: 899px) {\r\n .feed-controls {\r\n display: grid !important;\r\n grid-template-columns: minmax(150px, 1fr) 112px 112px 132px 132px !important;\r\n gap: 6px;\r\n align-items: center;\r\n overflow: hidden;\r\n }\r\n\r\n .feed-controls .command-bar,\r\n .feed-controls .advanced-filters {\r\n display: contents !important;\r\n }\r\n\r\n .feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger,\r\n .feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n min-width: 0 !important;\r\n width: 100%;\r\n }\r\n\r\n .feed-controls .advanced-filters > span {\r\n display: none;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .source-trigger,\r\n .feed-controls .advanced-filters .inline-trigger,\r\n .feed-controls .advanced-filters [data-slot=\"input\"] {\r\n min-height: 40px;\r\n height: 40px;\r\n padding-inline: 10px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n}\r\n\r\n@container mory (max-width: 519px) {\r\n .feed-controls {\r\n display: grid !important;\r\n grid-template-columns: minmax(112px, 1.35fr) repeat(4, minmax(58px, 1fr)) !important;\r\n gap: 4px;\r\n padding-inline: 4px;\r\n overflow: hidden;\r\n }\r\n\r\n .feed-controls .command-bar,\r\n .feed-controls .advanced-filters {\r\n display: contents !important;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger,\r\n .feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n min-width: 0 !important;\r\n width: 100%;\r\n }\r\n\r\n .feed-controls .advanced-filters > span {\r\n display: none;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .source-trigger,\r\n .feed-controls .advanced-filters .inline-trigger,\r\n .feed-controls .advanced-filters [data-slot=\"input\"] {\r\n min-height: 38px;\r\n height: 38px;\r\n padding-inline: 6px;\r\n font-size: 11px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .feed-controls .search-input svg {\r\n flex: 0 0 auto;\r\n }\r\n}\r\n\r\n/* The record navigation belongs in the desktop rail; hide it on smaller screens. */\r\n@container mory (max-width: 1180px) {\r\n .workspace-layout {\r\n display: block;\r\n }\r\n\r\n .workspace-nav {\r\n display: none !important;\r\n }\r\n\r\n .workspace-main {\r\n width: 100%;\r\n }\r\n}\r\n\r\n/* Radix Select adds a visually hidden native select; keep it out of the action grid. */\r\n.capture-modal .capture-bottom > select[aria-hidden=\"true\"] {\r\n display: none !important;\r\n}\r\n\r\n@media (min-width: 900px) and (max-width: 1180px) and (orientation: portrait) {\r\n .memory-list-header,\r\n .memory-card {\r\n grid-template-columns: 30px 82px 108px minmax(170px, 1fr) 100px 88px;\r\n gap: 8px;\r\n }\r\n\r\n .memory-list-header.selection-mode,\r\n .memory-card.selection-mode {\r\n grid-template-columns: 30px 82px 108px minmax(170px, 1fr) 100px 88px;\r\n }\r\n}\r\n\r\n@container mory (max-width: 780px) {\r\n .memory-card {\r\n grid-template-columns: 28px minmax(0, 1fr) auto;\r\n }\r\n\r\n .memory-card .memory-time {\r\n grid-column: 2;\r\n }\r\n\r\n .memory-card .memory-entity {\r\n grid-column: 3;\r\n }\r\n}\r\n\r\n@media (min-width: 520px) and (max-width: 760px) and (orientation: portrait) {\r\n .workspace-nav .all-types-list {\r\n grid-template-columns: repeat(5, minmax(0, 1fr));\r\n gap: 2px;\r\n }\r\n\r\n .workspace-nav .all-types-list button {\r\n min-height: 34px;\r\n padding-inline: 7px;\r\n font-size: 12px;\r\n }\r\n\r\n .workspace-nav .all-types-list button strong {\r\n display: none;\r\n }\r\n\r\n .feed-controls {\r\n grid-template-columns: minmax(0, 1fr) 140px;\r\n gap: 7px;\r\n padding: 8px;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > button.source-trigger {\r\n grid-column: auto;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-template-columns: repeat(4, minmax(0, 1fr));\r\n gap: 6px;\r\n align-items: center;\r\n }\r\n\r\n .feed-controls .advanced-filters > * {\r\n width: 100%;\r\n }\r\n\r\n .feed-controls .advanced-filters .inline-trigger,\r\n .feed-controls .advanced-filters [data-slot=\"input\"] {\r\n min-height: 36px;\r\n height: 36px;\r\n padding-inline: 8px;\r\n font-size: 11px;\r\n }\r\n\r\n .section-heading {\r\n grid-template-columns: minmax(0, 1fr) auto;\r\n }\r\n\r\n .section-heading .feed-actions {\r\n width: auto;\r\n display: flex;\r\n flex-wrap: nowrap;\r\n gap: 5px;\r\n }\r\n\r\n .section-heading .feed-actions [data-slot=\"button\"],\r\n .section-heading .feed-actions .bookmark-import {\r\n flex: 0 1 auto;\r\n min-height: 36px;\r\n padding-inline: 8px;\r\n font-size: 11px;\r\n }\r\n}\r\n\r\n@media (max-width: 760px) and (orientation: portrait) {\r\n .feed-summary {\r\n display: none;\r\n }\r\n\r\n .empty-feed {\r\n min-height: 220px;\r\n padding: 28px 18px;\r\n }\r\n}\r\n\r\n@media (min-width: 520px) and (max-width: 1180px) and (orientation: portrait) {\r\n .feed-controls {\r\n grid-template-columns: minmax(0, 1fr) 176px;\r\n gap: 5px;\r\n padding: 6px;\r\n overflow: visible;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .source-trigger {\r\n min-height: 40px;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n gap: 5px;\r\n padding: 0;\r\n }\r\n\r\n .feed-controls .advanced-filters .inline-trigger,\r\n .feed-controls .advanced-filters [data-slot=\"input\"] {\r\n min-height: 34px;\r\n height: 34px;\r\n }\r\n\r\n .source-trigger {\r\n min-width: 0;\r\n overflow: hidden;\r\n padding-inline: 12px;\r\n font-size: 13px;\r\n }\r\n\r\n .source-trigger [data-slot=\"select-value\"] {\r\n min-width: 0;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .section-heading {\r\n grid-template-columns: minmax(190px, 1fr) auto;\r\n gap: 8px;\r\n margin-top: 16px;\r\n }\r\n\r\n .section-heading h2 {\r\n font-size: clamp(23px, 3.2vw, 28px);\r\n white-space: nowrap;\r\n }\r\n\r\n .section-heading .feed-actions [data-slot=\"button\"],\r\n .section-heading .feed-actions .bookmark-import {\r\n min-width: 0;\r\n padding-inline: 9px;\r\n font-size: 12px;\r\n }\r\n}\r\n\r\n/* Final compact feed hierarchy: search, refine, act. */\r\n.feed-summary {\r\n display: none;\r\n}\r\n\r\n.section-heading {\r\n margin-top: 16px;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.section-heading p {\r\n margin-top: 2px;\r\n}\r\n\r\n.feed-actions .import-action,\r\n.feed-actions .export-action {\r\n display: inline-grid !important;\r\n place-items: center;\r\n flex: 0 0 38px !important;\r\n width: 38px !important;\r\n min-width: 38px !important;\r\n height: 38px;\r\n min-height: 38px;\r\n padding: 0 !important;\r\n overflow: hidden;\r\n font-size: 0 !important;\r\n line-height: 0;\r\n white-space: nowrap;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n vertical-align: middle;\r\n}\r\n\r\n.feed-actions .import-action svg,\r\n.feed-actions .export-action svg {\r\n display: block;\r\n width: 16px;\r\n height: 16px;\r\n flex: 0 0 auto;\r\n margin: 0 !important;\r\n transform: none !important;\r\n}\r\n\r\n.section-heading .feed-actions {\r\n margin-left: auto;\r\n align-self: center;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n@media (max-width: 760px) and (orientation: portrait) {\r\n .feed-controls {\r\n border-radius: 14px;\r\n }\r\n\r\n .section-heading h2 {\r\n font-size: 24px;\r\n }\r\n\r\n .section-heading .feed-actions [data-slot=\"button\"],\r\n .section-heading .feed-actions .bookmark-import {\r\n width: 36px;\r\n min-width: 36px;\r\n padding: 0;\r\n font-size: 0;\r\n }\r\n\r\n .section-heading .feed-actions .capture-cta {\r\n width: auto;\r\n min-width: 36px;\r\n padding-inline: 10px;\r\n font-size: 0;\r\n }\r\n}\r\n\r\n/* Keep controls sized to their meaning instead of stretching across the canvas. */\r\n.feed-controls {\r\n grid-template-columns: minmax(320px, 1fr) 154px;\r\n}\r\n\r\n.feed-controls .advanced-filters {\r\n grid-template-columns: 150px 176px 176px;\r\n justify-content: start;\r\n}\r\n\r\n.feed-controls .advanced-filters .inline-trigger,\r\n.feed-controls .advanced-filters [data-slot=\"input\"] {\r\n min-width: 0;\r\n}\r\n\r\n.section-heading {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.feed-section > .section-heading {\r\n margin-top: 0;\r\n margin-bottom: 14px;\r\n}\r\n\r\n.section-heading > div:first-child {\r\n min-width: 0;\r\n}\r\n\r\n/* Selected-memory actions belong to the feed toolbar, beside the import and\r\n export controls, instead of taking up a separate row below the list. */\r\n.section-heading > .context-pack {\r\n display: block;\r\n margin: 0;\r\n margin-left: auto;\r\n padding: 0;\r\n border: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n}\r\n\r\n.section-heading > .context-pack .context-pack-main {\r\n display: none;\r\n}\r\n\r\n.section-heading > .context-pack .context-actions {\r\n align-items: center;\r\n gap: 7px;\r\n flex-wrap: nowrap;\r\n}\r\n\r\n.section-heading > .context-pack + .feed-actions {\r\n margin-left: 0;\r\n}\r\n\r\n.feed-capture-button {\r\n min-height: 42px;\r\n padding-inline: 16px;\r\n}\r\n\r\n@media (max-width: 1180px) and (orientation: portrait) {\r\n .feed-controls {\r\n grid-template-columns: minmax(0, 1fr) 150px;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n }\r\n}\r\n\r\n@media (max-width: 760px) and (orientation: portrait) {\r\n .feed-controls {\r\n grid-template-columns: minmax(0, 1fr) 132px;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n }\r\n\r\n .feed-controls .advanced-filters .inline-trigger,\r\n .feed-controls .advanced-filters [data-slot=\"input\"] {\r\n padding-inline: 6px;\r\n font-size: 10px;\r\n }\r\n}\r\n\r\n@media (max-width: 520px) and (orientation: portrait) {\r\n .feed-controls {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n}\r\n\r\n/* Settings page layout: one spacing system, one readable working width. */\r\n.settings-page {\r\n min-height: calc(100vh - 92px);\r\n padding: clamp(24px, 3.5vw, 48px) clamp(22px, 4vw, 64px) 56px;\r\n}\r\n\r\n.settings-page-header {\r\n max-width: 1180px;\r\n padding-bottom: 26px;\r\n}\r\n\r\n.settings-page-header h1 {\r\n font-size: clamp(34px, 4vw, 52px);\r\n line-height: 1;\r\n}\r\n\r\n.settings-page-header p {\r\n max-width: 620px;\r\n font-size: 16px;\r\n line-height: 1.5;\r\n}\r\n\r\n.settings-page > [data-slot=\"tabs\"],\r\n.settings-page > .settings-tabs,\r\n.settings-page > .settings-select,\r\n.settings-content {\r\n width: min(100%, 1180px);\r\n}\r\n\r\n.settings-tabs {\r\n gap: 8px;\r\n padding-bottom: 16px;\r\n}\r\n\r\n.settings-tabs button {\r\n min-height: 40px;\r\n padding-inline: 16px;\r\n font-size: 14px;\r\n}\r\n\r\n.settings-content {\r\n max-width: 1180px;\r\n padding-top: 28px;\r\n}\r\n\r\n.sync-card {\r\n width: 100%;\r\n max-width: none;\r\n}\r\n\r\n.sync-card .card-title {\r\n margin-bottom: 22px;\r\n}\r\n\r\n.setup-flow-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n min-height: 46px;\r\n gap: 8px;\r\n border-radius: 10px;\r\n border: 1px solid var(--border);\r\n background: var(--surface);\r\n color: var(--text);\r\n font-size: 14px;\r\n font-weight: 800;\r\n text-decoration: none;\r\n white-space: nowrap;\r\n}\r\n\r\n.setup-flow-button:hover {\r\n background: var(--accent-soft);\r\n}\r\n\r\n.sync-card .card-title h3 {\r\n font-size: 22px;\r\n}\r\n\r\n.sync-config-section,\r\n.sync-security-section {\r\n border-radius: 18px;\r\n padding: 22px;\r\n background: var(--surface-muted);\r\n}\r\n\r\n.sync-config-section {\r\n grid-template-columns: 1fr;\r\n gap: 18px;\r\n}\r\n\r\n.sync-config-section .language-field {\r\n display: grid;\r\n grid-template-columns: 190px minmax(0, 1fr);\r\n align-items: center;\r\n gap: 22px;\r\n margin: 0;\r\n}\r\n\r\n.sync-config-section .language-field > span,\r\n.sync-field > span {\r\n color: var(--muted);\r\n font-size: 13px;\r\n font-weight: 800;\r\n}\r\n\r\n.sync-grid {\r\n grid-column: 1 / -1;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 14px;\r\n}\r\n\r\n.sync-field {\r\n display: grid;\r\n gap: 8px;\r\n min-width: 0;\r\n}\r\n\r\n.sync-field input,\r\n.sync-config-section .ui-select-trigger,\r\n.sync-security-section input {\r\n width: 100%;\r\n min-width: 0;\r\n min-height: 46px;\r\n}\r\n\r\n.sync-security-section {\r\n grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.75fr);\r\n gap: 16px 18px;\r\n margin-top: 16px;\r\n}\r\n\r\n.sync-auto-option {\r\n margin: 16px 0;\r\n min-height: 68px;\r\n padding: 14px 18px;\r\n border-radius: 14px;\r\n}\r\n\r\n.sync-actions {\r\n gap: 10px;\r\n padding-top: 6px;\r\n}\r\n\r\n.sync-actions .primary-action {\r\n min-height: 46px;\r\n border-radius: 12px;\r\n}\r\n\r\n.sync-actions button:not(.primary-action) {\r\n width: 46px;\r\n min-height: 46px;\r\n border-radius: 12px;\r\n}\r\n\r\n@container mory (max-width: 760px) {\r\n .settings-page {\r\n min-height: 0;\r\n padding: 22px 16px 32px;\r\n }\r\n\r\n .settings-page-header {\r\n padding-bottom: 20px;\r\n }\r\n\r\n .settings-tabs {\r\n overflow-x: auto;\r\n scrollbar-width: none;\r\n }\r\n\r\n .settings-tabs::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .sync-config-section,\r\n .sync-security-section {\r\n grid-template-columns: 1fr;\r\n padding: 16px;\r\n }\r\n\r\n .sync-config-section .language-field {\r\n grid-template-columns: 1fr;\r\n gap: 8px;\r\n }\r\n\r\n .sync-config-section .sync-section-heading,\r\n .sync-security-section .sync-section-heading {\r\n margin-bottom: 2px;\r\n }\r\n\r\n .sync-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n\r\n/* Compact settings density: keep the form readable without letting it become\r\n a full-width, oversized stack on large screens. */\r\n.settings-page {\r\n min-height: 0;\r\n padding: 24px 32px 36px;\r\n}\r\n\r\n.settings-page-header,\r\n.settings-page > [data-slot=\"tabs\"],\r\n.settings-page > .settings-tabs,\r\n.settings-page > .settings-select,\r\n.settings-content {\r\n width: min(100%, 980px);\r\n}\r\n\r\n.settings-page-header {\r\n padding-bottom: 18px;\r\n}\r\n\r\n.settings-page-header h1 {\r\n font-size: clamp(32px, 3.4vw, 44px);\r\n}\r\n\r\n.settings-page-header p {\r\n margin-top: 6px;\r\n font-size: 14px;\r\n}\r\n\r\n.settings-tabs {\r\n padding-bottom: 12px;\r\n}\r\n\r\n.settings-tabs button {\r\n min-height: 36px;\r\n padding-inline: 14px;\r\n font-size: 13px;\r\n}\r\n\r\n.settings-content {\r\n padding-top: 18px;\r\n}\r\n\r\n.sync-card .card-title {\r\n margin-bottom: 16px;\r\n}\r\n\r\n.sync-card .card-title h3 {\r\n font-size: 19px;\r\n}\r\n\r\n.sync-config-section,\r\n.sync-security-section {\r\n padding: 16px;\r\n border-radius: 16px;\r\n}\r\n\r\n.sync-config-section {\r\n grid-template-columns: 170px minmax(0, 1fr);\r\n gap: 12px 16px;\r\n}\r\n\r\n.sync-config-section .sync-section-heading,\r\n.sync-security-section .sync-section-heading {\r\n margin-bottom: 0;\r\n}\r\n\r\n.sync-config-section .language-field {\r\n grid-column: auto;\r\n grid-template-columns: 1fr;\r\n gap: 6px;\r\n align-self: end;\r\n}\r\n\r\n.sync-grid {\r\n grid-column: auto;\r\n gap: 10px;\r\n}\r\n\r\n/* Keep the repository connection row spanning the full left work area. */\r\n.sync-config-section .sync-grid {\r\n grid-column: 1 / -1;\r\n width: 100%;\r\n}\r\n\r\n.repository-connect-row {\r\n grid-column: 1 / -1;\r\n width: 100%;\r\n display: flex;\r\n gap: 10px;\r\n align-items: center;\r\n margin-top: 14px;\r\n}\r\n\r\n.repository-connect-row input {\r\n min-width: 0;\r\n flex: 1;\r\n}\r\n\r\n.repository-connect-row button {\r\n flex: 0 0 auto;\r\n white-space: nowrap;\r\n}\r\n\r\n.connection-access-row {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 10px;\r\n}\r\n\r\n.connection-access-row .sync-field {\r\n min-width: 0;\r\n}\r\n\r\n.check-connection-button {\r\n width: 100%;\r\n min-height: 44px;\r\n justify-content: center;\r\n}\r\n\r\n.check-connection-button:disabled {\r\n cursor: not-allowed;\r\n opacity: 0.55;\r\n}\r\n\r\n.sync-connection-card .sync-config-section {\r\n grid-template-columns: minmax(0, 1fr);\r\n}\r\n\r\n.sync-connection-card .sync-config-section .language-field,\r\n.sync-connection-card .sync-config-section .repository-url-field,\r\n.sync-connection-card .sync-config-section .connection-access-row,\r\n.sync-connection-card .sync-config-section .check-connection-button,\r\n.sync-connection-card .sync-config-section .sync-note,\r\n.sync-connection-card .sync-config-section .sync-warning {\r\n grid-column: 1 / -1;\r\n}\r\n\r\n@container mory (max-width: 520px) {\r\n .connection-access-row {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n\r\n.sync-field {\r\n gap: 5px;\r\n}\r\n\r\n.sync-config-section .ui-select-trigger,\r\n.sync-field input,\r\n.sync-security-section input {\r\n min-height: 42px;\r\n height: 42px;\r\n}\r\n\r\n.sync-security-section {\r\n gap: 10px 14px;\r\n margin-top: 10px;\r\n}\r\n\r\n/* Both work areas start on the same baseline. */\r\n.sync-column-access .sync-security-section {\r\n margin-top: 0;\r\n}\r\n\r\n.sync-auto-option {\r\n min-height: 56px;\r\n margin: 10px 0;\r\n padding: 10px 14px;\r\n}\r\n\r\n.sync-actions {\r\n padding-top: 2px;\r\n}\r\n\r\n.sync-actions .primary-action,\r\n.sync-actions button:not(.primary-action) {\r\n min-height: 42px;\r\n}\r\n\r\n.sync-actions button:not(.primary-action) {\r\n width: 42px;\r\n}\r\n\r\n@container mory (max-width: 760px) {\r\n .settings-page {\r\n padding: 18px 16px 28px;\r\n }\r\n\r\n .sync-config-section {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .sync-config-section .language-field,\r\n .sync-grid {\r\n grid-column: 1 / -1;\r\n }\r\n}\r\n\r\n/* Flatten the feed into one workspace surface instead of nested cards. */\r\n.feed-section {\r\n padding: 18px;\r\n}\r\n\r\n.feed-controls {\r\n border: 0;\r\n border-bottom: 1px solid var(--border-soft);\r\n border-radius: 0;\r\n background: transparent;\r\n padding: 0 0 14px;\r\n box-shadow: none;\r\n}\r\n\r\n.memory-list-header {\r\n border: 0;\r\n border-bottom: 1px solid var(--border-soft);\r\n border-radius: 0;\r\n background: transparent;\r\n}\r\n\r\n.memory-grid {\r\n border: 0;\r\n border-radius: 0;\r\n background: transparent;\r\n}\r\n\r\n.memory-pagination {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n gap: 16px;\r\n padding: 14px 4px 2px;\r\n color: var(--muted);\r\n font-size: 13px;\r\n}\r\n\r\n.page-size-options,\r\n.page-navigation {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-left: 4px;\r\n padding-left: 16px;\r\n border-left: 1px solid var(--border-soft);\r\n}\r\n\r\n.page-size-options button,\r\n.page-navigation button {\r\n min-width: 34px;\r\n min-height: 34px;\r\n padding-inline: 9px;\r\n border-radius: 9px;\r\n}\r\n\r\n.page-navigation > span {\r\n min-width: 58px;\r\n text-align: center;\r\n}\r\n\r\n@container mory (max-width: 560px) {\r\n .memory-pagination {\r\n align-items: center;\r\n flex-direction: column;\r\n }\r\n\r\n .page-navigation {\r\n margin-left: 0;\r\n padding-left: 0;\r\n border-left: 0;\r\n }\r\n}\r\n\r\n.memory-card {\r\n border-radius: 0;\r\n background: transparent;\r\n}\r\n\r\n.memory-card:hover {\r\n background: var(--surface-muted);\r\n}\r\n\r\n.memory-card.selected {\r\n background: #edf8f2;\r\n}\r\n\r\n.context-pack {\r\n margin-top: 12px;\r\n grid-template-columns: 1fr;\r\n padding: 8px;\r\n border-radius: 12px;\r\n}\r\n\r\n.context-pack-main {\r\n display: none;\r\n}\r\n\r\n.context-actions {\r\n justify-content: flex-end;\r\n}\r\n\r\n.ui-dropdown-content {\r\n display: grid;\r\n width: 190px;\r\n gap: 2px;\r\n}\r\n\r\n.ui-dropdown-content .ui-dropdown-item {\r\n width: 100%;\r\n min-width: 0;\r\n display: flex;\r\n}\r\n\r\n.ui-dropdown-content .bookmark-import {\r\n width: 100%;\r\n min-width: 0;\r\n display: flex;\r\n justify-content: flex-start;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n/* Import entries should be regular dropdown rows, not action pills. */\r\n.ui-dropdown-content {\r\n width: 220px;\r\n padding: 6px;\r\n gap: 2px;\r\n border-radius: 14px;\r\n}\r\n\r\n.ui-dropdown-content .ui-dropdown-item,\r\n.ui-dropdown-content .bookmark-import {\r\n min-height: 36px;\r\n height: 36px;\r\n padding: 0 10px;\r\n border: 0;\r\n border-radius: 9px;\r\n background: transparent;\r\n box-shadow: none;\r\n font-size: 13px;\r\n font-weight: 750;\r\n}\r\n\r\n.ui-dropdown-content .ui-dropdown-item[data-highlighted],\r\n.ui-dropdown-content .bookmark-import:hover {\r\n background: var(--surface-muted);\r\n}\r\n\r\n.header-settings[data-slot=\"button\"] {\r\n width: 150px;\r\n height: 34px;\r\n min-height: 34px;\r\n padding-inline: 12px;\r\n border-radius: 999px;\r\n border: 1px solid var(--border);\r\n background: rgba(255, 255, 255, 0.72);\r\n color: var(--muted);\r\n font-size: 13px;\r\n font-weight: 800;\r\n justify-content: center;\r\n}\r\n\r\n.header-actions > .status-chip {\r\n width: 150px;\r\n justify-content: center;\r\n}\r\n\r\n.header-actions {\r\n flex: 0 0 auto;\r\n align-items: center;\r\n}\r\n\r\n.header-settings[data-slot=\"button\"],\r\n.header-actions > .status-chip {\r\n box-sizing: border-box;\r\n flex: 0 0 auto;\r\n width: auto;\r\n height: 34px;\r\n min-height: 34px;\r\n}\r\n\r\n/* Category and lifecycle markers use the same compact pill language. */\r\n.memory-category > [data-slot=\"button\"],\r\n.memory-life > [data-slot=\"badge\"] {\r\n width: auto;\r\n min-width: 0;\r\n min-height: 26px;\r\n height: 26px;\r\n padding: 0 10px;\r\n border-radius: 999px;\r\n line-height: 1;\r\n}\r\n\r\n/* Selection actions stay as three compact controls on the right. */\r\n.context-pack {\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n margin-top: 10px;\r\n padding: 0;\r\n border: 0;\r\n border-radius: 0;\r\n background: transparent;\r\n}\r\n\r\n.context-pack-main {\r\n display: none;\r\n}\r\n\r\n.context-actions {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n gap: 8px;\r\n}\r\n\r\n.context-actions .inline-trigger,\r\n.context-actions > [data-slot=\"button\"] {\r\n width: auto;\r\n min-width: 0;\r\n height: 34px;\r\n min-height: 34px;\r\n padding: 0 12px;\r\n border-radius: 999px;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Capture modal: one calm form, with the record type row kept compact. */\r\n.capture-modal {\r\n width: min(720px, calc(100vw - 28px));\r\n padding: 22px;\r\n border-radius: 22px;\r\n}\r\n\r\n.capture-modal-header {\r\n padding: 0 0 16px;\r\n}\r\n\r\n.capture-modal-header h2 {\r\n margin-top: 8px;\r\n font-size: clamp(26px, 3.2vw, 34px);\r\n line-height: 1.05;\r\n}\r\n\r\n.capture-modal .capture-console {\r\n display: grid;\r\n gap: 10px;\r\n padding-bottom: 14px;\r\n width: 100%;\r\n min-width: 0;\r\n box-sizing: border-box;\r\n background: transparent;\r\n box-shadow: none;\r\n}\r\n\r\n.capture-modal .capture-modal-body,\r\n.capture-modal-body {\r\n box-sizing: border-box;\r\n width: 100%;\r\n padding-right: 0;\r\n overflow-x: visible;\r\n}\r\n\r\n.capture-modal .capture-console > *,\r\n.capture-modal .capture-console input,\r\n.capture-modal .capture-console textarea,\r\n.capture-modal .capture-console button {\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n}\r\n\r\n.capture-modal .record-mode-shell {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 12px;\r\n margin: 0;\r\n padding: 0 0 8px;\r\n border: 0;\r\n border-bottom: 0;\r\n border-radius: 0;\r\n background: transparent;\r\n}\r\n\r\n.capture-modal .record-mode-current {\r\n padding: 0;\r\n}\r\n\r\n.capture-modal .record-mode-orb {\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 12px;\r\n box-shadow: none;\r\n}\r\n\r\n.capture-modal .record-mode-shell > .source-trigger {\r\n flex: 0 0 150px;\r\n width: 150px;\r\n min-height: 40px;\r\n height: 40px;\r\n border-radius: 999px;\r\n}\r\n\r\n.capture-modal .capture-top {\r\n min-height: 46px;\r\n display: block;\r\n padding: 0 2px;\r\n border: 0;\r\n box-shadow: none;\r\n background: transparent;\r\n}\r\n\r\n.capture-modal .capture-top input {\r\n height: 46px;\r\n font-size: 17px;\r\n width: 100%;\r\n padding: 0 16px;\r\n border: 1px solid var(--border-soft) !important;\r\n border-radius: 18px;\r\n box-shadow: 0 4px 10px rgba(25, 28, 35, 0.08) !important;\r\n background: var(--surface) !important;\r\n}\r\n\r\n.capture-modal .scene-panel {\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n background: transparent;\r\n}\r\n\r\n.capture-modal .capture-console > textarea {\r\n box-sizing: border-box;\r\n width: 100%;\r\n margin: 0;\r\n padding: 14px;\r\n min-height: 150px;\r\n}\r\n\r\n/* Keep the title and content fields visually consistent while preserving the\r\n larger editing area needed for longer memory content. */\r\n.capture-modal .capture-top input,\r\n.capture-modal .capture-console > textarea {\r\n border: 1px solid var(--border-soft) !important;\r\n border-radius: 18px;\r\n background: var(--surface-muted) !important;\r\n color: var(--text);\r\n box-shadow: 0 4px 10px rgba(25, 28, 35, 0.08) !important;\r\n font-size: 17px;\r\n font-weight: 400;\r\n}\r\n\r\n.capture-modal .capture-top input {\r\n height: 46px;\r\n padding: 14px;\r\n}\r\n\r\n.capture-modal .capture-console > textarea {\r\n line-height: 1.6;\r\n}\r\n\r\n/* Shared text-entry treatment: use the search field as the visual reference\r\n for every editable text field across the app. */\r\n[data-slot=\"input\"]:not([type=\"checkbox\"]):not([type=\"date\"]):not([type=\"file\"]),\r\n[data-slot=\"textarea\"] {\r\n min-height: 46px;\r\n border: 1px solid var(--border-soft) !important;\r\n border-radius: 18px;\r\n background: var(--surface) !important;\r\n color: var(--text);\r\n padding: 0 16px;\r\n font: inherit;\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n box-shadow: 0 4px 12px rgba(25, 28, 35, 0.05);\r\n}\r\n\r\n[data-slot=\"textarea\"] {\r\n min-height: 150px;\r\n padding: 14px 16px;\r\n resize: vertical;\r\n}\r\n\r\n.capture-modal .capture-bottom {\r\n margin-top: 0;\r\n grid-template-columns: 132px minmax(0, 1fr) 88px 108px;\r\n column-gap: 8px;\r\n background: transparent;\r\n box-shadow: none;\r\n}\r\n\r\n.capture-modal .capture-bottom > [data-slot=\"input\"] {\r\n box-sizing: border-box;\r\n min-width: 0;\r\n border: 1px solid var(--border-soft);\r\n border-radius: 999px;\r\n background: var(--surface-muted);\r\n}\r\n\r\n.capture-modal .capture-bottom > .source-trigger {\r\n box-sizing: border-box;\r\n min-width: 0 !important;\r\n width: 100% !important;\r\n}\r\n\r\n.capture-modal .capture-bottom > *,\r\n.capture-modal .capture-bottom > *::before,\r\n.capture-modal .capture-bottom > *::after {\r\n box-shadow: none !important;\r\n}\r\n\r\n/* Keep the dialog centered at every viewport size. */\r\n.capture-modal {\r\n top: 50% !important;\r\n left: 50% !important;\r\n transform: translate(-50%, -50%) !important;\r\n max-height: calc(100vh - 32px);\r\n}\r\n\r\n.capture-modal .capture-bottom input,\r\n.capture-modal .capture-bottom button,\r\n.capture-modal .source-trigger {\r\n min-height: 40px;\r\n height: 40px;\r\n border-radius: 999px;\r\n}\r\n\r\n@container mory (max-width: 600px) {\r\n .capture-modal {\r\n width: calc(100vw - 20px);\r\n padding: 16px;\r\n }\r\n\r\n .capture-modal-header h2 {\r\n font-size: 28px;\r\n }\r\n\r\n .capture-modal .record-mode-current span {\r\n display: none;\r\n }\r\n\r\n .capture-modal .record-mode-shell > .source-trigger {\r\n flex-basis: 132px;\r\n width: 132px;\r\n }\r\n\r\n .capture-modal .capture-bottom {\r\n display: grid !important;\r\n grid-template-columns: 108px minmax(0, 1fr) 78px 96px !important;\r\n flex-wrap: nowrap;\r\n gap: 5px;\r\n }\r\n\r\n .capture-modal .capture-bottom > .source-trigger {\r\n display: inline-flex;\r\n width: 100% !important;\r\n min-width: 0;\r\n padding-inline: 8px;\r\n }\r\n\r\n .capture-modal .capture-bottom > [data-slot=\"input\"] {\r\n width: 100% !important;\r\n min-width: 0;\r\n }\r\n\r\n.capture-modal .capture-bottom > button {\r\n width: 100% !important;\r\n min-width: 0;\r\n padding-inline: 6px;\r\n }\r\n}\r\n\r\n/* -------------------------------------------------------------------------\r\n Responsive stability layer\r\n\r\n The stylesheet above contains several historical layout passes. These\r\n rules are intentionally kept last so every viewport has one predictable\r\n layout contract: children may shrink, controls may wrap, and no component\r\n is allowed to create page-level horizontal overflow.\r\n ------------------------------------------------------------------------- */\r\n\r\n:scope,\r\n:scope,\r\n:scope {\r\n min-width: 0;\r\n max-width: 100%;\r\n}\r\n\r\n:scope {\r\n overflow-x: hidden;\r\n}\r\n\r\n.product-shell,\r\n.product-header,\r\n.workspace-layout,\r\n.workspace-main,\r\n.feed-section,\r\n.settings-page,\r\n.feed-section > *,\r\n.settings-page > * {\r\n min-width: 0;\r\n max-width: 100%;\r\n}\r\n\r\n.section-heading,\r\n.feed-controls,\r\n.memory-pagination,\r\n.settings-page-header,\r\n.sync-actions,\r\n.repository-connect-row {\r\n min-width: 0;\r\n}\r\n\r\n.section-heading > *,\r\n.feed-controls > *,\r\n.memory-card > *,\r\n.settings-page-header > * {\r\n min-width: 0;\r\n}\r\n\r\n.memory-content-cell,\r\n.memory-content-cell p,\r\n.memory-title-button,\r\n.memory-entity,\r\n.memory-category,\r\n.memory-life,\r\n.card-actions {\r\n min-width: 0;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n@container mory (max-width: 1180px) {\r\n .product-shell {\r\n padding-inline: clamp(10px, 2vw, 20px);\r\n }\r\n\r\n .workspace-layout {\r\n display: block;\r\n }\r\n\r\n .workspace-nav {\r\n display: none !important;\r\n }\r\n\r\n .workspace-main {\r\n width: 100%;\r\n }\r\n}\r\n\r\n@container mory (max-width: 900px) {\r\n .product-header {\r\n align-items: flex-start;\r\n }\r\n\r\n .header-actions {\r\n max-width: 55%;\r\n flex-wrap: wrap;\r\n justify-content: flex-end;\r\n }\r\n\r\n .feed-controls {\r\n display: grid !important;\r\n grid-template-columns: minmax(0, 1fr) minmax(132px, 0.45fr) !important;\r\n gap: 8px;\r\n overflow: visible;\r\n }\r\n\r\n .feed-controls .command-bar,\r\n .feed-controls .advanced-filters {\r\n display: contents !important;\r\n }\r\n\r\n .feed-controls .search-input {\r\n grid-column: 1 / -1 !important;\r\n }\r\n\r\n .feed-controls .command-bar > .source-trigger {\r\n grid-column: 1 / -1 !important;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-column: 1 / -1 !important;\r\n display: grid !important;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 8px;\r\n }\r\n\r\n .feed-controls .advanced-filters > span {\r\n display: none;\r\n }\r\n\r\n .feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n width: 100%;\r\n min-width: 0;\r\n }\r\n\r\n .memory-grid {\r\n overflow: hidden;\r\n }\r\n}\r\n\r\n@container mory (max-width: 760px) {\r\n .product-shell {\r\n padding: 8px 8px 20px;\r\n }\r\n\r\n .product-header {\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .brand-lockup {\r\n min-width: 0;\r\n }\r\n\r\n .brand-lockup > div:last-child {\r\n min-width: 0;\r\n }\r\n\r\n .brand-lockup span {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .header-actions {\r\n max-width: none;\r\n flex: 0 0 auto;\r\n }\r\n\r\n .feed-section {\r\n padding: 12px;\r\n border-radius: 16px;\r\n }\r\n\r\n .section-heading {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) auto;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .section-heading > div:first-child {\r\n grid-column: 1;\r\n }\r\n\r\n .section-heading > .context-pack {\r\n grid-column: 1 / -1;\r\n grid-row: 2;\r\n margin-left: 0;\r\n }\r\n\r\n .section-heading > .feed-actions {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n\r\n .section-heading .feed-actions {\r\n width: auto;\r\n flex-wrap: nowrap;\r\n }\r\n\r\n .feed-capture-button {\r\n max-width: 100%;\r\n padding-inline: 12px;\r\n }\r\n\r\n .feed-controls {\r\n grid-template-columns: 1fr !important;\r\n gap: 8px;\r\n padding: 8px;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger,\r\n .feed-controls .advanced-filters {\r\n grid-column: 1 / -1 !important;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n\r\n .memory-card {\r\n grid-template-columns: 28px minmax(0, 1fr) auto !important;\r\n gap: 8px 10px;\r\n padding: 12px;\r\n }\r\n\r\n .memory-card .memory-time {\r\n grid-column: 2 !important;\r\n }\r\n\r\n .memory-card .memory-entity {\r\n grid-column: 3 !important;\r\n justify-items: end;\r\n }\r\n\r\n .memory-content-cell,\r\n .memory-category,\r\n .memory-life,\r\n .memory-card .card-actions {\r\n grid-column: 1 / -1 !important;\r\n }\r\n\r\n .memory-pagination {\r\n gap: 10px;\r\n }\r\n\r\n .settings-page {\r\n padding: 18px 14px 28px;\r\n }\r\n\r\n .settings-tabs {\r\n max-width: 100%;\r\n overflow-x: auto;\r\n scrollbar-width: none;\r\n }\r\n\r\n .settings-tabs::-webkit-scrollbar {\r\n display: none;\r\n }\r\n}\r\n\r\n@container mory (max-width: 600px) {\r\n .capture-modal {\r\n width: calc(100vw - 20px) !important;\r\n max-height: calc(100dvh - 20px) !important;\r\n overflow-y: auto;\r\n padding: 16px !important;\r\n }\r\n\r\n .capture-modal .capture-bottom {\r\n display: grid !important;\r\n grid-template-columns: 1fr 1fr !important;\r\n gap: 8px !important;\r\n }\r\n\r\n .capture-modal .capture-bottom > * {\r\n width: 100% !important;\r\n min-width: 0 !important;\r\n }\r\n\r\n .capture-modal .capture-bottom > [data-slot=\"input\"] {\r\n grid-column: 1 / -1;\r\n }\r\n\r\n .capture-modal .record-mode-shell > .source-trigger {\r\n flex-basis: 128px;\r\n width: 128px;\r\n }\r\n}\r\n\r\n@container mory (max-width: 420px) {\r\n .product-header {\r\n align-items: center;\r\n }\r\n\r\n .brand-glyph.logo-mark,\r\n .product-header .brand-glyph.logo-mark {\r\n width: 42px;\r\n height: 42px;\r\n }\r\n\r\n .brand-lockup strong {\r\n font-size: 16px;\r\n }\r\n\r\n .brand-lockup span {\r\n max-width: 128px;\r\n }\r\n\r\n .header-actions {\r\n gap: 6px;\r\n }\r\n\r\n .section-heading {\r\n grid-template-columns: minmax(0, 1fr) auto;\r\n }\r\n\r\n .section-heading h2 {\r\n font-size: 22px;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .context-actions {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .context-actions .inline-trigger,\r\n .context-actions > [data-slot=\"button\"] {\r\n flex: 1 1 auto;\r\n }\r\n}\r\n\r\n@container mory (max-width: 360px) {\r\n .product-header {\r\n align-items: flex-start;\r\n }\r\n\r\n .header-settings[data-slot=\"button\"],\r\n .header-actions > .status-chip {\r\n width: 36px;\r\n flex-basis: 36px;\r\n }\r\n\r\n .feed-section {\r\n padding: 10px;\r\n }\r\n\r\n .memory-card {\r\n grid-template-columns: 24px minmax(0, 1fr) !important;\r\n }\r\n\r\n .memory-card .memory-entity {\r\n grid-column: 2 !important;\r\n justify-items: start;\r\n }\r\n}\r\n\r\n@container mory (min-width: 601px) and (max-width: 900px) {\r\n .capture-modal .capture-bottom {\r\n display: flex !important;\r\n flex-wrap: nowrap !important;\r\n gap: 8px !important;\r\n align-items: center;\r\n width: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n .capture-modal .capture-bottom > .source-trigger {\r\n flex: 0 0 132px !important;\r\n width: 132px !important;\r\n }\r\n\r\n .capture-modal .capture-bottom > [data-slot=\"input\"] {\r\n flex: 1 1 0 !important;\r\n width: 0 !important;\r\n }\r\n\r\n .capture-modal .capture-bottom > button {\r\n flex: 0 0 auto !important;\r\n width: auto !important;\r\n }\r\n\r\n .capture-modal .capture-bottom > * {\r\n min-width: 0;\r\n }\r\n\r\n .capture-modal .capture-bottom input,\r\n .capture-modal .capture-bottom button,\r\n .capture-modal .capture-bottom .source-trigger {\r\n min-width: 0;\r\n width: 100%;\r\n padding-inline: 10px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .capture-modal .capture-bottom button {\r\n width: auto;\r\n }\r\n}\r\n\r\n.header-settings[data-slot=\"button\"]:hover,\r\n.header-settings[data-slot=\"button\"][aria-pressed=\"true\"] {\r\n color: var(--accent);\r\n background: #eef7f2;\r\n border-color: #d3e8de;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .header-settings[data-slot=\"button\"]:hover,\r\n:scope[data-theme=\"midnight\"] .header-settings[data-slot=\"button\"][aria-pressed=\"true\"] {\r\n background: var(--accent) !important;\r\n border-color: var(--accent) !important;\r\n color: #101522 !important;\r\n box-shadow: 0 8px 20px rgba(139, 156, 255, 0.22);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .header-settings[data-slot=\"button\"]:focus-visible {\r\n outline: 2px solid var(--accent);\r\n outline-offset: 3px;\r\n}\r\n\r\n@container mory (max-width: 520px) {\r\n .header-settings span {\r\n display: none;\r\n }\r\n\r\n .header-settings[data-slot=\"button\"] {\r\n flex-basis: 42px;\r\n width: 42px;\r\n padding: 0;\r\n }\r\n\r\n .header-actions > .status-chip {\r\n flex-basis: 42px;\r\n width: 42px;\r\n padding: 0;\r\n font-size: 0;\r\n }\r\n\r\n .header-actions > .status-chip svg {\r\n margin: 0;\r\n }\r\n}\r\n\r\n/* Midnight theme: the bulk-selection table must remain a dark surface too. */\r\n:scope[data-theme=\"midnight\"] .memory-list-header {\r\n background: #171d2c;\r\n border-color: #33405a;\r\n color: #9aa8c2;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .memory-grid,\r\n:scope[data-theme=\"midnight\"] .memory-card {\r\n background: #171d2c;\r\n border-color: #29354d;\r\n color: var(--text);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .memory-card:hover {\r\n background: #1d2638;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .memory-card.selected {\r\n background: rgba(139, 156, 255, 0.14);\r\n box-shadow: inset 3px 0 0 var(--accent);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .memory-card.selected:hover {\r\n background: rgba(139, 156, 255, 0.2);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .memory-card .memory-time,\r\n:scope[data-theme=\"midnight\"] .memory-card .memory-entity span,\r\n:scope[data-theme=\"midnight\"] .memory-card .memory-category span {\r\n color: #9aa8c2;\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .memory-card .memory-entity strong,\r\n:scope[data-theme=\"midnight\"] .memory-card .memory-content-cell,\r\n:scope[data-theme=\"midnight\"] .memory-card .memory-title-button {\r\n color: var(--text);\r\n}\r\n\r\n:scope[data-theme=\"midnight\"] .memory-selection-cell input[type=\"checkbox\"],\r\n:scope[data-theme=\"midnight\"] .memory-list-header input[type=\"checkbox\"] {\r\n accent-color: var(--accent);\r\n}\r\n\r\n/* Shared spacing rhythm for navigation, memory rows, and selection actions. */\r\n.record-nav-list {\r\n gap: 6px !important;\r\n}\r\n\r\n.record-nav-list + .record-nav-list {\r\n margin-top: 6px;\r\n}\r\n\r\n.context-actions {\r\n gap: 10px !important;\r\n}\r\n\r\n@container mory (max-width: 760px) {\r\n .feed-section {\r\n padding: 14px;\r\n }\r\n}\r\n\r\n/* Wide working surface: every repository control shares one compact row. */\r\n@container mory (min-width: 900px) {\r\n .feed-controls {\r\n grid-template-columns: minmax(260px, 1fr) 150px 150px 176px 176px;\r\n align-items: center;\r\n }\r\n\r\n .feed-controls .advanced-filters {\r\n display: contents;\r\n grid-column: auto;\r\n }\r\n\r\n .feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n min-width: 0;\r\n }\r\n\r\n .feed-controls .advanced-filters .inline-trigger,\r\n .feed-controls .advanced-filters [data-slot=\"input\"] {\r\n min-height: 40px;\r\n height: 40px;\r\n }\r\n}\r\n\r\n/* Final control normalization, after responsive and component rules. */\r\n/* Keep the responsive contract after all historical layout passes. */\r\n/* Feed filters stay on one horizontal rail at compact widths. */\r\n/* The advanced filter section must contribute its controls to the same grid. */\r\n@container mory (max-width: 900px) {\r\n .feed-controls {\r\n display: grid !important;\r\n grid-template-columns: minmax(140px, 1.55fr) repeat(4, minmax(72px, 1fr)) !important;\r\n gap: 6px !important;\r\n padding: 6px !important;\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n scrollbar-width: thin;\r\n }\r\n\r\n .feed-controls .command-bar,\r\n .feed-controls .advanced-filters {\r\n display: contents !important;\r\n }\r\n\r\n .feed-controls .advanced-filters > * { grid-column: auto !important; }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger,\r\n .feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n width: 100%;\r\n min-width: 0 !important;\r\n }\r\n\r\n .feed-controls .advanced-filters > span { display: none !important; }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .source-trigger,\r\n .feed-controls .advanced-filters .inline-trigger,\r\n .feed-controls .advanced-filters [data-slot=\"input\"] {\r\n min-height: 42px !important;\r\n height: 42px !important;\r\n padding-inline: 10px !important;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n}\r\n\r\n@container mory (max-width: 520px) {\r\n .feed-controls {\r\n grid-template-columns: minmax(120px, 1.45fr) repeat(4, minmax(54px, 1fr)) !important;\r\n gap: 4px !important;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .source-trigger,\r\n .feed-controls .advanced-filters .inline-trigger,\r\n .feed-controls .advanced-filters [data-slot=\"input\"] {\r\n min-height: 38px !important;\r\n height: 38px !important;\r\n padding-inline: 6px !important;\r\n font-size: 12px !important;\r\n }\r\n}\r\n\r\n:scope, :scope, :scope,\r\n.product-shell, .product-header, .workspace-layout, .workspace-main,\r\n.feed-section, .settings-page, .feed-controls, .memory-grid, .memory-card {\r\n min-width: 0;\r\n max-width: 100%;\r\n}\r\n\r\n:scope { overflow-x: hidden; }\r\n\r\n@container mory (max-width: 1180px) {\r\n .workspace-layout { display: block; }\r\n .workspace-nav { display: none !important; }\r\n .workspace-main { width: 100%; }\r\n}\r\n\r\n@container mory (max-width: 900px) {\r\n .feed-controls {\r\n display: grid !important;\r\n grid-template-columns: minmax(0, 1fr) minmax(132px, .45fr) !important;\r\n gap: 8px;\r\n overflow: visible;\r\n }\r\n .feed-controls .command-bar { display: contents !important; }\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger { grid-column: 1 / -1 !important; }\r\n .feed-controls .advanced-filters {\r\n display: grid !important;\r\n grid-column: 1 / -1 !important;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 8px;\r\n }\r\n .feed-controls .advanced-filters > span { display: none; }\r\n .feed-controls .advanced-filters > * { grid-column: auto !important; width: 100%; min-width: 0; }\r\n}\r\n\r\n@container mory (max-width: 760px) {\r\n .product-shell { padding: 8px 8px 20px; }\r\n .product-header { display: flex; gap: 10px; }\r\n .header-actions { max-width: none; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }\r\n .brand-lockup, .brand-lockup > div:last-child { min-width: 0; }\r\n .brand-lockup span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n .feed-section { padding: 12px; border-radius: 16px; }\r\n .section-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }\r\n .section-heading > div:first-child { grid-column: 1; }\r\n .section-heading > .feed-actions { grid-column: 2; grid-row: 1; margin-left: 0; }\r\n .section-heading > .context-pack { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }\r\n .feed-controls { grid-template-columns: 1fr !important; gap: 8px; padding: 8px; }\r\n .feed-controls .search-input, .feed-controls .command-bar > .source-trigger,\r\n .feed-controls .advanced-filters { grid-column: 1 / -1 !important; }\r\n .feed-controls .advanced-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n .memory-card { grid-template-columns: 28px minmax(0, 1fr) auto !important; gap: 8px 10px; padding: 12px; }\r\n .memory-card .memory-time { grid-column: 2 !important; }\r\n .memory-card .memory-entity { grid-column: 3 !important; justify-items: end; }\r\n .memory-content-cell, .memory-category, .memory-life, .memory-card .card-actions { grid-column: 1 / -1 !important; }\r\n .settings-page { padding: 18px 14px 28px; }\r\n .settings-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }\r\n .settings-tabs::-webkit-scrollbar { display: none; }\r\n}\r\n\r\n@container mory (max-width: 600px) {\r\n .capture-modal { width: calc(100vw - 20px) !important; max-height: calc(100dvh - 20px) !important; overflow-y: auto; padding: 16px !important; }\r\n .capture-modal .capture-bottom { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }\r\n .capture-modal .capture-bottom > * { width: 100% !important; min-width: 0 !important; }\r\n .capture-modal .capture-bottom > [data-slot=\"input\"] { grid-column: 1 / -1; }\r\n}\r\n\r\n@container mory (max-width: 420px) {\r\n .brand-glyph.logo-mark, .product-header .brand-glyph.logo-mark { width: 42px; height: 42px; }\r\n .brand-lockup strong { font-size: 16px; }\r\n .brand-lockup span { max-width: 128px; }\r\n .section-heading h2 { font-size: 22px; }\r\n .feed-controls .advanced-filters { grid-template-columns: 1fr; }\r\n .context-actions { flex-wrap: wrap; }\r\n}\r\n\r\n/* Keep the filter rail single-line after all compact density rules. */\r\n@container mory (max-width: 900px) {\r\n .feed-controls {\r\n display: grid !important;\r\n grid-template-columns: minmax(140px, 1.55fr) repeat(4, minmax(72px, 1fr)) !important;\r\n gap: 6px !important;\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n }\r\n\r\n .feed-controls .command-bar,\r\n .feed-controls .advanced-filters { display: contents !important; }\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger,\r\n .feed-controls .advanced-filters > * { grid-column: auto !important; min-width: 0 !important; width: 100%; }\r\n .feed-controls .advanced-filters > span { display: none !important; }\r\n}\r\n\r\n@container mory (max-width: 520px) {\r\n .feed-controls { grid-template-columns: minmax(120px, 1.45fr) repeat(4, minmax(54px, 1fr)) !important; }\r\n}\r\n\r\n/* Medium and small screens keep only search + time range. */\r\n@container mory (max-width: 1180px) {\r\n .feed-controls .command-bar > .source-trigger,\r\n .feed-controls .advanced-filters > .inline-trigger:nth-child(2),\r\n .feed-controls .advanced-filters > .inline-trigger:nth-child(3) {\r\n display: none !important;\r\n }\r\n\r\n .feed-controls {\r\n grid-template-columns: minmax(0, 1fr) 150px !important;\r\n overflow: visible;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .advanced-filters > .inline-trigger:nth-child(1) {\r\n grid-column: auto !important;\r\n }\r\n\r\n .feed-controls {\r\n grid-template-columns: minmax(0, 1fr) 160px !important;\r\n }\r\n}\r\n\r\n/* Mobile memory cards read as stable rows instead of a loose column stack. */\r\n@container mory (max-width: 900px) {\r\n .memory-card {\r\n grid-template-columns: 28px minmax(0, 1fr) auto !important;\r\n gap: 8px 10px;\r\n padding: 12px;\r\n }\r\n\r\n .memory-card .memory-selection-cell { grid-column: 1 !important; grid-row: 1 !important; }\r\n .memory-card .memory-time { grid-column: 2 !important; grid-row: 1 !important; }\r\n .memory-card .memory-entity { grid-column: 3 !important; grid-row: 1 !important; justify-items: end; }\r\n .memory-card .memory-content-cell { grid-column: 1 / -1 !important; }\r\n\r\n .memory-card .memory-category {\r\n grid-column: 1 / 3 !important;\r\n align-self: center;\r\n }\r\n\r\n .memory-card .memory-life {\r\n grid-column: 3 !important;\r\n justify-self: end;\r\n align-self: center;\r\n }\r\n\r\n .memory-card .memory-category [data-slot=\"button\"],\r\n .memory-card .memory-life [data-slot=\"badge\"] {\r\n margin: 0;\r\n }\r\n}\r\n\r\n@container mory (max-width: 420px) {\r\n .memory-card .memory-category { grid-column: 1 !important; }\r\n .memory-card .memory-life { grid-column: 2 !important; }\r\n}\r\n\r\n.inline-trigger,\r\n.source-trigger,\r\n.advanced-filters input,\r\n.advanced-filters select,\r\n.scene-fields select {\r\n min-height: 46px !important;\r\n height: 46px !important;\r\n border: 1px solid var(--border-soft) !important;\r\n border-radius: 18px !important;\r\n background: var(--surface) !important;\r\n font-size: 16px;\r\n font-weight: 400;\r\n box-shadow: 0 4px 12px rgba(25, 28, 35, 0.05);\r\n}\r\n\r\n.command-bar {\r\n border: 0 !important;\r\n padding: 0 !important;\r\n background: transparent !important;\r\n box-shadow: none !important;\r\n}\r\n\r\n.feed-controls {\r\n border: 0 !important;\r\n padding: 0 !important;\r\n background: transparent !important;\r\n box-shadow: none !important;\r\n}\r\n\r\n[data-slot=\"input\"]:not([type=\"checkbox\"]):not([type=\"date\"]):not([type=\"file\"]),\r\n[data-slot=\"textarea\"] {\r\n border: 1px solid var(--border-soft) !important;\r\n border-radius: 18px !important;\r\n background: var(--surface) !important;\r\n font-weight: 400;\r\n box-shadow: 0 4px 12px rgba(25, 28, 35, 0.05);\r\n}\r\n\r\n/* The final cascade must keep the compact feed controls on one row. */\r\n@container mory (max-width: 900px) {\r\n .feed-controls {\r\n grid-template-columns: minmax(140px, 1.55fr) repeat(4, minmax(72px, 1fr)) !important;\r\n display: grid !important;\r\n gap: 6px !important;\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n }\r\n\r\n .feed-controls .command-bar,\r\n .feed-controls .advanced-filters { display: contents !important; }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .command-bar > .source-trigger,\r\n .feed-controls .advanced-filters > * {\r\n grid-column: auto !important;\r\n width: 100%;\r\n min-width: 0 !important;\r\n }\r\n\r\n .feed-controls .advanced-filters > span { display: none !important; }\r\n}\r\n\r\n@container mory (max-width: 520px) {\r\n .feed-controls {\r\n grid-template-columns: minmax(120px, 1.45fr) repeat(4, minmax(54px, 1fr)) !important;\r\n }\r\n\r\n .feed-controls .search-input,\r\n .feed-controls .source-trigger,\r\n .feed-controls .advanced-filters .inline-trigger,\r\n .feed-controls .advanced-filters [data-slot=\"input\"] {\r\n min-height: 38px !important;\r\n height: 38px !important;\r\n padding-inline: 6px !important;\r\n font-size: 12px !important;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n}\r\n\r\n/* After hiding the three optional actions, let search use the freed width. */\r\n@container mory (max-width: 1180px) {\r\n .feed-controls {\r\n grid-template-columns: minmax(0, 1fr) 160px !important;\r\n overflow: visible;\r\n }\r\n}\r\n\r\n/* Compact memory list for medium and small screens: one record, one row. */\r\n@container mory (max-width: 900px) {\r\n .memory-card {\r\n grid-template-columns: 28px minmax(0, 1fr) 72px auto !important;\r\n grid-template-rows: minmax(42px, auto) !important;\r\n align-items: center;\r\n min-height: 58px;\r\n gap: 8px;\r\n padding: 8px 12px;\r\n }\r\n\r\n .memory-card .memory-selection-cell {\r\n grid-column: 1 !important;\r\n grid-row: 1 !important;\r\n }\r\n\r\n .memory-card .memory-content-cell {\r\n grid-column: 2 !important;\r\n grid-row: 1 !important;\r\n min-width: 0;\r\n display: block;\r\n overflow: hidden;\r\n }\r\n\r\n .memory-card .memory-content-cell p {\r\n display: none !important;\r\n }\r\n\r\n .memory-card .memory-title-button {\r\n display: block;\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n text-align: left;\r\n }\r\n\r\n .memory-card .memory-time {\r\n grid-column: 3 !important;\r\n grid-row: 1 !important;\r\n width: 72px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .memory-card .memory-life {\r\n grid-column: 4 !important;\r\n grid-row: 1 !important;\r\n justify-self: end;\r\n }\r\n\r\n .memory-card .memory-entity,\r\n .memory-card .memory-category {\r\n display: none !important;\r\n }\r\n}\r\n\r\n@container mory (max-width: 420px) {\r\n .memory-card {\r\n grid-template-columns: 24px minmax(0, 1fr) 58px auto !important;\r\n gap: 6px;\r\n padding-inline: 8px;\r\n }\r\n\r\n .memory-card .memory-time { width: 58px; font-size: 12px; }\r\n}\r\n\r\n/* Pagination stays as one compact horizontal row on small screens. */\r\n@container mory (max-width: 900px) {\r\n .memory-pagination {\r\n display: flex !important;\r\n flex-direction: row !important;\r\n align-items: center;\r\n justify-content: flex-end;\r\n flex-wrap: nowrap;\r\n gap: 10px;\r\n min-width: 0;\r\n white-space: nowrap;\r\n }\r\n\r\n .page-size-options,\r\n .page-navigation {\r\n display: flex !important;\r\n flex-direction: row !important;\r\n align-items: center;\r\n gap: 6px;\r\n margin: 0;\r\n padding: 0;\r\n border: 0;\r\n }\r\n\r\n .page-size-options button,\r\n .page-navigation button {\r\n min-width: 34px;\r\n width: 34px;\r\n min-height: 38px;\r\n height: 38px;\r\n padding-inline: 4px;\r\n }\r\n\r\n .page-navigation > span { min-width: 46px; }\r\n}\r\n\r\n.header-settings-icon {\r\n position: relative;\r\n display: inline-grid;\r\n place-items: center;\r\n width: 18px;\r\n height: 18px;\r\n flex: 0 0 18px;\r\n}\r\n\r\n.header-settings-help {\r\n position: absolute;\r\n top: -8px;\r\n right: -9px;\r\n display: grid;\r\n place-items: center;\r\n width: 14px;\r\n height: 14px;\r\n border: 1px solid currentColor;\r\n border-radius: 50%;\r\n background: var(--surface);\r\n color: var(--accent);\r\n font-size: 10px;\r\n font-weight: 900;\r\n line-height: 1;\r\n}\r\n\r\n/* The help badge belongs to the whole settings button, not the slider icon. */\r\n.header-settings[data-slot=\"button\"] {\r\n position: relative;\r\n}\r\n\r\n.header-settings-icon {\r\n position: static;\r\n}\r\n\r\n.header-settings-help {\r\n top: -7px;\r\n right: -7px;\r\n}\r\n\r\n/* Small-screen text compression must not hide the icon wrapper. */\r\n.header-settings .header-settings-icon {\r\n display: inline-grid !important;\r\n}\r\n\r\n.header-settings .header-settings-help {\r\n display: grid !important;\r\n}\r\n\r\n@container mory (max-width: 520px) {\r\n .header-settings-help {\r\n top: -7px;\r\n right: -7px;\r\n }\r\n}\r\n\r\n/* Capture actions: source, paste, and save share one row on small screens. */\r\n@container mory (max-width: 600px) {\r\n .capture-modal .capture-bottom {\r\n display: grid !important;\r\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\r\n gap: 8px !important;\r\n }\r\n\r\n .capture-modal .capture-bottom > [data-slot=\"input\"] {\r\n grid-column: 1 / -1 !important;\r\n grid-row: 1 !important;\r\n }\r\n\r\n .capture-modal .capture-bottom > .source-trigger {\r\n grid-column: 1 !important;\r\n grid-row: 2 !important;\r\n }\r\n\r\n .capture-modal .capture-bottom > .clipboard-action {\r\n grid-column: 2 !important;\r\n grid-row: 2 !important;\r\n }\r\n\r\n .capture-modal .capture-bottom > button[type=\"submit\"] {\r\n grid-column: 3 !important;\r\n grid-row: 2 !important;\r\n min-width: 0 !important;\r\n padding-inline: 6px !important;\r\n }\r\n}\r\n\r\n/* Theme surfaces: every major component follows the active palette. */\r\n:scope[data-theme=\"graphite\"] .workspace-nav,\r\n:scope[data-theme=\"graphite\"] .feed-section,\r\n:scope[data-theme=\"graphite\"] .settings-page,\r\n:scope[data-theme=\"terminal\"] .workspace-nav,\r\n:scope[data-theme=\"terminal\"] .feed-section,\r\n:scope[data-theme=\"terminal\"] .settings-page {\r\n background: color-mix(in srgb, var(--surface) 94%, transparent) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text);\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .theme-panel,\r\n:scope[data-theme=\"terminal\"] .theme-panel,\r\n:scope[data-theme=\"graphite\"] .theme-option,\r\n:scope[data-theme=\"terminal\"] .theme-option,\r\n:scope[data-theme=\"graphite\"] .ui-dialog-content,\r\n:scope[data-theme=\"terminal\"] .ui-dialog-content,\r\n:scope[data-theme=\"graphite\"] .capture-modal,\r\n:scope[data-theme=\"terminal\"] .capture-modal {\r\n background: var(--surface) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text);\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .memory-grid,\r\n:scope[data-theme=\"terminal\"] .memory-grid,\r\n:scope[data-theme=\"graphite\"] .memory-list-header,\r\n:scope[data-theme=\"terminal\"] .memory-list-header {\r\n background: var(--surface) !important;\r\n border-color: var(--border-soft) !important;\r\n color: var(--muted);\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .memory-card,\r\n:scope[data-theme=\"terminal\"] .memory-card {\r\n background: var(--surface) !important;\r\n border-color: var(--border-soft) !important;\r\n color: var(--text);\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .memory-card:hover,\r\n:scope[data-theme=\"terminal\"] .memory-card:hover {\r\n background: var(--surface-muted) !important;\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .search-input,\r\n:scope[data-theme=\"terminal\"] .search-input,\r\n:scope[data-theme=\"graphite\"] .ui-select-trigger,\r\n:scope[data-theme=\"terminal\"] .ui-select-trigger,\r\n:scope[data-theme=\"graphite\"] [data-slot=\"input\"],\r\n:scope[data-theme=\"terminal\"] [data-slot=\"input\"],\r\n:scope[data-theme=\"graphite\"] [data-slot=\"textarea\"],\r\n:scope[data-theme=\"terminal\"] [data-slot=\"textarea\"] {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] [data-slot=\"button\"][data-variant=\"outline\"],\r\n:scope[data-theme=\"terminal\"] [data-slot=\"button\"][data-variant=\"outline\"],\r\n:scope[data-theme=\"graphite\"] [data-slot=\"button\"][data-variant=\"secondary\"],\r\n:scope[data-theme=\"terminal\"] [data-slot=\"button\"][data-variant=\"secondary\"] {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .settings-page-header h1,\r\n:scope[data-theme=\"graphite\"] .settings-page-header p,\r\n:scope[data-theme=\"graphite\"] .settings-page .card-title h3,\r\n:scope[data-theme=\"terminal\"] .settings-page-header h1,\r\n:scope[data-theme=\"terminal\"] .settings-page-header p,\r\n:scope[data-theme=\"terminal\"] .settings-page .card-title h3,\r\n:scope[data-theme=\"graphite\"] .theme-option-copy strong,\r\n:scope[data-theme=\"terminal\"] .theme-option-copy strong {\r\n color: var(--text) !important;\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .settings-page-header p,\r\n:scope[data-theme=\"terminal\"] .settings-page-header p,\r\n:scope[data-theme=\"graphite\"] .theme-option-copy small,\r\n:scope[data-theme=\"terminal\"] .theme-option-copy small,\r\n:scope[data-theme=\"graphite\"] .sync-note,\r\n:scope[data-theme=\"terminal\"] .sync-note {\r\n color: var(--muted) !important;\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .settings-tabs button,\r\n:scope[data-theme=\"terminal\"] .settings-tabs button {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .settings-tabs button.active,\r\n:scope[data-theme=\"graphite\"] .settings-tabs button:hover,\r\n:scope[data-theme=\"terminal\"] .settings-tabs button.active,\r\n:scope[data-theme=\"terminal\"] .settings-tabs button:hover {\r\n background: var(--accent) !important;\r\n border-color: var(--accent) !important;\r\n color: var(--bg) !important;\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .status-chip,\r\n:scope[data-theme=\"terminal\"] .status-chip {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--accent) !important;\r\n}\r\n\r\n:scope[data-theme=\"forest\"] .workspace-nav,\r\n:scope[data-theme=\"forest\"] .feed-section,\r\n:scope[data-theme=\"forest\"] .settings-page,\r\n:scope[data-theme=\"lavender\"] .workspace-nav,\r\n:scope[data-theme=\"lavender\"] .feed-section,\r\n:scope[data-theme=\"lavender\"] .settings-page,\r\n:scope[data-theme=\"rose\"] .workspace-nav,\r\n:scope[data-theme=\"rose\"] .feed-section,\r\n:scope[data-theme=\"rose\"] .settings-page,\r\n:scope[data-theme=\"sand\"] .workspace-nav,\r\n:scope[data-theme=\"sand\"] .feed-section,\r\n:scope[data-theme=\"sand\"] .settings-page {\r\n background: color-mix(in srgb, var(--surface) 92%, var(--bg)) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text);\r\n}\r\n\r\n:scope[data-theme=\"forest\"] .search-input,\r\n:scope[data-theme=\"forest\"] .ui-select-trigger,\r\n:scope[data-theme=\"forest\"] [data-slot=\"input\"],\r\n:scope[data-theme=\"forest\"] [data-slot=\"textarea\"],\r\n:scope[data-theme=\"lavender\"] .search-input,\r\n:scope[data-theme=\"lavender\"] .ui-select-trigger,\r\n:scope[data-theme=\"lavender\"] [data-slot=\"input\"],\r\n:scope[data-theme=\"lavender\"] [data-slot=\"textarea\"],\r\n:scope[data-theme=\"rose\"] .search-input,\r\n:scope[data-theme=\"rose\"] .ui-select-trigger,\r\n:scope[data-theme=\"rose\"] [data-slot=\"input\"],\r\n:scope[data-theme=\"rose\"] [data-slot=\"textarea\"],\r\n:scope[data-theme=\"sand\"] .search-input,\r\n:scope[data-theme=\"sand\"] .ui-select-trigger,\r\n:scope[data-theme=\"sand\"] [data-slot=\"input\"],\r\n:scope[data-theme=\"sand\"] [data-slot=\"textarea\"] {\r\n background: var(--surface) !important;\r\n border-color: var(--border-soft) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n/* Sync settings contain their own nested cards and need the active palette too. */\r\n:scope[data-theme=\"graphite\"] .sync-config-section,\r\n:scope[data-theme=\"graphite\"] .sync-security-section,\r\n:scope[data-theme=\"terminal\"] .sync-config-section,\r\n:scope[data-theme=\"terminal\"] .sync-security-section {\r\n background: linear-gradient(180deg, color-mix(in srgb, var(--surface-muted) 96%, var(--accent)), var(--surface)) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .sync-auto-option,\r\n:scope[data-theme=\"terminal\"] .sync-auto-option,\r\n:scope[data-theme=\"graphite\"] .sync-note,\r\n:scope[data-theme=\"terminal\"] .sync-note,\r\n:scope[data-theme=\"graphite\"] .sync-warning,\r\n:scope[data-theme=\"terminal\"] .sync-warning {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:scope[data-theme=\"graphite\"] .sync-field > span,\r\n:scope[data-theme=\"terminal\"] .sync-field > span,\r\n:scope[data-theme=\"graphite\"] .sync-config-section .language-field > span,\r\n:scope[data-theme=\"terminal\"] .sync-config-section .language-field > span,\r\n:scope[data-theme=\"graphite\"] .sync-auto-option small,\r\n:scope[data-theme=\"terminal\"] .sync-auto-option small {\r\n color: var(--muted) !important;\r\n}\r\n\r\n:scope[data-theme=\"forest\"] .sync-config-section,\r\n:scope[data-theme=\"forest\"] .sync-security-section,\r\n:scope[data-theme=\"lavender\"] .sync-config-section,\r\n:scope[data-theme=\"lavender\"] .sync-security-section,\r\n:scope[data-theme=\"rose\"] .sync-config-section,\r\n:scope[data-theme=\"rose\"] .sync-security-section,\r\n:scope[data-theme=\"sand\"] .sync-config-section,\r\n:scope[data-theme=\"sand\"] .sync-security-section {\r\n background: color-mix(in srgb, var(--surface-muted) 94%, var(--accent)) !important;\r\n border-color: var(--border) !important;\r\n}\r\n\r\n/* The additional dark palettes share the same complete dark-surface treatment. */\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .workspace-nav,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .feed-section,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .settings-page {\r\n background: color-mix(in srgb, var(--surface) 94%, transparent) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text);\r\n}\r\n\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .theme-panel,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .theme-option,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .ui-dialog-content,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .capture-modal,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .memory-grid,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .memory-list-header,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .memory-card {\r\n background: var(--surface) !important;\r\n border-color: var(--border-soft) !important;\r\n color: var(--text);\r\n}\r\n\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .search-input,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .ui-select-trigger,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) [data-slot=\"input\"],\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) [data-slot=\"textarea\"],\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) [data-slot=\"button\"][data-variant=\"outline\"],\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) [data-slot=\"button\"][data-variant=\"secondary\"] {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .settings-page-header h1,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .settings-page-header p,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .settings-page .card-title h3,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .theme-option-copy strong {\r\n color: var(--text) !important;\r\n}\r\n\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .settings-page-header p,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .theme-option-copy small,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .sync-note {\r\n color: var(--muted) !important;\r\n}\r\n\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .settings-tabs button {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .settings-tabs button.active,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .settings-tabs button:hover {\r\n background: var(--accent) !important;\r\n border-color: var(--accent) !important;\r\n color: var(--bg) !important;\r\n}\r\n\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .sync-config-section,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .sync-security-section,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .sync-auto-option,\r\n:is(:scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .sync-warning {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n/* Let the desktop theme selector use the full settings canvas. */\r\n@container mory (min-width: 1181px) {\r\n .settings-page-header,\r\n .settings-page > [data-slot=\"tabs\"],\r\n .settings-page > .settings-tabs,\r\n .settings-page > .settings-select,\r\n .settings-content {\r\n width: 100%;\r\n max-width: none;\r\n }\r\n\r\n .theme-panel {\r\n width: 100%;\r\n max-width: none;\r\n }\r\n\r\n .theme-options {\r\n grid-template-columns: repeat(5, minmax(0, 1fr));\r\n }\r\n}\r\n\r\n/* Header controls must stay dark when any dark workspace palette is active. */\r\n:is(:scope[data-theme=\"midnight\"], :scope[data-theme=\"graphite\"], :scope[data-theme=\"terminal\"], :scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .header-settings[data-slot=\"button\"],\r\n:is(:scope[data-theme=\"midnight\"], :scope[data-theme=\"graphite\"], :scope[data-theme=\"terminal\"], :scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .header-actions > .status-chip {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:is(:scope[data-theme=\"midnight\"], :scope[data-theme=\"graphite\"], :scope[data-theme=\"terminal\"], :scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .header-settings[data-slot=\"button\"]:hover,\r\n:is(:scope[data-theme=\"midnight\"], :scope[data-theme=\"graphite\"], :scope[data-theme=\"terminal\"], :scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .header-settings[data-slot=\"button\"][aria-pressed=\"true\"],\r\n:is(:scope[data-theme=\"midnight\"], :scope[data-theme=\"graphite\"], :scope[data-theme=\"terminal\"], :scope[data-theme=\"abyss\"], :scope[data-theme=\"ember\"], :scope[data-theme=\"aurora\"], :scope[data-theme=\"violet\"], :scope[data-theme=\"navy\"]) .header-actions > .status-chip:hover {\r\n background: var(--accent) !important;\r\n border-color: var(--accent) !important;\r\n color: var(--bg) !important;\r\n}\r\n\r\n/* Keep the newest dark palettes consistent across the full workspace. */\r\n:is(:scope[data-theme=\"crimson\"], :scope[data-theme=\"sapphire\"], :scope[data-theme=\"moss\"], :scope[data-theme=\"solar\"], :scope[data-theme=\"ink\"]) :is(.workspace-nav, .feed-section, .settings-page) {\r\n background: color-mix(in srgb, var(--surface) 94%, transparent) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text);\r\n}\r\n\r\n:is(:scope[data-theme=\"crimson\"], :scope[data-theme=\"sapphire\"], :scope[data-theme=\"moss\"], :scope[data-theme=\"solar\"], :scope[data-theme=\"ink\"]) :is(.theme-panel, .theme-option, .ui-dialog-content, .capture-modal, .memory-grid, .memory-list-header, .memory-card) {\r\n background: var(--surface) !important;\r\n border-color: var(--border-soft) !important;\r\n color: var(--text);\r\n}\r\n\r\n:is(:scope[data-theme=\"crimson\"], :scope[data-theme=\"sapphire\"], :scope[data-theme=\"moss\"], :scope[data-theme=\"solar\"], :scope[data-theme=\"ink\"]) :is(.search-input, .ui-select-trigger, [data-slot=\"input\"], [data-slot=\"textarea\"], [data-slot=\"button\"][data-variant=\"outline\"], [data-slot=\"button\"][data-variant=\"secondary\"], .header-settings[data-slot=\"button\"], .header-actions > .status-chip) {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:is(:scope[data-theme=\"crimson\"], :scope[data-theme=\"sapphire\"], :scope[data-theme=\"moss\"], :scope[data-theme=\"solar\"], :scope[data-theme=\"ink\"]) :is(.settings-page-header h1, .settings-page-header p, .settings-page .card-title h3, .theme-option-copy strong) {\r\n color: var(--text) !important;\r\n}\r\n\r\n:is(:scope[data-theme=\"crimson\"], :scope[data-theme=\"sapphire\"], :scope[data-theme=\"moss\"], :scope[data-theme=\"solar\"], :scope[data-theme=\"ink\"]) :is(.theme-option-copy small, .sync-note) {\r\n color: var(--muted) !important;\r\n}\r\n\r\n:is(:scope[data-theme=\"crimson\"], :scope[data-theme=\"sapphire\"], :scope[data-theme=\"moss\"], :scope[data-theme=\"solar\"], :scope[data-theme=\"ink\"]) :is(.settings-tabs button, .sync-config-section, .sync-security-section, .sync-auto-option, .sync-warning) {\r\n background: var(--surface-muted) !important;\r\n border-color: var(--border) !important;\r\n color: var(--text) !important;\r\n}\r\n\r\n:is(:scope[data-theme=\"crimson\"], :scope[data-theme=\"sapphire\"], :scope[data-theme=\"moss\"], :scope[data-theme=\"solar\"], :scope[data-theme=\"ink\"]) :is(.settings-tabs button.active, .settings-tabs button:hover, .header-settings[data-slot=\"button\"]:hover, .header-settings[data-slot=\"button\"][aria-pressed=\"true\"], .header-actions > .status-chip:hover) {\r\n background: var(--accent) !important;\r\n border-color: var(--accent) !important;\r\n color: var(--bg) !important;\r\n}\r\n\n}\n";
8
+ const logo = "data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0D%0A%3Csvg%20id%3D%22_%E5%9B%BE%E5%B1%82_1%22%20data-name%3D%22%E5%9B%BE%E5%B1%82%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20427.87%20427.87%22%3E%0D%0A%20%20%3Cdefs%3E%0D%0A%20%20%20%20%3Cstyle%3E%0D%0A%20%20%20%20%20%20.cls-1%2C%20.cls-2%20%7B%0D%0A%20%20%20%20%20%20%20%20fill%3A%20%230b3b32%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20.cls-3%20%7B%0D%0A%20%20%20%20%20%20%20%20font-family%3A%20AdobeSongStd-Light-GBpc-EUC-H%2C%20'Adobe%20Song%20Std'%3B%0D%0A%20%20%20%20%20%20%20%20font-weight%3A%20300%3B%0D%0A%20%20%20%20%20%20%20%20letter-spacing%3A%20-.1em%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20.cls-4%20%7B%0D%0A%20%20%20%20%20%20%20%20fill%3A%20%23f5f1e7%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20.cls-5%2C%20.cls-6%20%7B%0D%0A%20%20%20%20%20%20%20%20letter-spacing%3A%20-.1em%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20.cls-6%2C%20.cls-7%20%7B%0D%0A%20%20%20%20%20%20%20%20font-family%3A%20CooperBlack%2C%20'Cooper%20Black'%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20.cls-2%20%7B%0D%0A%20%20%20%20%20%20%20%20font-size%3A%2086px%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20.cls-8%20%7B%0D%0A%20%20%20%20%20%20%20%20fill%3A%20%239bb5a0%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20.cls-9%20%7B%0D%0A%20%20%20%20%20%20%20%20letter-spacing%3A%20-.15em%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%0D%0A%20%20%20%20%20%20.cls-10%20%7B%0D%0A%20%20%20%20%20%20%20%20fill%3A%20%232c6870%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%3C%2Fstyle%3E%0D%0A%20%20%3C%2Fdefs%3E%0D%0A%20%20%3Crect%20class%3D%22cls-1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22427.87%22%20height%3D%22427.87%22%20rx%3D%22102.32%22%20ry%3D%22102.32%22%2F%3E%0D%0A%20%20%3Cg%3E%0D%0A%20%20%20%20%3Crect%20class%3D%22cls-10%22%20x%3D%2261.29%22%20y%3D%2268.46%22%20width%3D%22351.95%22%20height%3D%22290.95%22%20rx%3D%2268.04%22%20ry%3D%2268.04%22%20transform%3D%22translate(-21.32%20401.54)%20rotate(-78)%22%2F%3E%0D%0A%20%20%20%20%3Crect%20class%3D%22cls-8%22%20x%3D%2225.31%22%20y%3D%2268.46%22%20width%3D%22358.99%22%20height%3D%22290.95%22%20rx%3D%2268.04%22%20ry%3D%2268.04%22%20transform%3D%22translate(-32.5%20391.14)%20rotate(-83)%22%2F%3E%0D%0A%20%20%20%20%3Crect%20class%3D%22cls-4%22%20x%3D%2245.86%22%20y%3D%2245%22%20width%3D%22286.26%22%20height%3D%22337.88%22%20rx%3D%2256.31%22%20ry%3D%2256.31%22%20transform%3D%22translate(-7.35%206.73)%20rotate(-2)%22%2F%3E%0D%0A%20%20%3C%2Fg%3E%0D%0A%20%20%3Ctext%20class%3D%22cls-2%22%20transform%3D%22translate(64.68%20198.47)%20rotate(-1.97)%22%3E%3Ctspan%20class%3D%22cls-6%22%20x%3D%220%22%20y%3D%220%22%3EME%3C%2Ftspan%3E%3Ctspan%20class%3D%22cls-3%22%20x%3D%22118.74%22%20y%3D%220%22%3E.%3C%2Ftspan%3E%3Ctspan%20class%3D%22cls-7%22%3E%3Ctspan%20class%3D%22cls-5%22%20x%3D%220%22%20y%3D%2283%22%3EMO%3C%2Ftspan%3E%3Ctspan%20class%3D%22cls-9%22%20x%3D%22126.26%22%20y%3D%2283%22%3ER%3C%2Ftspan%3E%3Ctspan%20class%3D%22cls-5%22%20x%3D%22180.32%22%20y%3D%2283%22%3EY%3C%2Ftspan%3E%3C%2Ftspan%3E%3C%2Ftext%3E%0D%0A%3C%2Fsvg%3E";
9
+ const themes = [{"id":"default","swatches":["#1f6b58","#f1f3f2","#ffffff"],"en":{"name":"Default","hint":"Calm repository green"},"zh":{"name":"默认主题","hint":"沉静的仓库绿"}},{"id":"midnight","swatches":["#8b9cff","#111522","#1b2233"],"en":{"name":"Midnight","hint":"Focused dark workspace"},"zh":{"name":"午夜","hint":"专注的深色工作区"}},{"id":"ocean","swatches":["#176b87","#eef7fa","#ffffff"],"en":{"name":"Ocean","hint":"Cool blue clarity"},"zh":{"name":"海洋","hint":"清爽的蓝色界面"}},{"id":"sunset","swatches":["#a64b2a","#fff7ed","#ffffff"],"en":{"name":"Sunset","hint":"Warm amber energy"},"zh":{"name":"日落","hint":"温暖的琥珀色能量"}},{"id":"forest","swatches":["#2d6a4f","#edf5ef","#ffffff"],"en":{"name":"Forest","hint":"Deep natural focus"},"zh":{"name":"森林","hint":"深沉的自然专注感"}},{"id":"lavender","swatches":["#7657a8","#f5f1fb","#ffffff"],"en":{"name":"Lavender","hint":"Soft creative calm"},"zh":{"name":"薰衣草","hint":"柔和的创意氛围"}},{"id":"graphite","swatches":["#d6b36a","#17191e","#22262e"],"en":{"name":"Graphite","hint":"Neutral dark precision"},"zh":{"name":"石墨","hint":"中性的深色精确感"}},{"id":"rose","swatches":["#b44968","#fff1f4","#ffffff"],"en":{"name":"Rose","hint":"Warm editorial blush"},"zh":{"name":"玫瑰","hint":"温暖的编辑感腮红"}},{"id":"terminal","swatches":["#63e6be","#07130f","#0d2119"],"en":{"name":"Terminal","hint":"High-contrast green glow"},"zh":{"name":"终端","hint":"高对比的绿色荧光"}},{"id":"sand","swatches":["#8a5a2b","#faf4e8","#fffdf7"],"en":{"name":"Sand","hint":"Quiet paper workspace"},"zh":{"name":"砂纸","hint":"安静的纸张工作区"}},{"id":"cobalt","swatches":["#3f63d8","#eef2ff","#ffffff"],"en":{"name":"Cobalt","hint":"Electric blue focus"},"zh":{"name":"钴蓝","hint":"电光蓝的专注感"}},{"id":"plum","swatches":["#914b8b","#fbf0fa","#ffffff"],"en":{"name":"Plum","hint":"Rich evening editorial"},"zh":{"name":"梅紫","hint":"浓郁的夜间编辑感"}},{"id":"mint","swatches":["#138a78","#eafaf5","#ffffff"],"en":{"name":"Mint","hint":"Fresh lightweight clarity"},"zh":{"name":"薄荷","hint":"清新的轻盈明亮感"}},{"id":"copper","swatches":["#b65c35","#fff2e9","#fffdfb"],"en":{"name":"Copper","hint":"Crafted warm contrast"},"zh":{"name":"铜色","hint":"手作感的温暖对比"}},{"id":"mono","swatches":["#333333","#f3f3f3","#ffffff"],"en":{"name":"Mono","hint":"Quiet black and white"},"zh":{"name":"黑白","hint":"安静的黑白工作区"}},{"id":"abyss","swatches":["#6ea8ff","#080b12","#121a29"],"en":{"name":"Abyss","hint":"Deep blue-black focus"},"zh":{"name":"深渊","hint":"深蓝黑的专注感"}},{"id":"ember","swatches":["#ff9b6b","#160d0b","#2b1815"],"en":{"name":"Ember","hint":"Warm firelit workspace"},"zh":{"name":"余烬","hint":"温暖的火光工作区"}},{"id":"aurora","swatches":["#64e8d2","#071517","#123336"],"en":{"name":"Aurora","hint":"Teal light in the dark"},"zh":{"name":"极光","hint":"暗夜中的青绿色光"}},{"id":"violet","swatches":["#c59bff","#110d1d","#261a39"],"en":{"name":"Violet","hint":"Deep creative night"},"zh":{"name":"紫夜","hint":"深色的创意夜景"}},{"id":"navy","swatches":["#7fb3ff","#091323","#162746"],"en":{"name":"Navy","hint":"Clear midnight blue"},"zh":{"name":"海军蓝","hint":"清晰的午夜蓝"}},{"id":"crimson","swatches":["#ff7187","#1b0b12","#32131e"],"en":{"name":"Crimson","hint":"Bold dark red focus"},"zh":{"name":"绯红","hint":"醒目的深红专注感"}},{"id":"sapphire","swatches":["#61b7ff","#07111f","#102844"],"en":{"name":"Sapphire","hint":"Deep blue clarity"},"zh":{"name":"蓝宝石","hint":"深邃的蓝色清晰感"}},{"id":"moss","swatches":["#a7d36f","#0c160f","#1a2c1b"],"en":{"name":"Moss","hint":"Grounded green shadow"},"zh":{"name":"苔藓","hint":"沉稳的绿色阴影"}},{"id":"solar","swatches":["#ffd166","#17120a","#302516"],"en":{"name":"Solar","hint":"Golden light after dark"},"zh":{"name":"日冕","hint":"暗夜中的金色光线"}},{"id":"ink","swatches":["#e4e7ec","#0d0f12","#1c2026"],"en":{"name":"Ink","hint":"Minimal editorial black"},"zh":{"name":"墨色","hint":"极简的编辑黑"}}];
10
+ const kinds = ['note', 'chat', 'bill', 'finance', 'task', 'waiting', 'bookmark', 'file', 'decision', 'log'];
11
+ const en = {
12
+ name: 'Mory', repository: 'Local Memory Repository', recordTypes: 'Record types', all: 'All memories',
13
+ add: 'New memory', refresh: 'Refresh', loading: 'Loading memories…', reading: 'Reading your local repository.',
14
+ empty: 'Your memory repository starts here', emptyHint: 'Save an idea, a useful detail, or a decision you want to keep.',
15
+ noMatch: 'No matching memories', clear: 'Clear filters', search: 'Search your memories…', allSources: 'All sources',
16
+ allTime: 'Any time', today: 'Today', week: 'This week', month: 'This month', topics: 'Topics', objects: 'memories',
17
+ allPrivacy: 'All visibility', public: 'Public', private: 'Private', tag: 'Filter by tag', project: 'Project ID',
18
+ filters: 'Filters', time: 'Time', entity: 'Source', content: 'Memory content', category: 'Category', lifecycle: 'Lifecycle',
19
+ active: 'Active', localDevice: 'Local device', local: 'Local', connected: 'Connected', offline: 'Not connected',
20
+ title: 'Title', tags: 'Tags (comma separated)', kind: 'Kind', save: 'Save memory', cancel: 'Cancel', close: 'Close',
21
+ edit: 'Edit', remove: 'Delete', detail: 'Memory details', revision: 'Revision', markPrivate: 'Mark as private',
22
+ privateHint: 'A display flag; connected AI tools can still read this memory.',
23
+ confirm: 'Delete this memory?', confirmHint: 'It will disappear from active memories. Mory keeps a deletion record.',
24
+ confirmDelete: 'Delete memory', saved: 'Memory saved.', deleted: 'Memory deleted.', unsaved: 'Save or cancel your changes before leaving.',
25
+ conflict: 'This memory changed elsewhere. Your draft is preserved. Cancel and reopen it to read the latest version.',
26
+ setup: 'Connect your local Mory', setupHint: 'Run these commands on the computer hosting DSH, then refresh.',
27
+ shared: 'The same memories, here and in your local Mory web console.', back: 'Back to conversation',
28
+ theme: 'Switch between the original light and midnight themes', failed: 'Mory request failed.',
29
+ previous: 'Previous page', next: 'Next page', pageSize: 'Per page', of: 'of', page: 'Page',
30
+ tooLarge: 'This record exceeds the editor limit. Please edit it in the Mory web console.',
31
+ catalogLimit: 'This project contains more than 10000 memories. Enter a project ID to narrow the repository.',
32
+ searchLimit: 'Showing up to 50 ranked search results.',
33
+ note: 'Note', chat: 'Chat', bill: 'Bill', finance: 'Finance', task: 'Task', waiting: 'Waiting', bookmark: 'Bookmark', file: 'File', decision: 'Decision', log: 'Log',
34
+ manual: 'Manual', dsh: 'DSH', browser: 'Browser', clipboard: 'Clipboard', github: 'GitHub', gitee: 'Gitee',
35
+ };
36
+ const zh = {
37
+ name: 'Mory', repository: '本地记忆仓库', recordTypes: '记录类型', all: '全部记忆',
38
+ add: '新增记忆', refresh: '刷新', loading: '正在加载记忆…', reading: '正在读取你的本地记忆仓库。',
39
+ empty: '从这里开始，留下你的记忆', emptyHint: '记录一个灵感、一段有用的信息，或一个值得保留的决定。',
40
+ noMatch: '没有找到匹配的记忆', clear: '清除筛选', search: '搜索你的记忆…', allSources: '全部来源',
41
+ allTime: '全部时间', today: '今天', week: '本周', month: '本月', topics: '个主题', objects: '条记忆',
42
+ allPrivacy: '全部可见性', public: '公开', private: '私密', tag: '筛选标签', project: '项目 ID',
43
+ filters: '筛选', time: '时间', entity: '来源', content: '记忆内容', category: '分类', lifecycle: '生命周期',
44
+ active: '活跃', localDevice: '本地设备', local: '本地', connected: '已连接', offline: '未连接',
45
+ title: '标题', tags: '标签（逗号分隔）', kind: '类型', save: '保存记忆', cancel: '取消', close: '关闭',
46
+ edit: '编辑', remove: '删除', detail: '记忆详情', revision: '版本', markPrivate: '标记为私密',
47
+ privateHint: '这是展示标记；已连接的 AI 工具仍可读取这条记忆。',
48
+ confirm: '删除这条记忆？', confirmHint: '它将从有效记忆中移除，Mory 会保留删除记录。',
49
+ confirmDelete: '确认删除', saved: '记忆已保存。', deleted: '记忆已删除。', unsaved: '请先保存或取消当前修改。',
50
+ conflict: '这条记忆已在其他位置修改。草稿已保留，请取消后重新打开以读取最新版本。',
51
+ setup: '连接你的本地 Mory', setupHint: '在运行 DSH 的电脑上执行以下命令，然后刷新。',
52
+ shared: '与本地 Mory 网页版，共用同一个记忆仓库。', back: '返回对话',
53
+ theme: '切换原站的浅色与午夜主题', failed: 'Mory 请求失败。',
54
+ previous: '上一页', next: '下一页', pageSize: '每页', of: '/', page: '页',
55
+ tooLarge: '这条记忆超过编辑器限制，请到 Mory 网页版编辑。',
56
+ catalogLimit: '此项目超过 10000 条记忆，请输入项目 ID 缩小仓库范围。',
57
+ searchLimit: '最多显示 50 条按相关度排序的搜索结果。',
58
+ note: '笔记', chat: '聊天', bill: '账单', finance: '财务', task: '任务', waiting: '等待', bookmark: '书签', file: '文件', decision: '决定', log: '日志',
59
+ manual: '手动', dsh: 'DSH', browser: '浏览器', clipboard: '剪贴板', github: 'GitHub', gitee: 'Gitee',
60
+ };
61
+ Object.assign(en, {
62
+ settings: 'Settings', settingsHint: 'Manage your repository, connections and preferences.', returnMemories: 'Back to memories',
63
+ syncSettings: 'Memory Sync', languageSettings: 'Language', themeSettings: 'Appearance', healthSettings: 'Health', connectionSettings: 'Mory connection',
64
+ languageHint: 'Choose a language for Mory. This does not change the rest of DSH.', followDSH: 'Follow DSH', appearanceHint: 'The original Mory themes, applied only to this panel.',
65
+ connectionHint: 'Connect to Mory on the DSH host, or to your own HTTPS service.', apiUrl: 'API address', accessToken: 'Access token', storedToken: 'Token saved — leave blank to keep it', tokenOptional: 'Leave blank to use the local Mory configuration', saveSettings: 'Save settings', settingsSaved: 'Settings saved.', checkConnection: 'Check connection', checking: 'Checking…', connectionOK: 'Connection successful', autoDetect: 'Use local auto-detection',
66
+ connectionPrecedence: 'Advanced DSH plugin configuration and environment variables take priority over these preferences.',
67
+ provider: 'Provider', repositoryUrl: 'Repository URL', branch: 'Branch', filePath: 'Snapshot path', deviceName: 'Device name',
68
+ syncHint: 'Use a private GitHub or Gitee repository to keep memories available across devices.', syncPrivacy: 'Sync includes private memories and deletion records. Use a private repository. Tokens stay on the DSH host and are never returned to this page.',
69
+ autoSync: 'Automatic backup', autoSyncHint: 'Merge and back up after future changes made through this plugin or its agent tool. Saving settings does not upload memories.',
70
+ mergePush: 'Merge & push', pushRemote: 'Push', pullRemote: 'Pull', syncing: 'Sync in progress…', syncDone: 'Sync completed.', lastSync: 'Last sync', neverSynced: 'No sync has run yet',
71
+ healthHint: 'Check the actual Mory service connection and repository status.', serviceAddress: 'Service address', totalMemories: 'Total memories', connectionStatus: 'Connection status',
72
+ settingsConflict: 'Settings changed elsewhere. Reload settings before saving again.', reloadSettings: 'Reload settings', unsavedSettings: 'Save your connection details before checking or syncing.',
73
+ });
74
+ Object.assign(zh, {
75
+ settings: '设置', settingsHint: '管理记忆仓库、服务连接和界面偏好。', returnMemories: '返回记忆库',
76
+ syncSettings: '记忆同步', languageSettings: '语言', themeSettings: '外观主题', healthSettings: '健康状态', connectionSettings: 'Mory 连接',
77
+ languageHint: '选择 Mory 的界面语言，不会改变 DSH 其他页面的语言。', followDSH: '跟随 DSH', appearanceHint: '沿用 Mory 原站的主题，仅应用于当前插件。',
78
+ connectionHint: '连接 DSH 所在电脑上的 Mory，或你自己的 HTTPS 服务。', apiUrl: 'API 地址', accessToken: '访问令牌', storedToken: '已保存令牌，留空保持不变', tokenOptional: '留空使用本地 Mory 配置', saveSettings: '保存设置', settingsSaved: '设置已保存。', checkConnection: '检测连接', checking: '检测中…', connectionOK: '连接成功', autoDetect: '自动检测本地服务',
79
+ connectionPrecedence: 'DSH 插件高级配置和环境变量的优先级高于这里保存的偏好。',
80
+ provider: '服务商', repositoryUrl: '仓库地址', branch: '分支', filePath: '快照路径', deviceName: '设备名称',
81
+ syncHint: '使用 GitHub 或 Gitee 私有仓库，在多台设备间保留记忆。', syncPrivacy: '同步会包含私密记忆和删除记录，请使用私有仓库。令牌保存在 DSH 后端，读取设置时不会返回到页面。',
82
+ autoSync: '自动备份', autoSyncHint: '之后通过此插件或 AI 工具修改记忆时，自动合并备份。保存设置本身不会上传记忆。',
83
+ mergePush: '合并并推送', pushRemote: '推送', pullRemote: '拉取', syncing: '正在同步…', syncDone: '同步完成。', lastSync: '最近同步', neverSynced: '尚未执行同步',
84
+ healthHint: '检测真实的 Mory 服务连接与记忆仓库状态。', serviceAddress: '服务地址', totalMemories: '记忆总数', connectionStatus: '连接状态',
85
+ settingsConflict: '设置已在其他位置修改，请重新读取后再保存。', reloadSettings: '重新读取设置', unsavedSettings: '请先保存连接信息，再检测或同步。',
86
+ });
87
+ for (const item of themes) {
88
+ en[`themeName.${item.id}`] = item.en.name; en[`themeHint.${item.id}`] = item.en.hint;
89
+ zh[`themeName.${item.id}`] = item.zh.name; zh[`themeHint.${item.id}`] = item.zh.hint;
90
+ }
91
+ const adaptation = `
92
+ @scope (.mory-app) {
93
+ :scope { min-height:0!important; height:100%; overflow:auto!important; color:var(--text); background:var(--bg); font-size:14px; line-height:1.5; }
94
+ *,*::before,*::after {box-sizing:border-box}
95
+ h1,h2,h3,p {margin:0} button,input,select,textarea {font:inherit} button {cursor:pointer} button:disabled {opacity:.45;cursor:default}
96
+ [data-slot=button] {display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:40px;border:1px solid transparent;border-radius:var(--radius-ui);padding:8px 14px;font-size:13px;font-weight:500;white-space:nowrap;background:hsl(var(--primary));color:hsl(var(--primary-foreground));transition:background .15s,color .15s,border-color .15s}
97
+ [data-slot=button][data-variant=ghost] {background:transparent;color:var(--text)}
98
+ [data-slot=button][data-variant=outline] {background:var(--surface);color:var(--text);border-color:var(--border)}
99
+ [data-slot=button][data-variant=secondary] {background:var(--surface-muted);color:var(--text);border-color:var(--border-soft)}
100
+ [data-slot=button][data-variant=destructive] {background:var(--danger);color:var(--surface)}
101
+ [data-slot=button]:hover:not(:disabled) {filter:brightness(.96)}
102
+ :focus-visible {outline:2px solid var(--accent);outline-offset:3px}
103
+ [data-slot=input]:not([type=checkbox]),[data-slot=textarea],select {width:100%;min-width:0;min-height:42px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface);color:var(--text);padding:10px 12px;font-size:13px}
104
+ input::placeholder,textarea::placeholder {color:var(--muted)}
105
+ .product-shell {min-height:100%;padding:20px 24px 32px}
106
+ .product-header {width:100%;max-width:1560px;min-height:58px;margin:0 auto 18px;padding:0 4px;gap:16px}
107
+ .product-header .brand-lockup {opacity:1!important;pointer-events:auto!important;min-width:0}
108
+ .product-header .brand-lockup strong {font-size:19px;font-weight:700}
109
+ .product-header .brand-lockup span {font-size:12px;color:var(--muted)}
110
+ .product-header .brand-glyph.logo-mark {height:44px;width:44px;flex-shrink:0}
111
+ .mory-original-logo {width:44px;height:44px;display:block}
112
+ .header-actions {gap:8px;max-width:none}
113
+ .dsh-icon-button {width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;border-radius:12px!important}
114
+ .status-chip {min-width:0;height:34px;font-weight:500;font-size:12px}
115
+ .dsh-status-dot {width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
116
+ .workspace-layout {display:grid!important;grid-template-columns:184px minmax(0,1fr);gap:18px;width:100%;max-width:1560px}
117
+ .workspace-nav {display:block!important;top:16px;border-radius:20px;padding:14px 10px;box-shadow:none}
118
+ .nav-section-label {font-size:11px;letter-spacing:.05em;margin:8px 10px 14px;color:var(--muted)}
119
+ .workspace-nav .record-nav-list {display:flex;flex-direction:column}
120
+ .workspace-nav .nav-section-label {display:block}
121
+ .record-nav-list button {display:flex;width:100%;min-height:40px;padding:8px 10px;gap:10px;justify-content:flex-start;font-weight:500}
122
+ .record-nav-list button span {flex:1;text-align:left}
123
+ .record-nav-list button strong {font-size:11px;min-width:22px;text-align:center;font-weight:500;opacity:.7}
124
+ .record-nav-list button.active {font-weight:600}
125
+ .sidebar-footer {font-size:11px;line-height:1.7;color:var(--muted);padding:14px 8px 2px}
126
+ .workspace-main {min-width:0}.feed-section {min-height:520px;border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:none;background:var(--surface)}
127
+ .section-heading {display:flex;gap:12px;align-items:center;margin:0 0 20px;flex-wrap:wrap}
128
+ .section-heading .capture-cta {margin:0;min-height:42px;box-shadow:none;border-radius:12px}
129
+ .feed-summary {margin-left:auto;font-size:12px;gap:14px;color:var(--muted);display:flex;align-items:center}
130
+ .feed-summary strong {font-size:14px;color:var(--text);font-weight:600}
131
+ .dsh-controls {display:grid;grid-template-columns:minmax(150px,1fr) 130px;gap:10px;margin-bottom:12px}
132
+ .dsh-controls .search-input {display:flex;align-items:center;min-width:0;gap:10px;background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;padding:0 12px;box-shadow:0 2px 6px color-mix(in srgb,var(--text) 3%,transparent)}
133
+ .dsh-controls .search-input [data-slot=input] {height:42px;min-height:42px;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;border-radius:0!important}
134
+ .dsh-controls .search-input:focus-within {outline:2px solid var(--accent);outline-offset:2px}
135
+ .dsh-filter-row {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
136
+ .dsh-filter-row select {width:auto;flex:1;min-width:110px;max-width:180px;min-height:36px;padding:7px 10px;border-radius:10px;font-size:12px}
137
+ .dsh-filter-row input {flex:1;min-width:100px;max-width:180px;min-height:36px!important;height:36px;padding:7px 10px!important;border-radius:10px!important;font-size:12px}
138
+ .dsh-filter-row .dsh-filter-label {display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-right:2px}
139
+ .memory-list-header,.memory-card {grid-template-columns:70px 100px minmax(120px,1fr) 80px 60px!important;gap:12px;padding:12px 10px;min-width:0}
140
+ .memory-list-header {display:grid;font-weight:500;font-size:11px;letter-spacing:0;text-transform:none;min-height:40px}
141
+ .memory-card {min-height:82px;cursor:pointer;outline-offset:-2px}
142
+ .memory-title-button {display:block!important;width:100%;font-size:13px;font-weight:600;min-height:0!important;padding:0!important;white-space:nowrap;text-align:left;justify-content:flex-start;border:0!important;border-radius:0!important}
143
+ .memory-content-cell p {margin-top:5px;font-size:12px;font-weight:400;line-height:1.5}
144
+ .memory-time {font-size:11px;line-height:1.6}.memory-entity strong {font-size:12px;font-weight:500}.memory-entity span {font-size:11px}
145
+ .memory-category .dsh-kind {padding:4px 8px!important;min-height:0!important;font-size:11px!important;font-weight:500!important;border-radius:8px!important;max-width:100%;background:var(--surface-muted)!important}
146
+ .memory-category>span {font-size:10px}.memory-life [data-slot=badge] {display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:500;border-radius:6px;padding:4px 7px;white-space:nowrap}
147
+ .empty-feed {min-height:330px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:48px 24px;text-align:center;background:transparent;border:0;border-radius:0}
148
+ .empty-feed svg {color:var(--accent);opacity:.65}.empty-feed h3 {font-size:17px;font-weight:600;color:var(--text)}.empty-feed p {font-size:13px;line-height:1.8;color:var(--muted);max-width:340px}
149
+ .dsh-notice {display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border-soft);border-radius:12px;font-size:12px;line-height:1.7;margin-bottom:14px;background:var(--surface-muted);overflow-wrap:anywhere}
150
+ .dsh-notice.error {color:var(--danger)}.dsh-notice.success {color:var(--accent)}
151
+ .dsh-setup {padding:24px;border:1px solid var(--border);border-radius:16px;margin-bottom:16px}.dsh-setup h2 {font-size:18px;margin-bottom:8px}.dsh-setup p {font-size:13px;color:var(--muted);line-height:1.7}.dsh-setup pre {padding:16px;border-radius:12px;background:var(--surface-muted);font-size:12px;line-height:1.8;white-space:pre-wrap}
152
+ .memory-pagination {padding-top:18px;gap:10px;font-size:11px;justify-content:space-between;flex-wrap:wrap}.page-size-options,.page-navigation {border:0;padding:0;margin:0;gap:6px}.page-size-options button,.page-navigation button {width:30px;min-width:30px;min-height:30px;height:30px;font-size:11px;padding:0}
153
+ .dsh-search-limit {font-size:11px;color:var(--muted);margin:10px 0}
154
+ .dsh-footer {margin:16px 4px 0;font-size:11px;color:var(--muted);line-height:1.7}
155
+ dialog.dsh-dialog {position:fixed;inset:0;margin:auto;transform:none;width:min(720px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 64px);padding:0;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-menu);overflow:auto}
156
+ dialog.dsh-dialog::backdrop {background:color-mix(in srgb,var(--text) 24%,transparent);backdrop-filter:blur(3px)}
157
+ .dsh-dialog-header {display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px;border-bottom:1px solid var(--border-soft)}
158
+ .dsh-dialog-header .eyebrow {font-size:11px;letter-spacing:.06em;color:var(--accent);display:flex;align-items:center;gap:7px;margin-bottom:8px}.dsh-dialog-header h2 {font-size:20px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
159
+ .dsh-dialog-body {padding:24px;display:flex;flex-direction:column;gap:16px}.dsh-dialog-body label:not(.dsh-checkbox) {display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted)}
160
+ .dsh-edit-form {display:flex;flex-direction:column;gap:16px}
161
+ .dsh-form-row {display:grid;grid-template-columns:1fr 1fr;gap:14px}.dsh-dialog-body textarea {resize:vertical;min-height:220px;line-height:1.8;color:var(--text)}
162
+ .dsh-checkbox {display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text)}.dsh-checkbox input {accent-color:var(--accent)}
163
+ .dsh-help {font-size:11px;line-height:1.7;color:var(--muted)}.dsh-detail-text {font-size:14px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
164
+ .dsh-meta {display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.dsh-meta span {padding:4px 8px;background:var(--surface-muted);border-radius:6px}
165
+ .dsh-dialog-footer {display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;padding:18px 24px;border-top:1px solid var(--border-soft)}.dsh-dialog-footer .dsh-delete-button {margin-right:auto;color:var(--danger)}
166
+ @container mory (max-width:1000px) {.workspace-layout{grid-template-columns:160px minmax(0,1fr)}.memory-list-header,.memory-card{grid-template-columns:64px minmax(130px,1fr) 74px 56px!important;gap:10px}.memory-entity,.dsh-entity-label{display:none!important}.feed-section{padding:16px}.product-shell{padding:18px}}
167
+ @container mory (min-width:761px) and (max-width:1000px) {.memory-card .memory-time{grid-column:1!important;grid-row:1!important;width:auto!important}.memory-card .memory-content-cell{grid-column:2!important;grid-row:1!important}.memory-card .memory-content-cell p{display:block!important}.memory-card .memory-category{grid-column:3!important;grid-row:1!important;display:grid!important}.memory-card .memory-life{grid-column:4!important;grid-row:1!important}}
168
+ @container mory (max-width:760px) {.workspace-layout{display:block!important}.workspace-nav{display:none!important}.dsh-mobile-kind{display:block!important}.product-shell{padding:14px}.product-header{margin-bottom:14px}.product-header .brand-lockup span{display:none}.feed-section{border-radius:16px}.header-actions{flex-wrap:nowrap;max-width:none!important}.header-actions .status-chip{display:none}.feed-summary{gap:8px}.dsh-controls{grid-template-columns:minmax(120px,1fr) 115px}.memory-list-header{display:none!important}.memory-card{grid-template-columns:minmax(110px,1fr) 62px 56px!important;min-height:70px;padding:12px 4px}.memory-card .memory-content-cell{grid-column:1!important;grid-row:1!important;display:block!important}.memory-card .memory-content-cell p{display:block!important}.memory-card .memory-time{grid-column:2!important;grid-row:1!important;width:auto!important}.memory-card .memory-life{grid-column:3!important;grid-row:1!important}.memory-category{display:none!important}.memory-pagination{justify-content:space-between!important;flex-wrap:wrap!important}.dsh-filter-row select,.dsh-filter-row input{max-width:none;flex:1 1 110px}.dsh-filter-label{display:none!important}.product-header .brand-lockup{gap:8px}.dsh-dialog-body,.dsh-dialog-header{padding:20px}.dsh-form-row{grid-template-columns:1fr}.dsh-dialog-footer{padding:16px 20px}}
169
+ .dsh-mobile-kind{display:none}
170
+ .feed-section[hidden] {display:none!important}
171
+ .dsh-settings-page {min-height:520px;border:1px solid var(--border);border-radius:20px;padding:24px;background:var(--surface);box-shadow:none}
172
+ .dsh-settings-page .settings-page-header {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
173
+ .dsh-settings-page .settings-page-header h1 {font-size:24px;line-height:1.4;font-weight:600}.dsh-settings-page .settings-page-header p {font-size:13px;color:var(--muted);margin-top:8px;line-height:1.7}
174
+ .dsh-settings-page .settings-tabs {display:flex;flex-wrap:wrap;gap:6px;padding:0 0 16px;margin-bottom:24px;border-bottom:1px solid var(--border-soft);overflow:visible}
175
+ .dsh-settings-page .settings-tabs button {padding:9px 12px;min-height:38px;border-radius:10px;background:transparent;color:var(--muted);font-weight:500}
176
+ .dsh-settings-page .settings-tabs button.active {background:var(--surface-muted);color:var(--accent);border-color:var(--border-soft)}
177
+ .dsh-settings-panel {display:flex;flex-direction:column;gap:18px}.dsh-settings-panel>p {color:var(--muted);font-size:13px;line-height:1.8}
178
+ .dsh-settings-form {display:flex;flex-direction:column;gap:16px}.dsh-settings-form label:not(.dsh-checkbox) {display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted)}
179
+ .dsh-settings-form input,.dsh-settings-form select {color:var(--text)}.dsh-settings-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
180
+ .dsh-settings-form .dsh-checkbox {align-items:flex-start;padding:14px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface-muted)}.dsh-settings-form .dsh-checkbox input {margin-top:4px}.dsh-settings-form .dsh-checkbox strong,.dsh-settings-form .dsh-checkbox small {display:block}.dsh-settings-form .dsh-checkbox strong {font-weight:500}.dsh-settings-form .dsh-checkbox small {font-size:11px;color:var(--muted);line-height:1.7;margin-top:4px}
181
+ .dsh-settings-page .theme-options {display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))!important;gap:12px!important;max-height:none!important}
182
+ .dsh-settings-page .theme-option {min-height:96px;display:flex;align-items:center;text-align:left;gap:12px;padding:16px;border:1px solid var(--border-soft);border-radius:14px;background:var(--surface);color:var(--text)}
183
+ .dsh-settings-page .theme-option.selected {border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.dsh-settings-page .theme-swatches {display:flex;gap:3px;flex-shrink:0}.dsh-settings-page .theme-swatches span {width:15px;height:36px;border-radius:5px;border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
184
+ .dsh-settings-page .theme-option-copy {min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}.dsh-settings-page .theme-option-copy strong {font-size:13px;font-weight:500}.dsh-settings-page .theme-option-copy small {font-size:11px;line-height:1.6;color:var(--muted)}.dsh-settings-page .theme-check {width:16px;color:var(--accent)}
185
+ .dsh-health-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.dsh-health-metric {padding:20px 16px;background:var(--surface-muted);border:1px solid var(--border-soft);border-radius:14px}.dsh-health-metric strong {display:block;font-size:26px;font-weight:500;color:var(--text)}.dsh-health-metric span {font-size:12px;color:var(--muted)}
186
+ .dsh-health-details {display:grid;grid-template-columns:minmax(100px,.4fr) minmax(0,1fr);gap:10px 16px;font-size:12px;line-height:1.8}.dsh-health-details dt {color:var(--muted)}.dsh-health-details dd {margin:0;overflow-wrap:anywhere;color:var(--text)}
187
+ .dsh-settings-link {width:100%;justify-content:flex-start!important;gap:8px}.dsh-settings-link.active {color:var(--accent)!important;background:var(--surface-muted)!important}
188
+ @container mory (max-width:760px) {.dsh-settings-page{padding:18px 16px;border-radius:16px}.dsh-settings-page .settings-page-header{flex-direction:column;margin-bottom:18px}.dsh-settings-page .settings-tabs{gap:4px;margin-bottom:18px}.dsh-settings-page .settings-tabs button{padding:8px 10px;font-size:12px}.dsh-health-grid{gap:8px}.dsh-health-metric{padding:14px 10px}.dsh-health-metric strong{font-size:22px}.dsh-health-details{grid-template-columns:1fr;gap:4px}.dsh-health-details dd{margin-bottom:8px}}
189
+ @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
190
+ }
191
+ `;
192
+ const paths = {
193
+ archive: ['M3 5h18v4H3z', 'M5 9v12h14V9', 'M10 13h4'], note: ['M5 3h14v18H5z', 'M9 8h6M9 12h6M9 16h4'],
194
+ chat: ['M21 11a8 8 0 0 1-8 8H6l-4 3V11a9 9 0 0 1 19 0Z'], bill: ['M6 3h12v18l-3-2-3 2-3-2-3 2V3Z', 'M9 8h6M9 12h4'],
195
+ finance: ['M3 9h18L12 3 3 9Z', 'M5 10v8M10 10v8M15 10v8M20 10v8M3 21h18'], task: ['M9 3H5v18h14V7', 'm9 8 3 3 8-8'],
196
+ waiting: ['M6 3h12M6 21h12M8 3v5l4 4 4-4V3M8 21v-5l4-4 4 4v5'], bookmark: ['M6 3h12v18l-6-4-6 4V3Z'], file: ['M5 3h9l5 5v13H5V3Z', 'M14 3v6h5'],
197
+ decision: ['M4 4h16v16H4z', 'm8 12 3 3 6-7'], log: ['M4 3h16v18H4z', 'M8 7h8M8 12h8M8 17h4'],
198
+ search: ['M19 19 15 15', 'M16 10a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z'], refresh: ['M20 8a8 8 0 1 0 0 8', 'M20 3v5h-5'],
199
+ close: ['m6 6 12 12M18 6 6 18'], sun: ['M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z', 'M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1 1M18 18l1 1M5 19l1-1M18 6l1-1'],
200
+ settings: ['M9 3h6l1 3 3 1 2 5-2 5-3 1-1 3H9l-1-3-3-1-2-5 2-5 3-1 1-3Z', 'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'], cloud: ['M6 18a4 4 0 0 1-1-8 7 7 0 0 1 13 1 4 4 0 0 1 0 8H6Z'], globe: ['M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z', 'M3 12h18M12 3a17 17 0 0 0 0 18M12 3a17 17 0 0 1 0 18'], health: ['M3 12h4l3-7 4 14 3-7h4'], connection: ['m8 12 8-8M5 8l5 5-5 5M16 12l3-3M13 5l6 6'], moon: ['M21 13A9 9 0 0 1 11 3a9 9 0 1 0 10 10Z'], back: ['m10 5-7 7 7 7', 'M4 12h17'], filter: ['M4 7h16M7 12h10M10 17h4'], plus: ['M12 5v14M5 12h14'],
201
+ };
202
+ function Icon({ name = 'archive', size = 18 }) { return h('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true }, ...(paths[name] || paths.note).map((d, i) => h('path', { d, key: i }))); }
203
+ function Modal({ title, eyebrow, closeLabel, children, footer, onClose, busy }) {
204
+ const ref = React.useRef(null);
205
+ const closeRef = React.useRef(onClose); closeRef.current = onClose;
206
+ React.useEffect(() => { const dialog = ref.current; dialog.showModal(); return () => dialog.close(); }, []);
207
+ return h('dialog', { className: 'dsh-dialog', ref, 'aria-label': title, onCancel: event => { event.preventDefault(); if (!busy) closeRef.current(); } },
208
+ h('header', { className: 'dsh-dialog-header' }, h('div', null, h('span', { className: 'eyebrow' }, h(Icon), eyebrow), h('h2', null, title)),
209
+ h('button', { type: 'button', 'data-slot': 'button', 'data-variant': 'ghost', className: 'dsh-icon-button', 'aria-label': closeLabel, disabled: busy, onClick: onClose }, h(Icon, { name: 'close' }))),
210
+ h('div', { className: 'dsh-dialog-body' }, children), footer ? h('footer', { className: 'dsh-dialog-footer' }, footer) : null);
211
+ }
212
+ return {
213
+ inject: ['slots', 'locale', 'layout'],
214
+ apply(ctx) {
215
+ for (const [locale, dict] of [['en', en], ['zh', zh], ['zh-CN', zh]]) {
216
+ ctx.effect(() => ctx.locale.register('mory', locale, dict));
217
+ ctx.effect(() => ctx.locale.register('mory.english', locale, en));
218
+ ctx.effect(() => ctx.locale.register('mory.chinese', locale, zh));
219
+ }
220
+ const translations = { auto: ctx.locale.bind('mory'), en: ctx.locale.bind('mory.english'), zh: ctx.locale.bind('mory.chinese') };
221
+ const t = translations.auto;
222
+ const subscribe = fn => ctx.locale.subscribe(fn), snapshot = () => ctx.locale.getSnapshot();
223
+ function Page() {
224
+ const locale = React.useSyncExternalStore(subscribe, snapshot, snapshot);
225
+ const [language, setLanguage] = React.useState('auto');
226
+ const t = translations[language] || translations.auto;
227
+ const sourceLabel = value => Object.hasOwn(en, value) ? t(value) : value;
228
+ const [theme, setTheme] = React.useState(() => { try { const saved = localStorage.getItem('mory.dsh.theme'); return themes.some(item => item.id === saved) ? saved : 'default'; } catch { return 'default'; } });
229
+ const [catalog, setCatalog] = React.useState([]), [loading, setLoading] = React.useState(true), [connected, setConnected] = React.useState(false);
230
+ const [reload, setReload] = React.useState(0), [error, setError] = React.useState(null), [notice, setNotice] = React.useState('');
231
+ const [query, setQuery] = React.useState(''), [searchResults, setSearchResults] = React.useState(null), [searching, setSearching] = React.useState(false);
232
+ const [kind, setKind] = React.useState('all'), [source, setSource] = React.useState('all'), [privacy, setPrivacy] = React.useState('all'), [time, setTime] = React.useState('all');
233
+ const [tag, setTag] = React.useState(''), [projectDraft, setProjectDraft] = React.useState(''), [project, setProject] = React.useState('');
234
+ const [page, setPage] = React.useState(1), [pageSize, setPageSize] = React.useState(10);
235
+ const [selected, setSelected] = React.useState(null), [mode, setMode] = React.useState(null), [draft, setDraft] = React.useState({});
236
+ const [busy, setBusy] = React.useState(false), [confirmDelete, setConfirmDelete] = React.useState(false);
237
+ const [dialogError, setDialogError] = React.useState(null);
238
+ const [settingsTab, setSettingsTab] = React.useState(null), [settings, setSettings] = React.useState(null);
239
+ const [settingsBusy, setSettingsBusy] = React.useState(false), [settingsError, setSettingsError] = React.useState(null), [settingsNotice, setSettingsNotice] = React.useState('');
240
+ const [connectionDraft, setConnectionDraft] = React.useState({ apiUrl: '', token: '' });
241
+ const [syncDraft, setSyncDraft] = React.useState({ provider: 'github', repositoryUrl: '', branch: '', path: 'mory/memories.json', deviceName: '', token: '', autoSync: false });
242
+ const [health, setHealth] = React.useState(null);
243
+ const settingsRef = React.useRef(null);
244
+ const lifetime = React.useRef(null), detailController = React.useRef(null);
245
+ React.useEffect(() => { const controller = new AbortController(); lifetime.current = controller; return () => { controller.abort(); detailController.current?.abort(); }; }, []);
246
+ async function api(action, input = {}, signal) {
247
+ const response = await fetch('api/mory', { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ action, ...input }), signal: signal || lifetime.current?.signal });
248
+ let result; try { result = await response.json(); } catch { throw new Error(t('failed')); }
249
+ if (!response.ok) { const failure = new Error(result.error?.message || t('failed')); failure.code = result.error?.code; throw failure; } return result;
250
+ }
251
+ function adoptSettings(value, resetDrafts = false) {
252
+ settingsRef.current = value; setSettings(value);
253
+ setTheme(value.appearance); setLanguage(value.language);
254
+ try { localStorage.setItem('mory.dsh.theme', value.appearance); } catch {}
255
+ if (resetDrafts) {
256
+ setConnectionDraft({ apiUrl: value.connection.apiUrl || '', token: '' });
257
+ setSyncDraft({ ...value.sync, token: '' });
258
+ }
259
+ }
260
+ async function readSettings(resetDrafts = false) {
261
+ setSettingsBusy(true); setSettingsError(null);
262
+ try { const value = await api('settings.get'); if (!lifetime.current.signal.aborted) adoptSettings(value, resetDrafts); return value; }
263
+ catch (failure) { if (!lifetime.current.signal.aborted) setSettingsError(failure); return null; }
264
+ finally { if (!lifetime.current.signal.aborted) setSettingsBusy(false); }
265
+ }
266
+ async function saveSettings(patch, resetDrafts = false) {
267
+ if (!settingsRef.current) return null;
268
+ setSettingsBusy(true); setSettingsError(null); setSettingsNotice('');
269
+ try {
270
+ const value = await api('settings.update', { expectedRevision: settingsRef.current.revision, ...patch });
271
+ if (lifetime.current.signal.aborted) return null;
272
+ adoptSettings(value);
273
+ if (resetDrafts && patch.connection) setConnectionDraft({ apiUrl: value.connection.apiUrl || '', token: '' });
274
+ if (resetDrafts && patch.sync) setSyncDraft({ ...value.sync, token: '' });
275
+ setSettingsNotice(t('settingsSaved'));
276
+ if (patch.connection) setReload(value => value + 1);
277
+ return value;
278
+ } catch (failure) { if (!lifetime.current.signal.aborted) setSettingsError(failure); return null; }
279
+ finally { if (!lifetime.current.signal.aborted) setSettingsBusy(false); }
280
+ }
281
+ const connectionPatch = () => ({ apiUrl: connectionDraft.apiUrl.trim(), ...(connectionDraft.token.trim() ? { token: connectionDraft.token.trim() } : {}) });
282
+ const syncPatch = () => ({ provider: syncDraft.provider, repositoryUrl: syncDraft.repositoryUrl.trim(), branch: syncDraft.branch.trim(), path: syncDraft.path.trim(), deviceName: syncDraft.deviceName.trim(), autoSync: syncDraft.autoSync, ...(syncDraft.token.trim() ? { token: syncDraft.token.trim() } : {}) });
283
+ async function runSettings(action, input, patch) {
284
+ if (patch && !await saveSettings(patch, true)) return;
285
+ setSettingsBusy(true); setSettingsError(null); setSettingsNotice('');
286
+ if (action === 'health') setHealth(null);
287
+ try {
288
+ const result = await api(`settings.${action}`, input);
289
+ if (lifetime.current.signal.aborted) return;
290
+ if (action === 'health') setHealth(result);
291
+ if (action === 'check' && input.target === 'sync' && result.branch) setSyncDraft(previous => ({ ...previous, branch: previous.branch || result.branch }));
292
+ setSettingsNotice(t(action === 'sync' ? 'syncDone' : 'connectionOK') + (result.branch ? ` · ${result.branch}` : ''));
293
+ if (result.status === 'partial') { const failure = new Error(result.message || t('failed')); failure.code = result.code; setSettingsError(failure); setSettingsNotice(''); }
294
+ if (action === 'sync') setReload(value => value + 1);
295
+ if (action === 'sync' || action === 'health') { const current = await api('settings.get'); if (!lifetime.current.signal.aborted) adoptSettings(current); }
296
+ } catch (failure) { if (!lifetime.current.signal.aborted) setSettingsError(failure); }
297
+ finally { if (!lifetime.current.signal.aborted) setSettingsBusy(false); }
298
+ }
299
+ React.useEffect(() => { readSettings(true); }, []);
300
+ React.useEffect(() => { if (settingsTab === 'health') runSettings('health', {}); }, [settingsTab]);
301
+ React.useEffect(() => {
302
+ const controller = new AbortController(); setLoading(true); setError(null);
303
+ (async () => {
304
+ const records = []; let offset = 0;
305
+ do {
306
+ const result = await api('list', { limit: 50, offset, ...(project ? { projectId: project } : {}) }, controller.signal);
307
+ if (result.total > 10000) throw new Error(t('catalogLimit'));
308
+ records.push(...result.memories);
309
+ if (result.nextOffset != null && result.nextOffset <= offset) throw new Error(t('failed'));
310
+ offset = result.nextOffset;
311
+ } while (offset != null && !controller.signal.aborted);
312
+ if (!controller.signal.aborted) { setCatalog(records); setConnected(true); }
313
+ })().catch(failure => { if (!controller.signal.aborted) { setError(failure); setConnected(false); setCatalog([]); } }).finally(() => { if (!controller.signal.aborted) setLoading(false); });
314
+ return () => controller.abort();
315
+ }, [project, reload]);
316
+ React.useEffect(() => {
317
+ const controller = new AbortController();
318
+ if (!query.trim()) { setSearchResults(null); setSearching(false); return () => controller.abort(); }
319
+ setSearching(true); setSearchResults([]);
320
+ const timer = setTimeout(() => {
321
+ api('search', { query: query.trim(), limit: 50, ...(project ? { projectId: project } : {}) }, controller.signal)
322
+ .then(result => { if (!controller.signal.aborted) setSearchResults(result.results.map(item => item.memory)); })
323
+ .catch(failure => { if (!controller.signal.aborted) setError(failure); })
324
+ .finally(() => { if (!controller.signal.aborted) setSearching(false); });
325
+ }, 250);
326
+ return () => { clearTimeout(timer); controller.abort(); };
327
+ }, [query, project, reload]);
328
+ React.useEffect(() => { setPage(1); }, [query, project, kind, source, privacy, time, tag, pageSize]);
329
+ const filtered = (searchResults || catalog).filter(memory => {
330
+ const created = new Date(memory.capturedAt || memory.updatedAt);
331
+ const now = new Date(), age = now - created;
332
+ const dateMatches = time === 'all' || (time === 'today' ? created.toDateString() === now.toDateString() : age >= 0 && age <= (time === 'week' ? 7 : 30) * 86400000);
333
+ return (kind === 'all' || memory.kind === kind) && (source === 'all' || memory.source === source) && (privacy === 'all' || !!memory.isPrivate === (privacy === 'private')) && dateMatches && (!tag.trim() || (memory.tags || []).some(value => value.toLowerCase().includes(tag.trim().replace(/^#/, '').toLowerCase())));
334
+ });
335
+ const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize)), currentPage = Math.min(page, totalPages);
336
+ const visible = filtered.slice((currentPage - 1) * pageSize, currentPage * pageSize);
337
+ const counts = Object.fromEntries(kinds.map(value => [value, catalog.filter(memory => memory.kind === value).length]));
338
+ const today = catalog.filter(memory => new Date(memory.capturedAt || memory.updatedAt).toDateString() === new Date().toDateString()).length;
339
+ const topics = new Set(catalog.flatMap(memory => memory.tags || [])).size;
340
+ const sources = [...new Set(catalog.map(memory => memory.source).filter(Boolean))];
341
+ const editing = mode === 'edit' || mode === 'create';
342
+ const editable = selected && selected.payload.content.length <= 200000 && selected.tags.length <= 50;
343
+ function close() { if (busy) return; if (editing) { setDialogError(new Error(t('unsaved'))); return; } setMode(null); setSelected(null); setConfirmDelete(false); setDialogError(null); }
344
+ function cancelEdit() { setMode(selected ? 'detail' : null); setDialogError(null); }
345
+ function create() { setSelected(null); setDraft({ title: '', text: '', tags: '', kind: kind === 'all' ? 'note' : kind, isPrivate: false }); setDialogError(null); setMode('create'); }
346
+ async function open(memory) {
347
+ if (busy) return; detailController.current?.abort(); const controller = new AbortController(); detailController.current = controller; setBusy(true); setError(null);
348
+ try { const result = await api('get', { memoryId: memory.id }, controller.signal); if (!controller.signal.aborted) { setSelected(result.memory); setMode('detail'); setDialogError(null); setConfirmDelete(false); } }
349
+ catch (failure) { if (!controller.signal.aborted) setError(failure); } finally { if (!controller.signal.aborted) setBusy(false); }
350
+ }
351
+ function edit() { if (!editable) return; setDraft({ title: selected.payload.title, text: selected.payload.content, tags: selected.tags.join(', '), kind: selected.kind, isPrivate: selected.isPrivate }); setMode('edit'); setDialogError(null); setConfirmDelete(false); }
352
+ async function mutate(action, input) {
353
+ setBusy(true); setDialogError(null); setNotice('');
354
+ try { const result = await api(action, input); if (lifetime.current.signal.aborted) return;
355
+ setSelected(action === 'forget' ? null : result.memory); setMode(action === 'forget' ? null : 'detail'); setConfirmDelete(false); setNotice(t(action === 'forget' ? 'deleted' : 'saved')); setReload(value => value + 1);
356
+ } catch (failure) { if (!lifetime.current.signal.aborted) setDialogError(failure); }
357
+ finally { if (!lifetime.current.signal.aborted) setBusy(false); }
358
+ }
359
+ function save(event) {
360
+ event.preventDefault(); if (busy) return;
361
+ const input = { ...draft, tags: draft.tags.split(/[,，]/u).map(value => value.trim()).filter(Boolean) };
362
+ if (mode === 'edit') { Object.assign(input, { memoryId: selected.id, expectedRevision: selected.revision }); if (draft.tags === selected.tags.join(', ')) delete input.tags; }
363
+ else if (project) input.projectId = project;
364
+ mutate(mode === 'edit' ? 'update' : 'create', input);
365
+ }
366
+ const button = (text, onClick, props = {}) => h('button', { type: 'button', 'data-slot': 'button', 'data-variant': 'outline', disabled: busy, onClick, ...props }, text);
367
+ const select = (value, onChange, items, label, props = {}) => h('select', { value, onChange: event => onChange(event.target.value), 'aria-label': label, disabled: busy, ...props }, ...items.map(([key, text]) => h('option', { key, value: key }, text)));
368
+ const field = (name, key, type = 'input', extra = {}) => h('label', { key }, t(name), h(type, { 'data-slot': type === 'textarea' ? 'textarea' : 'input', value: draft[key] || '', disabled: busy, onChange: event => setDraft(previous => ({ ...previous, [key]: event.target.value })), ...extra }));
369
+ const noticeView = failure => h('div', { className: 'dsh-notice error', role: 'alert' }, failure.code === 'REVISION_CONFLICT' ? t('conflict') : failure.message);
370
+ function formatTime(value) { const date = new Date(value); return Number.isNaN(date.getTime()) ? '—' : new Intl.DateTimeFormat(locale.active, { month: 'short', day: 'numeric' }).format(date); }
371
+ function chooseKind(value) { setSettingsTab(null); setKind(value); setQuery(''); }
372
+ function resetFilters() { setKind('all'); setSource('all'); setTime('all'); setPrivacy('all'); setTag(''); setQuery(''); }
373
+ const navButton = value => button([h(Icon, { name: value === 'all' ? 'archive' : value, size: 17, key: 'icon' }), h('span', { key: 'text' }, t(value)), h('strong', { key: 'count' }, value === 'all' ? catalog.length : counts[value])], () => chooseKind(value), { key: value, 'data-variant': 'ghost', className: !settingsTab && kind === value ? 'active' : '', 'aria-pressed': !settingsTab && kind === value });
374
+ const settingsTabs = [['sync', 'syncSettings', 'cloud'], ['language', 'languageSettings', 'globe'], ['theme', 'themeSettings', 'sun'], ['health', 'healthSettings', 'health'], ['connection', 'connectionSettings', 'connection']];
375
+ const settingsDisabled = settingsBusy || !settings;
376
+ const settingsButton = (label, onClick, props = {}) => button(label, onClick, { disabled: settingsDisabled, ...props });
377
+ const settingsField = (label, value, onChange, props = {}) => h('label', null, t(label), h('input', { 'data-slot': 'input', value: value || '', disabled: settingsBusy, onChange: event => onChange(event.target.value), ...props }));
378
+ const patchConnection = (key, value) => setConnectionDraft(previous => ({ ...previous, [key]: value }));
379
+ const patchSync = (key, value) => setSyncDraft(previous => ({ ...previous, [key]: value }));
380
+ const syncActions = h('div', { className: 'dsh-settings-actions' },
381
+ settingsButton(t('mergePush'), () => runSettings('sync', { mode: 'merge' }, { sync: syncPatch() }), { 'data-variant': 'default' }),
382
+ settingsButton(t('pushRemote'), () => runSettings('sync', { mode: 'push' }, { sync: syncPatch() })),
383
+ settingsButton(t('pullRemote'), () => runSettings('sync', { mode: 'pull' }, { sync: syncPatch() })));
384
+ const lastSync = settings?.lastSync;
385
+ const lastSyncMessage = lastSync ? lastSync.message || lastSync.error || t(lastSync.status === 'running' ? 'syncing' : lastSync.status === 'success' ? 'syncDone' : 'failed') : t('neverSynced');
386
+ const settingsContent = settingsTab === 'theme' ? h('section', { className: 'dsh-settings-panel' }, h('p', null, t('appearanceHint')),
387
+ h('div', { className: 'theme-options', role: 'group', 'aria-label': t('themeSettings') }, ...themes.map(item => h('button', { key: item.id, type: 'button', className: `theme-option ${theme === item.id ? 'selected' : ''}`, 'aria-pressed': theme === item.id, disabled: settingsDisabled, onClick: () => saveSettings({ appearance: item.id }) },
388
+ h('span', { className: 'theme-swatches', 'aria-hidden': true }, ...item.swatches.map(color => h('span', { key: color, style: { backgroundColor: color } }))), h('span', { className: 'theme-option-copy' }, h('strong', null, t(`themeName.${item.id}`)), h('small', null, t(`themeHint.${item.id}`))), h('span', { className: 'theme-check', 'aria-hidden': true }, theme === item.id ? '✓' : '')))))
389
+ : settingsTab === 'language' ? h('section', { className: 'dsh-settings-panel' }, h('p', null, t('languageHint')), h('div', { className: 'dsh-settings-form' }, h('label', null, t('languageSettings'), select(language, value => saveSettings({ language: value }), [['auto', t('followDSH')], ['en', 'English'], ['zh', '简体中文']], t('languageSettings'), { disabled: settingsDisabled }))))
390
+ : settingsTab === 'connection' ? h('section', { className: 'dsh-settings-panel' }, h('p', null, t('connectionHint')),
391
+ h('form', { className: 'dsh-settings-form', onSubmit: event => { event.preventDefault(); saveSettings({ connection: connectionPatch() }, true); } },
392
+ settingsField('apiUrl', connectionDraft.apiUrl, value => patchConnection('apiUrl', value), { type: 'url', placeholder: t('autoDetect'), maxLength: 2048 }),
393
+ settingsField('accessToken', connectionDraft.token, value => patchConnection('token', value), { type: 'password', autoComplete: 'new-password', placeholder: t(settings?.connection.tokenConfigured ? 'storedToken' : 'tokenOptional'), maxLength: 8192 }),
394
+ h('p', { className: 'dsh-help' }, t('connectionPrecedence')),
395
+ h('div', { className: 'dsh-settings-actions' }, settingsButton(t('saveSettings'), undefined, { type: 'submit', 'data-variant': 'default' }), settingsButton(t('checkConnection'), () => runSettings('check', { target: 'mory' }, { connection: connectionPatch() })), settingsButton(t('autoDetect'), () => saveSettings({ connection: { apiUrl: '', token: null } }, true)))))
396
+ : settingsTab === 'health' ? h('section', { className: 'dsh-settings-panel' }, h('p', null, t('healthHint')),
397
+ h('div', { className: 'dsh-health-grid' }, ...[[health?.total ?? catalog.length, 'totalMemories'], [today, 'today'], [topics, 'topics']].map(([value, key]) => h('div', { className: 'dsh-health-metric', key }, h('strong', null, value), h('span', null, t(key))))),
398
+ h('dl', { className: 'dsh-health-details' }, h('dt', null, t('connectionStatus')), h('dd', null, t(health?.connected ? 'connected' : 'offline')), h('dt', null, t('serviceAddress')), h('dd', null, health?.apiUrl || settings?.connection.apiUrl || t('autoDetect')), h('dt', null, t('lastSync')), h('dd', null, lastSyncMessage)),
399
+ h('div', { className: 'dsh-settings-actions' }, settingsButton(t('checkConnection'), () => runSettings('health', {}))))
400
+ : h('section', { className: 'dsh-settings-panel' }, h('p', null, t('syncHint')),
401
+ h('form', { className: 'dsh-settings-form', onSubmit: event => { event.preventDefault(); saveSettings({ sync: syncPatch() }, true); } },
402
+ h('div', { className: 'dsh-form-row' }, h('label', null, t('provider'), select(syncDraft.provider, value => patchSync('provider', value), [['github', 'GitHub'], ['gitee', 'Gitee']], t('provider'), { disabled: settingsBusy })), settingsField('repositoryUrl', syncDraft.repositoryUrl, value => patchSync('repositoryUrl', value), { type: 'url', placeholder: `https://${syncDraft.provider}.com/owner/repository`, maxLength: 2048 })),
403
+ h('div', { className: 'dsh-form-row' }, settingsField('accessToken', syncDraft.token, value => patchSync('token', value), { type: 'password', autoComplete: 'new-password', placeholder: t(settings?.sync.tokenConfigured ? 'storedToken' : 'accessToken'), maxLength: 8192 }), settingsField('deviceName', syncDraft.deviceName, value => patchSync('deviceName', value), { maxLength: 128 })),
404
+ h('div', { className: 'dsh-form-row' }, settingsField('branch', syncDraft.branch, value => patchSync('branch', value), { placeholder: 'main', maxLength: 256 }), settingsField('filePath', syncDraft.path, value => patchSync('path', value), { placeholder: 'mory/memories.json', maxLength: 1024 })),
405
+ h('label', { className: 'dsh-checkbox' }, h('input', { type: 'checkbox', checked: !!syncDraft.autoSync, disabled: settingsBusy, onChange: event => patchSync('autoSync', event.target.checked) }), h('span', null, h('strong', null, t('autoSync')), h('small', null, t('autoSyncHint')))),
406
+ h('div', { className: 'dsh-settings-actions' }, settingsButton(t('saveSettings'), undefined, { type: 'submit', 'data-variant': 'default' }), settingsButton(t('checkConnection'), () => runSettings('check', { target: 'sync' }, { sync: syncPatch() })))),
407
+ h('div', { className: 'dsh-notice' }, t('syncPrivacy')), syncActions,
408
+ h('p', { className: 'dsh-help' }, `${t('lastSync')}: ${lastSyncMessage}`));
409
+ const settingsView = settingsTab ? h('section', { className: 'settings-page dsh-settings-page', 'aria-label': t('settings') },
410
+ h('header', { className: 'settings-page-header' }, h('div', null, h('h1', null, t('settings')), h('p', null, t('settingsHint'))), button([h(Icon, { name: 'back', key: 'icon', size: 15 }), t('returnMemories')], () => setSettingsTab(null))),
411
+ h('nav', { className: 'settings-tabs', 'aria-label': t('settings') }, ...settingsTabs.map(([key, label, icon]) => button([h(Icon, { name: icon, key: 'icon', size: 15 }), t(label)], () => setSettingsTab(key), { key, className: settingsTab === key ? 'active' : '', 'aria-pressed': settingsTab === key }))),
412
+ settingsError ? h('div', { className: 'dsh-notice error', role: 'alert' }, h('span', null, ['REVISION_CONFLICT', 'SETTINGS_CONFLICT'].includes(settingsError.code) ? t('settingsConflict') : settingsError.message), button(t('reloadSettings'), () => readSettings(true), { disabled: settingsBusy })) : null,
413
+ settingsNotice ? h('div', { className: 'dsh-notice success', role: 'status' }, settingsNotice) : null,
414
+ settingsBusy ? h('p', { className: 'dsh-help', role: 'status' }, t('checking')) : null,
415
+ settingsContent) : null;
416
+ const details = mode && h(Modal, { title: mode === 'create' ? t('add') : editing ? t('edit') : selected.payload.title, eyebrow: t(mode === 'create' ? 'add' : 'detail'), closeLabel: t('close'), onClose: close, busy,
417
+ footer: editing ? [button(t('cancel'), cancelEdit, { key: 'cancel' }), button(t('save'), save, { key: 'save', 'data-variant': 'default', disabled: busy || (!draft.title.trim() && !draft.text.trim()) })] : [button(t('remove'), () => setConfirmDelete(true), { key: 'delete', 'data-variant': 'ghost', className: 'dsh-delete-button' }), button(t('close'), close, { key: 'close' }), button(t('edit'), edit, { key: 'edit', 'data-variant': 'default', disabled: busy || !editable })],
418
+ }, dialogError ? noticeView(dialogError) : null,
419
+ editing ? h('form', { onSubmit: save, className: 'dsh-edit-form' },
420
+ field('title', 'title', 'input', { maxLength: 4096, autoFocus: true }),
421
+ h('div', { className: 'dsh-form-row' }, h('label', null, t('kind'), select(draft.kind, value => setDraft(previous => ({ ...previous, kind: value })), kinds.map(value => [value, t(value)]), t('kind'))), field('tags', 'tags')),
422
+ field('content', 'text', 'textarea', { maxLength: 200000 }),
423
+ h('label', { className: 'dsh-checkbox' }, h('input', { type: 'checkbox', checked: !!draft.isPrivate, disabled: busy, onChange: event => setDraft(previous => ({ ...previous, isPrivate: event.target.checked })) }), t('markPrivate')),
424
+ h('p', { className: 'dsh-help' }, t('privateHint')))
425
+ : h(React.Fragment, null,
426
+ h('div', { className: 'dsh-meta' }, h('span', null, t(selected.kind)), h('span', null, sourceLabel(selected.source)), h('span', null, `${t('revision')} ${selected.revision}`), h('span', null, formatTime(selected.capturedAt)), ...selected.tags.map((value, index) => h('span', { key: index }, `#${value}`))),
427
+ h('div', { className: 'dsh-detail-text' }, selected.payload.content),
428
+ !editable ? h('p', { className: 'dsh-help' }, t('tooLarge')) : null,
429
+ selected.isPrivate ? h('p', { className: 'dsh-help' }, `${t('private')} · ${t('privateHint')}`) : null,
430
+ confirmDelete ? h('div', { className: 'dsh-notice error', role: 'group', 'aria-label': t('confirm') }, h('div', null, h('strong', null, t('confirm')), h('p', { className: 'dsh-help' }, t('confirmHint'))), button(t('cancel'), () => setConfirmDelete(false)), button(t('confirmDelete'), () => mutate('forget', { memoryId: selected.id, expectedRevision: selected.revision }), { 'data-variant': 'destructive' })) : null));
431
+ return h('div', { className: 'mory-app', 'data-theme': theme, 'data-mory-version': '0.1.2' }, h('style', null, css + adaptation),
432
+ h('main', { className: 'product-shell' },
433
+ h('header', { className: 'product-header' }, h('div', { className: 'brand-lockup' }, h('div', { className: 'brand-glyph logo-mark' }, h('img', { src: logo, alt: 'Mory', className: 'mory-original-logo' })), h('div', null, h('strong', null, 'Mory'), h('span', null, t('repository')))),
434
+ h('div', { className: 'header-actions' }, h('span', { className: `status-chip ${connected ? 'good' : 'error'}`, role: 'status' }, h('i', { className: 'dsh-status-dot' }), `${t(connected ? 'local' : 'offline')} · ${catalog.length} ${t('objects')}`),
435
+ button(h(Icon, { name: 'settings', size: 18 }), () => setSettingsTab(settingsTab ? null : 'sync'), { className: 'dsh-icon-button', title: t('settings'), 'aria-label': t('settings'), 'aria-pressed': !!settingsTab, 'data-variant': 'ghost' }),
436
+ button(h(Icon, { name: 'back', size: 17 }), () => ctx.layout.selectPanel(null), { className: 'dsh-icon-button', title: t('back'), 'aria-label': t('back'), 'data-variant': 'ghost' }))),
437
+ h('section', { className: 'workspace-layout' }, h('aside', { className: 'workspace-nav', 'aria-label': t('recordTypes') }, h('div', { className: 'nav-section-label' }, t('recordTypes')), h('div', { className: 'record-nav-list all-memory-list' }, navButton('all')), h('div', { className: 'record-nav-list all-types-list' }, ...kinds.map(navButton)), h('div', { className: 'sidebar-footer' }, button([h(Icon, { name: 'settings', key: 'icon', size: 16 }), t('settings')], () => setSettingsTab('sync'), { className: `dsh-settings-link ${settingsTab ? 'active' : ''}`, 'data-variant': 'ghost', 'aria-pressed': !!settingsTab }), h('p', { style: { marginTop: 12 } }, t('shared')))),
438
+ h('div', { className: 'workspace-main' }, settingsView, h('section', { className: 'feed-section', hidden: !!settingsTab },
439
+ h('div', { className: 'section-heading' }, button([h(Icon, { name: 'plus', key: 'icon', size: 16 }), t('add')], create, { className: 'capture-cta feed-capture-button', 'data-variant': 'default' }), h('div', { className: 'feed-summary' }, h('span', null, h('strong', null, today), ` ${t('today')}`), h('span', null, h('strong', null, topics), ` ${t('topics')}`)), button(h(Icon, { name: 'refresh', size: 17 }), () => setReload(value => value + 1), { className: 'dsh-icon-button', title: t('refresh'), 'aria-label': t('refresh'), disabled: busy || loading })),
440
+ h('div', { className: 'dsh-controls', role: 'search' }, h('label', { className: 'search-input' }, h(Icon, { name: 'search', size: 17 }), h('input', { 'data-slot': 'input', type: 'search', value: query, maxLength: 4096, placeholder: t('search'), 'aria-label': t('search'), disabled: busy, onChange: event => setQuery(event.target.value) })), select(source, setSource, [['all', t('allSources')], ...sources.map(value => [value, sourceLabel(value)])], t('entity'))),
441
+ h('div', { className: 'dsh-filter-row' }, h('span', { className: 'dsh-filter-label' }, h(Icon, { name: 'filter', size: 14 }), t('filters')), select(kind, chooseKind, [['all', t('all')], ...kinds.map(value => [value, t(value)])], t('recordTypes'), { className: 'dsh-mobile-kind' }), select(time, setTime, ['all', 'today', 'week', 'month'].map(value => [value, t(value === 'all' ? 'allTime' : value)]), t('time')), select(privacy, setPrivacy, ['all', 'public', 'private'].map(value => [value, t(value === 'all' ? 'allPrivacy' : value)]), t('allPrivacy')),
442
+ h('input', { 'data-slot': 'input', value: tag, placeholder: t('tag'), 'aria-label': t('tag'), onChange: event => setTag(event.target.value) }), h('form', { onSubmit: event => { event.preventDefault(); setProject(projectDraft.trim()); }, style: { display: 'contents' } }, h('input', { 'data-slot': 'input', value: projectDraft, maxLength: 256, placeholder: t('project'), 'aria-label': t('project'), onChange: event => setProjectDraft(event.target.value), onBlur: () => setProject(projectDraft.trim()) }))),
443
+ error ? noticeView(error) : null, notice ? h('div', { className: 'dsh-notice success', role: 'status' }, notice) : null,
444
+ !connected && !loading ? h('div', { className: 'dsh-setup' }, h('h2', null, t('setup')), h('p', null, t('setupHint')), h('pre', null, 'npm install -g @illli-studio/mory\nmory init\nmory start --background')) : null,
445
+ loading || searching ? h('div', { className: 'empty-feed', role: 'status' }, h(Icon, { name: 'waiting', size: 28 }), h('h3', null, t('loading')), h('p', null, t('reading')))
446
+ : !visible.length ? h('div', { className: 'empty-feed' }, h(Icon, { name: 'archive', size: 30 }), h('h3', null, t(catalog.length || query ? 'noMatch' : 'empty')), h('p', null, t('emptyHint')), catalog.length || query ? button(t('clear'), resetFilters) : button(t('add'), create, { 'data-variant': 'default' }))
447
+ : h(React.Fragment, null, h('div', { className: 'memory-list-header' }, h('span', null, t('time')), h('span', { className: 'dsh-entity-label' }, t('entity')), h('span', null, t('content')), h('span', null, t('category')), h('span', null, t('lifecycle'))),
448
+ h('div', { className: 'memory-grid' }, ...visible.map(memory => h('article', { key: memory.id, className: 'memory-card', role: 'button', tabIndex: busy ? -1 : 0, 'aria-label': memory.isPrivate ? t('private') : memory.title, 'aria-disabled': busy, onClick: event => { if (!event.target.closest('button')) open(memory); }, onKeyDown: event => { if (event.target === event.currentTarget && ['Enter', ' '].includes(event.key)) { event.preventDefault(); open(memory); } } },
449
+ h('div', { className: 'memory-time', title: memory.capturedAt || memory.updatedAt }, formatTime(memory.capturedAt || memory.updatedAt)), h('div', { className: 'memory-entity' }, h('strong', null, memory.origin?.deviceName || t('localDevice')), h('span', null, sourceLabel(memory.source))),
450
+ h('div', { className: 'memory-content-cell' }, button(memory.isPrivate ? t('private') : memory.title, () => open(memory), { className: 'memory-title-button', 'data-variant': 'ghost' }), h('p', null, memory.isPrivate ? t('private') : memory.preview)), h('div', { className: 'memory-category' }, button(t(memory.kind), () => chooseKind(memory.kind), { className: 'dsh-kind', 'data-variant': 'ghost' }), memory.tags[0] ? h('span', null, `#${memory.tags[0]}`) : null), h('div', { className: 'memory-life' }, h('span', { 'data-slot': 'badge' }, t('active')))))),
451
+ h('nav', { className: 'memory-pagination', 'aria-label': t('page') }, h('div', { className: 'page-size-options' }, h('span', null, t('pageSize')), ...[10, 20, 50].map(size => button(String(size), () => setPageSize(size), { key: size, 'data-variant': size === pageSize ? 'default' : 'outline', 'aria-pressed': size === pageSize }))), h('div', { className: 'page-navigation' }, button('‹', () => setPage(currentPage - 1), { disabled: busy || currentPage <= 1, 'aria-label': t('previous') }), h('span', null, `${currentPage} ${t('of')} ${totalPages}`), button('›', () => setPage(currentPage + 1), { disabled: busy || currentPage >= totalPages, 'aria-label': t('next') })))),
452
+ query.trim() ? h('p', { className: 'dsh-search-limit' }, t('searchLimit')) : null), h('footer', { className: 'dsh-footer' }, t('shared'))))), details);
453
+ }
454
+ ctx.slots.inject('sidebar.panellist', () => ctx.slots.register({ name: 'sidebar.panellist', id: 'mory', order: 20, label: () => t('name') }, Icon));
455
+ ctx.slots.inject('main', () => ctx.slots.register({ name: 'main', key: 'mory' }, Page));
456
+ },
457
+ };
458
+ },
459
+ });