:root {
  color-scheme: dark;
  --ink: #e8f4f6;
  --muted: #8299a1;
  --dim: #526a73;
  --canvas: #07151d;
  --sidebar: #091a22;
  --cyan: #54dce8;
  --cyan-bright: #83f0f3;
  --coral: #ff755d;
  --mono: "DM Mono", Consolas, monospace;
  --sans: "DM Sans", "Segoe UI", sans-serif;
  --display: Manrope, "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 14px; }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 248px; min-width: 248px; display: flex; flex-direction: column; padding: 27px 15px 16px; background: var(--sidebar); border-right: 1px solid #18313a; }
.brand { display: flex; align-items: center; gap: 11px; width: max-content; margin: 0 0 36px 8px; color: #eaf8f8; font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -.8px; text-decoration: none; }
.brand-period, .title-period { color: var(--cyan); }
.brand-mark { position: relative; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.brand-mark::before { content: ""; width: 16px; height: 16px; border-radius: 50% 50% 50% 3px; background: var(--coral); transform: rotate(-45deg); box-shadow: 0 0 20px rgba(255,117,93,.26); }
.brand-mark span { position: absolute; z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: #ffe5df; }
.new-note-button { height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 11px; margin: 0 1px 31px; border: 1px solid rgba(84,220,232,.28); border-radius: 8px; background: linear-gradient(110deg,rgba(84,220,232,.14),rgba(84,220,232,.06)); color: #c9fcfe; cursor: pointer; font-weight: 600; text-align: left; transition: background .16s ease,border-color .16s ease,transform .16s ease; }
.new-note-button:hover { transform: translateY(-1px); border-color: var(--cyan); background: rgba(84,220,232,.17); }
.new-note-button > span { font-size: 21px; line-height: 1; font-weight: 400; }
kbd { padding: 2px 5px; border: 1px solid #29444d; border-radius: 4px; background: rgba(255,255,255,.025); color: #789098; font-family: var(--mono); font-size: 10px; }
.new-note-button kbd { margin-left: auto; }
.nav-label, .list-heading, .sort-label, .editor-location, .editor-bottom, .eyebrow { color: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; }
.nav-label { padding: 0 10px; margin-bottom: 10px; }
.primary-nav { display: grid; gap: 4px; }
.nav-item { min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #93aab1; cursor: pointer; text-align: left; transition: color .16s ease,background .16s ease; }
.nav-item:hover { color: #d3e6e9; background: rgba(255,255,255,.035); }
.nav-item.is-active { color: #bff7f9; background: rgba(84,220,232,.105); }
.nav-icon { width: 17px; color: #77919a; font-size: 17px; text-align: center; }
.is-active .nav-icon { color: var(--cyan); }
.pin-nav-icon { font-size: 13px; }
.nav-count { margin-left: auto; color: #637e87; font-family: var(--mono); font-size: 10px; }
.is-active .nav-count { color: #8bdde2; }
.sidebar-bottom { margin-top: auto; }
.sync-card { display: flex; align-items: flex-start; gap: 10px; padding: 13px 10px; margin-bottom: 13px; border: 1px solid #1b343d; border-radius: 8px; background: rgba(255,255,255,.018); }
.sync-indicator { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #60d9b2; box-shadow: 0 0 9px rgba(96,217,178,.36); }
.sync-card strong, .profile strong { display: block; color: #bdd0d4; font-size: 11px; font-weight: 600; }
.sync-card small, .profile small { display: block; margin-top: 4px; color: #637b83; font-size: 10px; }
.profile { display: flex; align-items: center; gap: 10px; padding: 12px 5px 0; border-top: 1px solid #1b343d; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #35535a; border-radius: 9px; background: #15323b; color: #8debf0; font-family: var(--display); font-size: 12px; font-weight: 700; }
.workspace { flex: 1; min-width: 0; }
.topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid #17313a; }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #8ba2a9; font-size: 12px; }
.breadcrumb > span:first-child { color: #526c75; font-family: var(--mono); font-size: 10px; letter-spacing: .9px; }
.breadcrumb strong { color: #c4d6da; font-weight: 500; }
.crumb-separator { color: #49616a; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.keyboard-hint { display: flex; align-items: center; gap: 4px; color: #657f87; font-size: 11px; }
.avatar-small { width: 28px; height: 28px; border-radius: 50%; cursor: default; }
.content { max-width: 1460px; padding: 41px 38px 28px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #72a8ad; font-size: 9px; letter-spacing: 1.3px; }
.eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 9px rgba(255,117,93,.7); }
h1 { margin: 10px 0 5px; color: #eff8f8; font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.2; }
.page-subtitle { margin: 0; color: #769099; font-size: 13px; }
.create-folder-button { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 11px; margin-bottom: 2px; border: 1px solid #29424b; border-radius: 6px; background: transparent; color: #9fb3b8; cursor: pointer; font-size: 11px; transition: border-color .16s ease,color .16s ease; }
.create-folder-button span { color: var(--cyan); font-size: 17px; }
.create-folder-button:hover { border-color: #4dabb2; color: #d2e8ea; }
/* Redundant with the list-heading "Create a folder" button (#list-menu). Kept in the DOM
   instead of removed because app.js and feature-suite.js reference #new-folder by id;
   visually hidden so only one "New folder" affordance remains. */
#new-folder { display: none !important; }
.notes-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.search-box { height: 37px; width: min(320px,46%); display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid #213b44; border-radius: 7px; background: #0a1b23; transition: border-color .15s ease; }
.search-box:focus-within { border-color: #3d9ba4; }
.search-icon { color: #76a3aa; font-size: 20px; line-height: 1; transform: rotate(-20deg); }
.search-box input { flex: 1; width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.search-box input::placeholder { color: #67818a; }
.search-box kbd { min-width: 17px; text-align: center; }
.sort-control { position: relative; display: flex; align-items: center; gap: 9px; }
.sort-label { color: #637e86; font-size: 9px; }
.sort-control select { appearance: none; padding: 7px 22px 7px 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #b8cbcf; cursor: pointer; font-size: 11px; }
.sort-control select:hover { border-color: #2a444d; }
.sort-control select option, .note-meta select option { background: #10252e; color: var(--ink); }
.select-chevron { position: absolute; right: 7px; color: #86a1a8; font-size: 15px; pointer-events: none; }
.notes-layout { min-height: 510px; display: grid; grid-template-columns: minmax(245px,33%) minmax(0,1fr); overflow: hidden; border: 1px solid #1e3942; border-radius: 10px; background: #0a1a22; }
.notes-panel { display: flex; min-height: 510px; flex-direction: column; border-right: 1px solid #1d353e; }
.list-heading { height: 45px; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 14px 0 17px; border-bottom: 1px solid #1a323b; color: #6e8b94; font-size: 9px; letter-spacing: 1.15px; }
.icon-button { width: 29px; height: 29px; display: inline-grid; flex: 0 0 auto; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #78939b; cursor: pointer; font-size: 17px; transition: background .15s ease,border-color .15s ease,color .15s ease; }
.icon-button:hover { border-color: #29444d; background: rgba(255,255,255,.035); color: #d7eff0; }
.icon-button:disabled { opacity: .35; cursor: default; }
.note-list { flex: 1; overflow-y: auto; padding: 7px; }
.folder-row { width: 100%; min-height: 31px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: #87a0a7; cursor: pointer; text-align: left; }
.folder-entry { display: flex; align-items: center; gap: 2px; }
.folder-entry .folder-row { min-width: 0; flex: 1; }
.folder-actions { display: flex; flex: 0 0 auto; align-items: center; opacity: 0; transition: opacity .12s ease; }
.folder-entry:hover .folder-actions, .folder-entry:focus-within .folder-actions { opacity: 1; }
.folder-action { min-width: 25px; height: 25px; padding: 0 5px; border: 0; border-radius: 4px; background: transparent; color: #84a1a8; cursor: pointer; font-size: 9px; }
.folder-action:hover { background: rgba(84,220,232,.1); color: #d3fbfc; }
.folder-action.folder-delete { color: #bf897e; font-size: 15px; }
.folder-action.folder-delete:hover { background: rgba(255,117,93,.1); color: #ffb1a3; }
.folder-row:hover { background: rgba(255,255,255,.035); color: #c8dadd; }
.folder-caret { width: 10px; color: #57717a; font-size: 11px; }
.folder-glyph { color: var(--cyan); font-size: 13px; }
.folder-name { overflow: hidden; flex: 1; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.folder-count { color: #5e7780; font-family: var(--mono); font-size: 9px; }
.folder-notes { padding-left: 13px; }
.note-row { position: relative; width: 100%; min-height: 65px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 10px 11px; margin-bottom: 3px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; transition: background .14s ease,border-color .14s ease; }
.note-row:hover { background: rgba(255,255,255,.035); }
.note-row.is-selected { border-color: rgba(84,220,232,.21); background: rgba(84,220,232,.095); }
.note-row.is-selected::before { position: absolute; top: 12px; bottom: 12px; left: -7px; width: 2px; border-radius: 2px; background: var(--cyan); content: ""; }
.note-row-titleline { display: flex; align-items: center; gap: 6px; }
.note-row-title { overflow: hidden; color: #d8e6e8; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.note-row.is-selected .note-row-title { color: #d3fbfc; }
.note-row-pin { color: var(--coral); font-size: 9px; }
.note-preview { overflow: hidden; margin-top: 5px; color: #738a92; font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.note-row-time { margin-top: 6px; color: #526c74; font-family: var(--mono); font-size: 9px; }
.root-notes-heading { padding: 12px 9px 5px; color: #5c7881; font-family: var(--mono); font-size: 9px; letter-spacing: .8px; }
.list-footer { height: 35px; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid #1a323b; color: #59717a; font-family: var(--mono); font-size: 9px; }
.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 20px; text-align: center; }
.empty-sparkle { margin-bottom: 10px; color: var(--cyan); font-size: 21px; }
.empty-state strong { color: #d5e5e7; font-size: 12px; }
.empty-state p { margin: 7px 0 13px; color: #718991; font-size: 11px; line-height: 1.5; }
.empty-state button, .new-note-inline { border: 0; background: transparent; color: var(--cyan); cursor: pointer; font-size: 11px; }
.empty-state button:hover, .new-note-inline:hover { color: var(--cyan-bright); }
.editor-panel { position: relative; min-width: 0; display: flex; flex-direction: column; background: radial-gradient(ellipse at 82% 7%,rgba(32,91,100,.1),transparent 35%),#0b1c24; }
.editor-topline { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid #1a323b; }
.editor-location { display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; font-size: 9px; letter-spacing: .65px; }
.editor-location > span:last-child { overflow: hidden; color: #81969c; text-overflow: ellipsis; }
.folder-crumb { overflow: hidden; color: #69c5cc; text-overflow: ellipsis; }
.editor-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.save-state { display: flex; align-items: center; gap: 6px; margin-right: 7px; color: #7d999f; font-size: 10px; }
.save-dot { width: 6px; height: 6px; border-radius: 50%; background: #5fcda4; }
.save-state.is-saving .save-dot { background: #f0bf68; animation: pulse 1s infinite alternate; }
.save-state.has-error { color: #ff9685; }
.save-state.has-error .save-dot { background: var(--coral); }
@keyframes pulse { to { opacity: .35; } }
.pin-button { font-size: 13px; }
.pin-button.is-pinned { color: var(--coral); }
.delete-button { font-size: 16px; }
.editor-fields { flex: 1; display: flex; flex-direction: column; padding: 28px 34px 13px; }
.note-title { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #eff8f9; font-family: var(--display); font-size: clamp(24px,3vw,33px); font-weight: 700; letter-spacing: -1.2px; }
.note-title::placeholder { color: #607880; }
.note-meta { display: flex; align-items: center; gap: 7px; margin-top: 11px; color: #718990; font-family: var(--mono); font-size: 9px; }
/* Phase 0 — note properties (M5), version history (M2), Trash (M2). */
.note-properties { margin-top: 14px; padding-top: 12px; border-top: 1px solid #1b343d; }
.properties-heading { margin-bottom: 8px; color: #637b83; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }
.property-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.property-key { min-width: 90px; max-width: 160px; overflow: hidden; color: #afd0d4; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.property-value, .property-key-input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #294650; border-radius: 5px; background: #091b23; color: #c8dfe2; font-size: 11px; }
.property-key-input { flex: 0 0 110px; }
.property-remove { flex: 0 0 auto; padding: 2px 8px; border: 1px solid #4b3b40; border-radius: 4px; background: transparent; color: #d69a8f; cursor: pointer; font-size: 12px; }
.property-remove:hover { border-color: #aa685d; color: #ffc0b5; }
.property-add-button { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #2e5059; border-radius: 5px; background: rgba(255,255,255,.025); color: #afd0d4; cursor: pointer; font-size: 11px; }
.property-add-button:hover { border-color: var(--cyan); color: #e0fbfc; }
.version-history { margin-top: 10px; color: #8da7ac; font-size: 11px; }
.version-history summary { cursor: pointer; color: #afd0d4; }
.version-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #16282e; }
.version-restore { flex: 0 0 auto; padding: 4px 9px; border: 1px solid #2e5059; border-radius: 4px; background: transparent; color: #afd0d4; cursor: pointer; font-size: 10px; }
.version-restore:hover { border-color: var(--cyan); color: #e0fbfc; }
.trash-row { cursor: default; }
.trash-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.trash-empty { padding: 6px 10px; border: 1px solid #4b3b40; border-radius: 5px; background: transparent; color: #d69a8f; cursor: pointer; font-size: 10px; }
.trash-empty:hover { border-color: #aa685d; color: #ffc0b5; }
.trash-actions { display: flex; gap: 6px; margin-top: 6px; }
.trash-restore { padding: 4px 9px; border: 1px solid #2e5059; border-radius: 4px; background: rgba(84,220,232,.08); color: #afd0d4; cursor: pointer; font-size: 10px; }
.trash-delete { padding: 4px 9px; border: 1px solid #4b3b40; border-radius: 4px; background: transparent; color: #d69a8f; cursor: pointer; font-size: 10px; }
.trash-restore:hover { border-color: var(--cyan); color: #e0fbfc; }
.trash-delete:hover { border-color: #aa685d; color: #ffc0b5; }
.meta-glyph { color: #58cbd3; font-size: 13px; }
.meta-divider { color: #405962; }
.note-meta label { color: #58727a; font-size: 8px; }
.note-meta select { max-width: 145px; padding: 3px 4px; border: 0; background: transparent; color: #93b7bc; cursor: pointer; font-family: var(--mono); font-size: 9px; }
.editor-rule { height: 1px; margin: 22px 0 19px; background: linear-gradient(90deg,#24434c,rgba(36,67,76,.15)); }
.note-body { width: 100%; min-height: 280px; flex: 1; resize: none; padding: 0; border: 0; outline: 0; background: transparent; color: #b8cbd0; font-size: 13px; line-height: 1.8; }
.note-body::placeholder { color: #5d747b; }
.editor-bottom { display: flex; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid rgba(39,67,76,.55); color: #526c74; font-size: 8px; letter-spacing: .6px; }
.editor-bottom-dot { color: var(--coral); padding: 0 3px; }
.editor-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.editor-empty-mark { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 17px; border: 1px solid #28505a; border-radius: 13px; background: rgba(84,220,232,.07); color: var(--cyan); font-size: 20px; }
.editor-empty h2 { max-width: 300px; margin: 0; color: #d4e5e7; font-family: var(--display); font-size: 17px; letter-spacing: -.4px; }
.editor-empty p { margin: 9px 0 17px; color: #71878e; font-size: 12px; }
.new-note-inline { padding: 8px 11px; border: 1px solid #2b5058; border-radius: 6px; background: rgba(84,220,232,.08); }
.new-note-inline:hover { background: rgba(84,220,232,.14); }
.topbar-tool { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #9ab0b5; cursor: pointer; font-size: 11px; }
.topbar-tool:hover, .topbar-tool[aria-expanded="true"] { border-color: #29444d; background: rgba(255,255,255,.035); color: #d3e6e9; }
.topbar-tool > span { color: var(--cyan); font-size: 14px; }
.topbar-tool kbd { color: #67818a; }
.modal-backdrop { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(2,10,14,.72); backdrop-filter: blur(7px); }
.dialog { width: min(100%,560px); max-height: min(740px,calc(100vh - 40px)); overflow: auto; border: 1px solid #2b4a54; border-radius: 12px; background: #0c2029; box-shadow: 0 25px 80px rgba(0,0,0,.48); }
.plugin-dialog { padding: 23px; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-kicker { color: #77afb3; font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px; }
.dialog-header h2 { margin: 6px 0 0; color: #edf8f8; font-family: var(--display); font-size: 25px; letter-spacing: -.8px; }
.dialog-close { font-size: 21px; }
.dialog-description { margin: 14px 0; color: #89a0a6; font-size: 12px; line-height: 1.55; }
.plugin-safety { display: flex; gap: 9px; padding: 11px 12px; border: 1px solid rgba(84,220,232,.17); border-radius: 7px; background: rgba(84,220,232,.055); color: #91bfc2; font-size: 10px; line-height: 1.5; }
.plugin-safety > span:first-child { flex: 0 0 auto; color: var(--cyan); font-size: 13px; }
.plugin-list { display: grid; gap: 7px; margin-top: 16px; }
.plugin-discovery { display: flex; gap: 8px; margin-top: 13px; }
.plugin-discovery input, .plugin-discovery select { min-width: 0; padding: 8px 9px; border: 1px solid #29454e; border-radius: 6px; background: #091b23; color: #c8dfe2; font-size: 10px; }
.plugin-discovery input { flex: 1; }
.plugin-discovery input::placeholder { color: #718991; }
.plugin-discovery select { flex: 0 0 auto; }
.plugin-empty { padding: 18px 12px; color: #81989e; font-size: 11px; text-align: center; }
.plugin-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px; border: 1px solid #1d3841; border-radius: 8px; background: rgba(255,255,255,.018); }
.plugin-row-details { min-width: 0; }
.plugin-row-details strong { color: #d9e9eb; font-size: 12px; font-weight: 600; }
.plugin-row-details p { margin: 4px 0 6px; color: #7f979e; font-size: 10px; line-height: 1.45; }
.plugin-row-details small { color: #789198; font-family: var(--mono); font-size: 8px; letter-spacing: .55px; }
.plugin-toggle { position: relative; width: 37px; height: 21px; flex: 0 0 auto; padding: 2px; border: 1px solid #38515a; border-radius: 20px; background: #132d36; cursor: pointer; transition: background .16s ease,border-color .16s ease; }
.plugin-toggle span { display: block; width: 15px; height: 15px; border-radius: 50%; background: #83989d; transition: transform .16s ease,background .16s ease; }
.plugin-toggle.is-enabled { border-color: #48bac3; background: rgba(84,220,232,.2); }
.plugin-toggle.is-enabled span { background: var(--cyan); transform: translateX(15px); }
.plugin-toggle:disabled { opacity: .5; cursor: wait; }
.dialog-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; color: #6f8990; font-family: var(--mono); font-size: 9px; }
.dialog-done { padding: 8px 13px; border: 1px solid #34717a; border-radius: 6px; background: rgba(84,220,232,.12); color: #c4f6f7; cursor: pointer; font-size: 11px; }
.dialog-done:hover { background: rgba(84,220,232,.2); }
.palette-backdrop { align-items: start; padding-top: min(18vh,130px); }
.command-dialog { width: min(100%,590px); overflow: hidden; }
.command-search { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid #203b44; color: var(--cyan); }
.command-search > span { font-size: 20px; }
.command-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.command-search input::placeholder { color: #81989e; }
.command-search kbd { flex: 0 0 auto; }
.command-list { max-height: min(440px,56vh); overflow-y: auto; padding: 7px; }
.command-option { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 10px 11px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; }
.command-option:hover, .command-option.is-active { border-color: rgba(84,220,232,.18); background: rgba(84,220,232,.08); }
.command-option strong { color: #dcebed; font-size: 11px; font-weight: 600; }
.command-option small { color: #789198; font-size: 10px; }
.command-empty { padding: 16px; color: #81989e; font-size: 11px; text-align: center; }
.command-footer { display: flex; justify-content: flex-end; gap: 17px; padding: 10px 14px; border-top: 1px solid #203b44; color: #81989e; font-family: var(--mono); font-size: 9px; }
.plugin-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 0 24px 22px; }
.plugin-panel-wrap { min-width: 0; padding: 12px; border: 1px solid #1d3942; border-radius: 8px; background: rgba(5,20,27,.42); }
.plugin-panel-wrap > h2 { margin: 0 0 9px; color: #72929a; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .9px; text-transform: uppercase; }
.plugin-panel-card { min-width: 0; }
.plugin-panel-section + .plugin-panel-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid #1d3841; }
.plugin-panel-section h3, .tag-index h3, .outline-panel h3 { margin: 0 0 7px; color: #a4c1c5; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .65px; }
.plugin-panel-empty { margin: 5px 0 0; color: #718991; font-size: 10px; line-height: 1.45; }
.plugin-panel-links, .outline-list, .tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.plugin-note-link, .outline-link { max-width: 100%; overflow: hidden; padding: 5px 7px; border: 1px solid #25434c; border-radius: 5px; background: rgba(84,220,232,.035); color: #a8cdd0; cursor: pointer; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.plugin-note-link:hover, .outline-link:hover { border-color: #4a9ea5; color: #d7fbfc; }
.outline-link { padding-left: calc(7px + var(--heading-depth,0) * 7px); }
.tag-chip { padding: 5px 7px; border: 1px solid #2a4b54; border-radius: 999px; background: rgba(84,220,232,.06); color: #9dd5d8; cursor: pointer; font-family: var(--mono); font-size: 9px; }
.tag-chip:hover, .tag-chip.is-active { border-color: #4bbbc4; background: rgba(84,220,232,.16); color: #d4fcfd; }
#editor-status { display: flex; align-items: center; gap: 10px; color: #718991; font-size: 9px; letter-spacing: 0; text-transform: none; }
.plugin-error { color: #f29a88; font-size: 9px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
.toast { position: fixed; right: 22px; bottom: 20px; z-index: 3; max-width: 320px; padding: 11px 15px; border: 1px solid #32515a; border-radius: 7px; background: #10262f; color: #d8ebed; box-shadow: 0 12px 30px rgba(0,0,0,.26); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease,transform .18s ease; font-size: 12px; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.editor-tools { display: flex; align-items: center; gap: 8px; margin: -7px 0 11px; }
.code-language-control { display: flex; align-items: center; gap: 7px; color: #76949b; font-family: var(--mono); font-size: 8px; letter-spacing: .55px; }
.code-language-control select { padding: 5px 7px; border: 1px solid #26424b; border-radius: 5px; background: #10252e; color: #b6dadd; font-family: var(--mono); font-size: 9px; }
.editor-tool-button { min-height: 28px; padding: 5px 9px; border: 1px solid #2a4b54; border-radius: 5px; background: rgba(84,220,232,.055); color: #9dcdd0; cursor: pointer; font-size: 10px; transition: background .15s ease,border-color .15s ease,color .15s ease; }
.editor-tool-button:hover { border-color: #4aa7af; background: rgba(84,220,232,.13); color: #d6fcfd; }
.markdown-preview { min-height: 280px; flex: 1; overflow: auto; color: #b8cbd0; font-size: 13px; line-height: 1.8; }
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 { margin: 20px 0 8px; color: #e2f2f3; font-family: var(--display); letter-spacing: -.3px; }
.markdown-preview h1 { font-size: 25px; }
.markdown-preview h2 { font-size: 20px; }
.markdown-preview h3, .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 { font-size: 16px; }
.markdown-preview p { margin: 0 0 13px; }
.markdown-preview ul, .markdown-preview ol { padding-left: 24px; margin: 0 0 14px; }
.markdown-preview li { padding-left: 3px; margin: 4px 0; }
.markdown-preview li > input[type="checkbox"] { margin: 0 7px 0 0; accent-color: var(--cyan); vertical-align: middle; }
.markdown-preview blockquote { padding: 2px 0 2px 13px; margin: 0 0 14px; border-left: 2px solid #45aab2; color: #91aaae; }
.markdown-preview blockquote p:last-child { margin-bottom: 0; }
.markdown-preview hr { height: 1px; margin: 18px 0; border: 0; background: #29444d; }
.markdown-preview table { width: 100%; margin: 4px 0 16px; border-collapse: collapse; font-size: 11px; }
.markdown-preview th, .markdown-preview td { padding: 7px 9px; border: 1px solid #29444d; text-align: left; vertical-align: top; }
.markdown-preview th { background: rgba(84,220,232,.07); color: #b6dadd; font-weight: 600; }
.markdown-preview a { color: #80e2e8; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.markdown-preview a:hover { color: #c3fbfd; }
.markdown-preview code:not(.preview-code-block code) { padding: 1px 4px; border: 1px solid #29444d; border-radius: 3px; background: #081820; color: #9ce7eb; font-family: var(--mono); font-size: .9em; }
.preview-code-block { overflow: hidden; margin: 16px 0; border: 1px solid #25434c; border-radius: 7px; background: #06141b; }
.preview-code-block > header { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-bottom: 1px solid #203b44; color: #82aeb3; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.preview-code-block > header button { border: 0; background: transparent; color: #85d9de; cursor: pointer; font: inherit; text-transform: none; }
.preview-code-block pre { overflow: auto; margin: 0; padding: 12px; color: #c3d8dc; font-family: var(--mono); font-size: 11px; line-height: 1.65; tab-size: 2; }
.code-token-keyword { color: #85dbe0; }
.code-token-string { color: #e7b78a; }
.code-token-number { color: #c5a5ff; }
.code-token-comment { color: #78939a; font-style: italic; }
.canvas-view { overflow: hidden; border: 1px solid #1e3942; border-radius: 10px; background: #091a22; }
.canvas-toolbar { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #1d3841; }
.canvas-picker { display: flex; align-items: center; gap: 7px; padding-right: 5px; color: #7999a0; font-family: var(--mono); font-size: 8px; letter-spacing: .7px; }
.canvas-picker select { max-width: 180px; padding: 6px 8px; border: 1px solid #294650; border-radius: 5px; background: #0c2029; color: #c7e0e2; font-size: 10px; }
.canvas-tool-button { min-height: 28px; padding: 5px 8px; border: 1px solid #28454e; border-radius: 5px; background: rgba(255,255,255,.018); color: #a4c4c8; cursor: pointer; font-size: 10px; }
.canvas-tool-button:hover, .canvas-tool-button[aria-pressed="true"] { border-color: #48a5ad; background: rgba(84,220,232,.11); color: #d4fcfd; }
.canvas-tool-button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(84,220,232,.14); }
.canvas-toolbar-divider { width: 1px; height: 22px; margin: 0 3px; background: #29444d; }
.canvas-toolbar-spacer { flex: 1; }
.canvas-zoom { min-width: 38px; color: #9bb9bd; font-family: var(--mono); font-size: 9px; text-align: center; }
.canvas-viewport { position: relative; min-height: 540px; height: min(68vh,780px); overflow: hidden; background-color: #081820; background-image: radial-gradient(circle,#23424a 1px,transparent 1px); background-size: 22px 22px; cursor: grab; touch-action: none; }
.canvas-viewport:active { cursor: grabbing; }
.canvas-stage { position: absolute; top: 0; left: 0; width: 3000px; height: 2000px; transform-origin: 0 0; }
.canvas-edges { position: absolute; inset: 0; z-index: 0; width: 3000px; height: 2000px; overflow: visible; pointer-events: none; }
.canvas-edges line { opacity: .8; }
.canvas-edges text { font-family: var(--sans); }
.canvas-nodes { position: absolute; inset: 0; z-index: 1; }
.canvas-node { position: absolute; display: flex; flex-direction: column; min-width: 100px; min-height: 80px; overflow: visible; border: 1px solid #33565f; border-radius: 8px; background: #10252e; box-shadow: 0 9px 22px rgba(0,0,0,.24); }
.canvas-node::before { position: absolute; top: -1px; right: 12px; left: 12px; height: 2px; background: var(--node-color); content: ""; opacity: .85; }
.canvas-node.is-selected { border-color: #67d8df; box-shadow: 0 0 0 2px rgba(84,220,232,.14),0 12px 25px rgba(0,0,0,.3); }
.canvas-node:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 3px; }
.canvas-node-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 4px 8px 4px 11px; border-bottom: 1px solid #28434b; cursor: grab; }
.canvas-node-header:active { cursor: grabbing; }
.canvas-node-header strong { overflow: hidden; color: #8db4b8; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .65px; text-overflow: ellipsis; white-space: nowrap; }
.canvas-node-remove { width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent; color: #829da2; cursor: pointer; font-size: 17px; line-height: 1; }
.canvas-node-remove:hover { background: rgba(255,117,93,.12); color: #ff9a87; }
.canvas-text-editor { width: 100%; min-height: 50px; flex: 1; resize: none; padding: 10px 11px; border: 0; background: transparent; color: #d2e3e5; font-size: 11px; line-height: 1.65; }
.canvas-text-editor:focus-visible { outline-offset: -3px; }
.canvas-node-file, .canvas-node-link, .canvas-node-group { padding-bottom: 10px; }
.canvas-note-link { margin: 12px 10px 4px; overflow-wrap: anywhere; border: 0; background: transparent; color: #daf6f7; cursor: pointer; font-family: var(--display); font-size: 14px; font-weight: 600; text-align: left; }
.canvas-note-link:disabled { color: #91a5a9; cursor: default; }
.canvas-node-file small { overflow: hidden; padding: 0 10px; color: #78939a; font-family: var(--mono); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.canvas-web-link { display: block; margin: 14px 10px; overflow-wrap: anywhere; color: #8ee5e9; font-size: 11px; line-height: 1.55; }
.canvas-node-group { border-style: dashed; background: rgba(15,47,56,.48); box-shadow: none; }
.canvas-node-group::before { display: none; }
.canvas-group-label { width: calc(100% - 20px); margin: 9px 10px; padding: 5px 0; border: 0; border-bottom: 1px solid #31545c; background: transparent; color: #93c9cc; font-family: var(--display); font-size: 13px; font-weight: 600; }
.canvas-resize-handle { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 0 0 6px 0; background: #7bbec2; clip-path: polygon(100% 0,100% 100%,0 100%); cursor: nwse-resize; }
.canvas-empty { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; pointer-events: none; }
.canvas-empty strong { color: #d7eff0; font-family: var(--display); font-size: 17px; letter-spacing: -.3px; }
.canvas-empty p { max-width: 350px; margin: 8px 0 15px; color: #91aaae; font-size: 11px; line-height: 1.6; }
.canvas-empty button { padding: 8px 11px; border: 1px solid #3c8088; border-radius: 5px; background: #102a33; color: #c1f3f5; cursor: pointer; font-size: 10px; pointer-events: auto; }
.canvas-footer { display: flex; justify-content: space-between; gap: 12px; padding: 8px 11px; border-top: 1px solid #1d3841; color: #7e9ca2; font-family: var(--mono); font-size: 8px; }
.canvas-footer .has-error { color: #ff9b88; }
.plugin-upload { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; margin-top: 13px; border: 1px solid #29454e; border-radius: 7px; background: rgba(255,255,255,.018); }
.plugin-upload strong, .plugin-upload small { display: block; }
.plugin-upload strong { color: #cde2e4; font-size: 11px; }
.plugin-upload small { margin-top: 4px; color: #8da7ac; font-size: 9px; line-height: 1.5; }
.plugin-permissions-summary { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #84a8ad !important; font-size: 8px !important; line-height: 1.45; }
.imported-plugin-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.plugin-remove { padding: 5px 7px; border: 1px solid #4b3b40; border-radius: 5px; background: transparent; color: #d69a8f; cursor: pointer; font-size: 9px; }
.plugin-remove:hover { border-color: #aa685d; background: rgba(255,117,93,.1); color: #ffc0b5; }
.consent-dialog { width: min(100%,520px); padding: 23px; }
.consent-dialog .dialog-header h2 { margin-top: 6px; }
.consent-permissions { display: grid; gap: 6px; max-height: 260px; overflow: auto; margin: 12px 0; }
.plugin-source-details { margin: 10px 0; border-top: 1px solid #28434b; border-bottom: 1px solid #28434b; color: #a4c4c8; font-size: 10px; }
.plugin-source-details summary { padding: 9px 0; cursor: pointer; }
.plugin-source-details pre { max-height: 180px; overflow: auto; margin: 0 0 10px; padding: 10px; border: 1px solid #29454e; border-radius: 5px; background: #07171e; color: #c5dadd; font-family: var(--mono); font-size: 9px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.permission-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid #29454e; border-radius: 6px; background: rgba(255,255,255,.018); cursor: pointer; }
.permission-row input, .consent-trust input { margin-top: 2px; accent-color: var(--cyan); }
.permission-row strong, .permission-row small { display: block; }
.permission-row strong { color: #c7e2e4; font-family: var(--mono); font-size: 9px; }
.permission-row small { margin-top: 4px; color: #91aaae; font-size: 10px; }
.consent-trust { display: flex; align-items: flex-start; gap: 9px; padding: 11px 0; color: #9fb8bc; font-size: 10px; line-height: 1.5; }
.dialog-cancel { padding: 8px 11px; margin-right: 7px; border: 1px solid #36515a; border-radius: 6px; background: transparent; color: #aac3c7; cursor: pointer; font-size: 10px; }
.dialog-done:disabled { border-color: #34494e; background: #172a30; color: #71888d; cursor: not-allowed; }
.plugin-title-line { display: flex; align-items: center; gap: 8px; }
.plugin-review-pill { padding: 2px 7px; border: 1px solid #38515a; border-radius: 20px; font-family: var(--mono); font-size: 7px; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.plugin-review-pill.is-pending { border-color: #a8894a; background: rgba(232,190,106,.12); color: #e8be6a; }
.plugin-review-pill.is-approved { border-color: #48bac3; background: rgba(84,220,232,.12); color: #7fdce4; }
.plugin-review-pill.is-rejected { border-color: #4b3b40; background: rgba(255,117,93,.08); color: #d69a8f; }
.plugin-review-reason { display: block; margin-top: 4px; color: #c9a06a !important; font-style: italic; }
.plugin-review-button { padding: 6px 10px; border: 1px solid #38515a; border-radius: 6px; background: rgba(84,220,232,.08); color: #a9dfe3; cursor: pointer; font-size: 9px; }
.plugin-review-button:hover { border-color: #48bac3; background: rgba(84,220,232,.16); }
.consent-reject { margin: 4px 0 10px; padding: 10px; border: 1px dashed #4b3b40; border-radius: 6px; }
.consent-reject label { display: block; color: #9fb8bc; font-size: 10px; }
.consent-reject input { width: 100%; margin-top: 6px; padding: 8px; border: 1px solid #36515a; border-radius: 5px; background: #07171e; color: #d9e9eb; font-size: 10px; }
.consent-reject button { margin-top: 8px; }
.extension-status-item { color: #8fd6db; font-family: var(--mono); font-size: 9px; }
.canvas-status.has-error { color: #ff9b88; }
.canvas-text-editor, .canvas-group-label { font-family: var(--sans); }
@media (max-width: 1050px) {
  .sidebar { width: 215px; min-width: 215px; }
  .content { padding-right: 24px; padding-left: 24px; }
  .topbar { padding-right: 24px; padding-left: 24px; }
  .notes-layout { grid-template-columns: minmax(220px,35%) minmax(0,1fr); }
  .editor-fields { padding-right: 23px; padding-left: 23px; }
  .save-state { font-size: 9px; }
  .canvas-toolbar { gap: 5px; }
}
@media (max-width: 760px) {
  .sidebar { width: 61px; min-width: 61px; align-items: center; padding: 20px 8px 12px; }
  .brand { margin: 0 0 28px; }
  .brand > span:last-child, .new-note-button kbd { display: none; }
  .new-note-button { width: 44px; height: 44px; justify-content: center; padding: 0; margin-bottom: 25px; font-size: 0; }
  .new-note-button > span { font-size: 21px; }
  /* Touch targets: 44px minimum on coarse-pointer layouts. */
  .nav-item { min-height: 44px; }
  .icon-button { width: 44px; height: 44px; }
  .topbar-tool { min-width: 44px; min-height: 44px; justify-content: center; }
  .editor-tool-button, .canvas-tool-button { min-height: 44px; }
  .feature-button { min-height: 44px; }
  .folder-action { min-width: 44px; min-height: 44px; }
  .database-row-remove { min-height: 44px; }
  .query-result-row { min-height: 44px; align-items: center; }
  .dialog-done, .dialog-cancel { min-height: 44px; }
  .plugin-remove { min-height: 44px; }
  .plugin-review-button { min-height: 44px; }
  .canvas-empty button { min-height: 44px; }
  .nav-label, .nav-item > span:not(.nav-icon), .sync-card, .profile > span { display: none; }
  .primary-nav { width: 100%; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-icon { font-size: 19px; }
  .sidebar-bottom { width: 100%; }
  .profile { justify-content: center; padding: 12px 0 0; }
  .topbar { height: 53px; padding: 0 15px; }
  .topbar-actions { gap: 5px; }
  .topbar-tool { gap: 4px; padding: 5px; font-size: 10px; }
  .topbar-tool kbd { display: none; }
  .keyboard-hint { display: none; }
  .content { padding: 27px 14px 20px; }
  .page-heading { align-items: flex-start; }
  h1 { font-size: 28px; }
  .page-subtitle { max-width: 220px; font-size: 11px; }
  .create-folder-button { padding: 0 8px; font-size: 10px; }
  .notes-toolbar { align-items: flex-start; flex-direction: column; gap: 6px; }
  .search-box { width: 100%; }
  .sort-control { align-self: flex-end; margin-bottom: 2px; }
  .notes-layout { grid-template-columns: minmax(0,1fr); overflow: visible; }
  .notes-panel { min-height: 280px; max-height: 340px; border-right: 0; border-bottom: 1px solid #1d353e; }
  .editor-panel { min-height: 430px; }
  .editor-fields { padding: 23px 19px 13px; }
  .note-title { font-size: 25px; }
  .editor-topline { padding: 0 10px; }
  .save-state { max-width: 100px; }
  .editor-location { font-size: 8px; }
  .plugin-panels { grid-template-columns: minmax(0,1fr); padding: 0 14px 16px; }
  .plugin-dialog { padding: 17px; }
  .canvas-viewport { min-height: 440px; height: 62vh; }
  .canvas-toolbar-spacer { display: none; }
  .canvas-footer { flex-direction: column; }
  .editor-tools { flex-wrap: wrap; }
  .plugin-upload { align-items: flex-start; flex-direction: column; }
  .imported-plugin-actions { align-self: flex-start; }
  .consent-dialog { padding: 17px; }
}
@media (max-width: 420px) {
  .breadcrumb { display: none; }
  .topbar { justify-content: flex-end; }
  .topbar-tool { font-size: 0; }
  .topbar-tool > span { font-size: 16px; }
  .topbar-tool kbd { display: none; }
  .notes-toolbar { gap: 6px; }
  .search-box { width: auto; min-width: 0; flex: 1; }
  .sort-control { gap: 4px; }
  .sort-label { display: none; }
  .create-folder-button { width: 34px; justify-content: center; padding: 0; font-size: 0; }
  .create-folder-button span { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .save-state.is-saving .save-dot { animation: none; }
  .new-note-button, .toast { transition: none; }
}
.editor-page-tools { display: flex; flex-wrap: wrap; gap: 7px; margin: -7px 0 15px; }
.note-meta { flex-wrap: wrap; row-gap: 6px; }
.editor-fields { position: relative; }
.slash-command-menu { position: absolute; z-index: 4; left: 30px; bottom: 52px; width: min(230px,calc(100% - 60px)); padding: 5px; border: 1px solid #31525b; border-radius: 7px; background: #10252e; box-shadow: 0 12px 28px rgba(0,0,0,.32); }
.slash-command-option { width: 100%; padding: 8px 9px; border: 0; border-radius: 4px; background: transparent; color: #b6dadd; cursor: pointer; text-align: left; font-size: 11px; }
.slash-command-option:hover, .slash-command-option:focus-visible { background: rgba(84,220,232,.12); color: #e2fbfc; }
.wiki-link { padding: 0; border: 0; background: transparent; color: #88e4e9; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(136,228,233,.45); text-underline-offset: 3px; }
.wiki-link:hover { color: #d3fbfc; }
.preview-embed { display: grid; min-height: 66px; place-items: center; overflow: hidden; margin: 14px 0 18px; border: 1px solid #294650; border-radius: 7px; background: #081820; }
.preview-embed-load { max-width: 100%; padding: 12px 15px; border: 0; background: transparent; color: #9ce7eb; cursor: pointer; font-size: 11px; overflow-wrap: anywhere; }
.preview-embed-load:hover { color: #d5fcfd; }
.preview-embed iframe { width: 100%; min-height: 360px; border: 0; background: #07151d; }
.preview-embed img, .preview-embed video { display: block; max-width: 100%; max-height: 560px; }
.preview-embed audio { width: min(100%,520px); margin: 18px; }
.synced-block-preview { padding: 12px 14px; margin: 12px 0 16px; border: 1px solid #35636b; border-radius: 6px; background: rgba(84,220,232,.055); }
.synced-block-preview > strong { display: block; margin-bottom: 6px; color: #91dfe4; font-family: var(--mono); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.synced-block-preview p:last-child { margin-bottom: 0; }
.feature-view { overflow: hidden; border: 1px solid #1e3942; border-radius: 10px; background: #0a1a22; }
.feature-content { min-height: 420px; padding: 20px; }
.feature-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.feature-page-header h2, .tools-section h2, .dataview-panel h3 { margin: 0; color: #e3f2f3; font-family: var(--display); font-size: 17px; letter-spacing: -.3px; }
.feature-page-header p, .tools-section > p, .dataview-panel > div:first-child p { max-width: 70ch; margin: 6px 0 0; color: #8da7ac; font-size: 11px; line-height: 1.55; }
.database-controls, .appearance-controls, .backup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.feature-select, .feature-input { min-width: 110px; padding: 8px 9px; border: 1px solid #294650; border-radius: 5px; background: #091b23; color: #c8dfe2; font-size: 10px; }
.feature-input::placeholder { color: #738d94; }
.feature-button { min-height: 32px; padding: 7px 10px; border: 1px solid #2e5059; border-radius: 5px; background: rgba(255,255,255,.025); color: #afd0d4; cursor: pointer; font-size: 10px; }
.feature-button:hover { border-color: var(--cyan); background: rgba(84,220,232,.1); color: #e0fbfc; }
.feature-button-primary { border-color: #397b82; background: rgba(84,220,232,.12); color: #c9f8fa; }
.feature-button:disabled { opacity: .45; cursor: not-allowed; }
.database-table-scroll { overflow-x: auto; border: 1px solid #203d46; border-radius: 7px; background: rgba(255,255,255,.012); }
.database-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.database-table th { padding: 10px 11px; border-bottom: 1px solid #294650; color: #86a7ad; font-family: var(--mono); font-size: 9px; font-weight: 500; text-align: left; white-space: nowrap; }
.database-table td { min-width: 120px; padding: 6px 8px; border-bottom: 1px solid rgba(41,70,80,.65); color: #bfd2d5; vertical-align: middle; }
.database-table tr:last-child td { border-bottom: 0; }
.database-cell-input, .database-cell-select { width: 100%; min-width: 100px; padding: 7px 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #d1e4e6; font-size: 10px; }
.database-cell-input:hover, .database-cell-input:focus, .database-cell-select:hover, .database-cell-select:focus { border-color: #2b515a; background: #0b1c24; }
.database-cell-select option { background: #10252e; color: var(--ink); }
.rollup-value { display: inline-block; min-width: 28px; padding: 4px 7px; border: 1px solid #31535b; border-radius: 99px; color: #9cd6da; font-family: var(--mono); font-size: 9px; text-align: center; }
.database-row-remove { padding: 4px 7px; border: 1px solid #4b3b40; border-radius: 4px; background: transparent; color: #d69a8f; cursor: pointer; font-size: 10px; }
.database-row-remove:hover { border-color: #aa685d; color: #ffc0b5; }
.database-empty-cell { padding: 28px 14px !important; color: #91a9ad !important; text-align: center; }
.database-table-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 10px 1px; }
.database-footer, .feature-help { color: #7f999f; font-family: var(--mono); font-size: 9px; line-height: 1.6; }
.database-add-field { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.database-add-field .feature-input { width: 145px; }
.database-add-field .feature-select { min-width: 120px; }
.database-board { display: grid; grid-template-columns: repeat(3,minmax(180px,1fr)); gap: 10px; overflow-x: auto; }
.database-lane { min-width: 180px; padding: 10px; border: 1px solid #223e47; border-radius: 6px; background: rgba(255,255,255,.012); }
.database-lane h3 { margin: 0 0 10px; color: #9ec4c8; font-family: var(--mono); font-size: 9px; font-weight: 500; }
.database-board-card { display: grid; gap: 7px; padding: 10px; margin: 6px 0; border: 1px solid #2b4851; border-radius: 5px; background: #0c2029; }
.database-board-card strong, .database-gallery-item h3 { color: #dbeaec; font-size: 11px; font-weight: 600; }
.database-board-card small { color: #8da8ad; font-size: 9px; }
.database-board-card .database-cell-select { padding: 4px; font-size: 9px; }
.database-calendar { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 8px; }
.calendar-day { min-height: 100px; padding: 10px; border-top: 2px solid #3b828a; background: rgba(84,220,232,.045); }
.calendar-day h3 { margin: 0 0 9px; color: #a4dadd; font-family: var(--mono); font-size: 10px; }
.calendar-day p { margin: 5px 0; color: #c0d4d7; font-size: 10px; }
.database-gallery { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 10px; }
.database-gallery-item { min-height: 135px; padding: 12px; border: 1px solid #28454e; border-radius: 7px; background: linear-gradient(145deg,rgba(84,220,232,.06),rgba(255,255,255,.012)); }
.database-gallery-item h3 { margin: 13px 0 10px; font-family: var(--display); font-size: 14px; }
.database-gallery-item p { margin: 5px 0; color: #8ca6ac; font-size: 9px; }
.gallery-pin { color: var(--coral); font-size: 10px; }
.database-record-list { display: grid; gap: 0; border-top: 1px solid #294650; }
.database-record-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 45px; padding: 9px 5px; border-bottom: 1px solid rgba(41,70,80,.65); }
.database-record-line > strong { color: #d3e4e6; font-size: 11px; }
.database-record-line > span { display: flex; flex-wrap: wrap; gap: 5px; }
.database-property-chip { padding: 3px 6px; border: 1px solid #29464e; border-radius: 99px; color: #8eb6ba; font-size: 8px; }
.database-timeline { display: grid; max-width: 820px; }
.timeline-row { display: grid; grid-template-columns: 105px 22px minmax(0,1fr); align-items: center; gap: 9px; min-height: 47px; border-bottom: 1px solid rgba(41,70,80,.55); }
.timeline-date { color: #8ca8ad; font-family: var(--mono); font-size: 9px; }
.timeline-marker { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(84,220,232,.1); }
.timeline-row strong { color: #d0e2e4; font-size: 10px; }
.dataview-panel { padding: 17px 0 0; margin-top: 22px; border-top: 1px solid #203d46; }
.query-controls { display: flex; gap: 7px; margin: 11px 0; }
.query-input { flex: 1; }
.query-results { overflow-x: auto; }
.query-table-results { min-width: 100%; border: 1px solid #294650; }
.query-result-row { width: 100%; display: flex; gap: 14px; padding: 8px 10px; border: 0; border-bottom: 1px solid rgba(41,70,80,.6); background: transparent; color: #b9d1d4; cursor: pointer; text-align: left; font-size: 10px; }
.query-result-row:hover { background: rgba(84,220,232,.08); }
.query-result-field { min-width: 90px; flex: 1; overflow-wrap: anywhere; }
.query-list-results .query-result-row { border-bottom: 1px solid rgba(41,70,80,.6); }
.feature-empty { padding: 20px 10px; color: #8ca6ac; font-size: 11px; line-height: 1.55; }
.graph-workspace { min-height: 420px; }
.graph-stage { position: relative; height: min(65vh,600px); min-height: 400px; overflow: hidden; margin-top: 12px; border: 1px solid #23414a; border-radius: 7px; background-color: #081820; background-image: radial-gradient(circle,#23424a 1px,transparent 1px); background-size: 22px 22px; }
.graph-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph-edges line { stroke: #4aaeb6; stroke-opacity: .55; stroke-width: 1.6; }
.graph-node { position: absolute; max-width: 150px; padding: 8px 10px; overflow: hidden; border: 1px solid #35616a; border-radius: 6px; background: #10252e; box-shadow: 0 6px 14px rgba(0,0,0,.2); color: #cbe7e9; cursor: pointer; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; transform: translate(-50%,-50%); }
.graph-node:hover { border-color: var(--cyan); background: #17343d; }
.graph-node:focus-visible { z-index: 1; }
.workspace-tools { display: grid; gap: 21px; }
.tools-section { padding: 0 0 17px; border-bottom: 1px solid #203d46; }
.tools-section > .feature-button { margin-top: 12px; }
.appearance-controls { margin-top: 12px; }
.appearance-controls label { display: grid; gap: 6px; color: #8da7ac; font-size: 10px; }
.backup-actions { margin-top: 12px; }
.synced-blocks-section .feature-page-header { align-items: center; }
.synced-block-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 11px 0; border-top: 1px solid #203d46; }
.synced-block-content { grid-column: 1 / -1; min-height: 85px; resize: vertical; font-family: var(--sans); line-height: 1.6; }
.feature-view .preview-embed { margin: 0; }
html[data-xPin-density="compact"] .database-table td { padding-top: 3px; padding-bottom: 3px; }
html[data-xPin-density="compact"] .database-board-card { gap: 4px; padding: 7px; }
html[data-xPin-density="compact"] .database-record-line { min-height: 36px; }
html[data-xPin-density="comfortable"] .feature-content { padding: 24px; }
@media (max-width: 900px) {
  .feature-page-header { align-items: flex-start; flex-direction: column; }
  .database-controls { width: 100%; }
  .database-board { grid-template-columns: repeat(3,minmax(205px,1fr)); }
}
@media (max-width: 760px) {
  .feature-content { padding: 14px; }
  .database-controls { align-items: stretch; }
  .database-controls .feature-select { flex: 1; }
  .database-table-bottom { flex-direction: column; }
  .database-add-field { justify-content: flex-start; }
  .database-record-line { align-items: flex-start; flex-direction: column; gap: 7px; }
  .query-controls { align-items: stretch; flex-direction: column; }
  .timeline-row { grid-template-columns: 78px 18px minmax(0,1fr); }
  .synced-blocks-section .feature-page-header { align-items: flex-start; }
  .note-meta select { max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-button, .database-cell-input, .database-cell-select { transition: none; }
}

/* ---------- xPin build-out batch 1: quick capture, backlinks, link suggest, templates ---------- */
.quick-capture-dialog { max-width: 440px; }
.quick-capture-input { width: 100%; min-height: 96px; margin-top: 14px; padding: 10px 11px; border: 1px solid #294650; border-radius: 7px; background: #091b23; color: var(--ink); font-size: 13px; line-height: 1.55; resize: vertical; }
.quick-capture-input::placeholder { color: #738d94; }
.quick-capture-actions { display: flex; gap: 8px; }
.dialog-button-secondary { padding: 8px 13px; border: 1px solid #2e5059; border-radius: 6px; background: transparent; color: #9db8bd; cursor: pointer; font-size: 11px; }
.dialog-button-secondary:hover { border-color: var(--cyan); color: #e0fbfc; }

.backlinks { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.backlinks-heading { margin-bottom: 5px; color: var(--dim); font-family: var(--mono); font-size: 9px; letter-spacing: 1.1px; }
.backlink-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: #a9c6cc; cursor: pointer; text-align: left; font-size: 12px; }
.backlink-row:hover { background: rgba(84,220,232,.08); color: #d9f6f7; }
.backlink-tag { color: var(--dim); font-family: var(--mono); font-size: 8px; letter-spacing: 1px; }
.backlinks-empty { margin: 0; padding: 2px 8px; color: #5d767e; font-size: 12px; }

.link-suggest { position: fixed; z-index: 6; width: min(250px,calc(100vw - 16px)); max-height: 220px; overflow: auto; padding: 5px; border: 1px solid #31525b; border-radius: 7px; background: #10252e; box-shadow: 0 12px 28px rgba(0,0,0,.32); }
.link-suggest-option { width: 100%; padding: 8px 9px; border: 0; border-radius: 4px; background: transparent; color: #b6dadd; cursor: pointer; text-align: left; font-size: 11px; }
.link-suggest-option.is-active, .link-suggest-option:hover { background: rgba(84,220,232,.12); color: #e2fbfc; }

.template-picker-dialog { max-width: 440px; }
.template-picker-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.template-picker-option { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid #294650; border-radius: 7px; background: rgba(255,255,255,.02); cursor: pointer; text-align: left; }
.template-picker-option:hover { border-color: var(--cyan); background: rgba(84,220,232,.07); }
.template-picker-option strong { color: #dff3f4; font-size: 13px; }
.template-picker-option small { color: #6f8a91; font-size: 11px; }

.template-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.template-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #1f3a43; border-radius: 7px; background: rgba(255,255,255,.015); }
.template-name { flex: 1; min-width: 0; overflow: hidden; color: #cfe6e8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.template-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.template-content-input { min-height: 88px; font-size: 12px; line-height: 1.55; resize: vertical; }
.template-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Marketplace ---------- */
.plugin-tabs { display: flex; gap: 6px; margin-top: 14px; }
.plugin-tab { padding: 8px 16px; border: 1px solid #1d3841; border-bottom: none; border-radius: 8px 8px 0 0; background: transparent; color: #7f979e; font-size: 12px; cursor: pointer; }
.plugin-tab.is-active { background: rgba(255,255,255,.03); color: #e8f4f5; border-color: #2b4a54; }
#plugin-tab-catalogue { padding-top: 2px; }
.marketplace-dirs { margin-top: 13px; padding: 12px; border: 1px solid #29454e; border-radius: 7px; background: rgba(255,255,255,.018); }
.marketplace-dirs strong, .marketplace-dirs small { display: block; }
.marketplace-dirs small { color: #7f979e; font-size: 10px; margin-top: 2px; }
.marketplace-dir-add { display: flex; gap: 8px; margin-top: 10px; }
.marketplace-dir-add input { flex: 1; min-width: 0; }
.marketplace-dir-list { display: grid; gap: 6px; margin-top: 10px; }
.marketplace-dir-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.marketplace-dir-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9fd8e8; font-size: 10px; }
.marketplace-toolbar { display: flex; gap: 8px; margin-top: 12px; }
.marketplace-toolbar input { flex: 1; min-width: 0; }
.marketplace-status { margin: 10px 2px; color: #7f979e; font-size: 11px; min-height: 16px; }
.marketplace-list { display: grid; gap: 10px; }
.marketplace-card { padding: 12px; border: 1px solid #1d3841; border-radius: 8px; background: rgba(255,255,255,.018); }
.marketplace-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.marketplace-card-head strong { color: #d9e9eb; font-size: 13px; }
.marketplace-version { color: #789198; font-family: var(--mono); font-size: 9px; }
.marketplace-card p { margin: 6px 0; color: #7f979e; font-size: 11px; line-height: 1.45; }
.marketplace-meta { color: #789198; font-family: var(--mono); font-size: 8px; letter-spacing: .55px; }
.marketplace-caps { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.marketplace-cap { padding: 2px 8px; border: 1px solid #2b4a54; border-radius: 20px; color: #9fd8e8; font-family: var(--mono); font-size: 8px; }
.marketplace-card-actions { display: flex; justify-content: flex-end; }

/* ---------- Phase 1: sync / connector / publish ---------- */
.consent-origins-heading { margin: 10px 0 2px; color: #9fd8e8; font-size: 11px; font-weight: 600; }
.plugin-tier-note { display: block; margin-top: 4px; color: #9fd8e8 !important; font-size: 10px; letter-spacing: .4px; }
.plugin-origin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.plugin-origin-row small { color: #9fd8e8; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marketplace-changelog { display: block; margin-top: 8px; color: #c9a06a; font-size: 11px; line-height: 1.45; }
#sync-section h3, #publish-section h3 { margin: 18px 0 4px; color: #d9e9eb; font-size: 13px; }

/* ---------- Phase 2: Capture & smarts ---------- */
.daily-strip-wrap { margin-top: 14px; }
.daily-strip { display: flex; gap: 4px; align-items: center; }
.daily-strip-nav { flex: 0 0 auto; background: none; border: none; color: #7f979e; font-size: 16px; cursor: pointer; padding: 4px 2px; }
.daily-strip-day { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0 4px; border: 1px solid transparent; border-radius: 7px; background: none; color: #a8bfc4; cursor: pointer; font-family: inherit; }
.daily-strip-day:hover { border-color: #29454e; }
.daily-strip-day.is-today { border-color: var(--cyan); color: #d9e9eb; }
.daily-strip-day.has-note .daily-strip-num::after { content: "•"; display: block; font-size: 8px; line-height: 6px; color: var(--cyan); }
.daily-strip-dow { font-size: 9px; letter-spacing: .5px; color: #7f979e; }
.daily-strip-num { font-size: 13px; font-weight: 600; }
.daily-strip-today { flex: 0 0 auto; background: none; border: none; color: #9fd8e8; font-size: 10px; cursor: pointer; padding: 4px 2px; }
.phase2-view { padding: 8px 0 40px; max-width: 860px; }
.phase2-header h2 { font-size: 22px; margin: 0 0 4px; }
.phase2-header p { color: #7f979e; font-size: 12px; margin: 0 0 14px; }
.phase2-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.phase2-tab { padding: 7px 12px; border: 1px solid #29454e; border-radius: 20px; background: none; color: #a8bfc4; font-size: 12px; cursor: pointer; font-family: inherit; }
.phase2-tab.is-active { border-color: var(--cyan); color: #d9e9eb; background: rgba(255,255,255,.04); }
.phase2-body { display: grid; gap: 16px; }
.phase2-section h3 { margin: 0 0 6px; font-size: 15px; }
.phase2-section p { color: #7f979e; font-size: 12px; line-height: 1.5; margin: 0 0 10px; }
.phase2-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.phase2-status { color: #9fd8e8; font-size: 12px; }
.phase2-check { display: flex; gap: 8px; align-items: center; color: #d9e9eb; font-size: 12px; margin: 8px 0; }
.phase2-card { padding: 12px; border: 1px solid #1d3841; border-radius: 8px; background: rgba(255,255,255,.018); margin-bottom: 10px; }
.phase2-card-title { color: #d9e9eb; font-size: 13px; font-weight: 600; text-decoration: none; }
.phase2-card-title:hover { text-decoration: underline; }
.phase2-card-meta { color: #789198; font-size: 11px; margin: 4px 0; }
.phase2-card-text { color: #a8bfc4; font-size: 12px; line-height: 1.55; margin: 6px 0; white-space: pre-wrap; }
.phase2-flashcard { padding: 18px; border: 1px solid #29454e; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 16px; line-height: 1.5; margin: 10px 0; white-space: pre-wrap; }
.phase2-flashcard-back { border-color: var(--cyan); }
.phase2-assist-out { white-space: pre-wrap; color: #d9e9eb; font-size: 12px; line-height: 1.55; margin-top: 10px; }
.note-search-snippet { display: block; color: #7f979e; font-size: 11px; line-height: 1.4; margin-top: 2px; }
.note-search-snippet mark { background: rgba(159, 216, 232, .25); color: #d9e9eb; border-radius: 2px; padding: 0 1px; }
.search-extras { margin-top: 10px; padding-top: 8px; border-top: 1px solid #1d3841; }
.search-extras-heading { color: #789198; font-size: 9px; letter-spacing: .6px; margin-bottom: 4px; }
.search-extra-row { display: block; width: 100%; text-align: left; background: none; border: none; color: #9fd8e8; font-size: 11px; padding: 4px 0; cursor: pointer; font-family: inherit; }
.attachment-ref { display: block; margin: 8px 0; padding: 8px; border: 1px dashed #29454e; border-radius: 7px; color: #a8bfc4; font-size: 12px; }
.attachment-image { max-width: 100%; border-radius: 6px; }
.attachment-pdf { width: 100%; min-height: 420px; border: none; }
.attachment-download { color: #9fd8e8; }
.attachment-sync-note { display: block; color: #789198; font-size: 10px; margin-top: 2px; }

/* ---- Phase 3 — Power & polish ---- */

/* Light theme (settings → Appearance). Overrides the main surfaces; a few
   hardcoded accent colors stay as-is. */
:root[data-xpin-theme="light"] {
  color-scheme: light;
  --ink: #16303a;
  --muted: #5c767f;
  --dim: #8aa2a9;
  --canvas: #f4f8f8;
  --sidebar: #e9f1f2;
  --cyan: #0e7d8a;
  --cyan-bright: #0a9aa8;
  --coral: #d9502f;
}
[data-xpin-theme="light"] body { background: var(--canvas); color: var(--ink); }
[data-xpin-theme="light"] .sidebar { background: var(--sidebar); border-right-color: #cfdee1; }
[data-xpin-theme="light"] .brand, [data-xpin-theme="light"] .brand-period { color: #16303a; }
[data-xpin-theme="light"] .nav-item { color: #4d6a72; }
[data-xpin-theme="light"] .nav-item:hover { background: rgba(0,0,0,.05); color: #16303a; }
[data-xpin-theme="light"] .nav-item.is-active { background: rgba(14,125,138,.12); color: #0b5f6b; }
[data-xpin-theme="light"] .topbar { border-bottom-color: #d5e2e4; }
[data-xpin-theme="light"] .feature-view, [data-xpin-theme="light"] .phase3-view { background: #ffffff; border-color: #d5e2e4; }
[data-xpin-theme="light"] .note-body, [data-xpin-theme="light"] .markdown-preview { color: #33474e; }
[data-xpin-theme="light"] .dialog { background: #ffffff; border-color: #cfdee1; }
[data-xpin-theme="light"] .dialog-header h2 { color: #16303a; }
[data-xpin-theme="light"] .dialog-description { color: #5c767f; }
[data-xpin-theme="light"] .graph-stage { background-color: #eef4f4; border-color: #cfdee1; }
[data-xpin-theme="light"] .graph-node { background: #ffffff; color: #16303a; border-color: #b9cdd1; }
[data-xpin-theme="light"] .feature-input, [data-xpin-theme="light"] .feature-select { background: #ffffff; color: #16303a; border-color: #cfdee1; }

/* Editor font choice (settings → Appearance). */
[data-xpin-font="serif"] .note-body, [data-xpin-font="serif"] .markdown-preview { font-family: Georgia, "Times New Roman", serif; }
[data-xpin-font="mono"] .note-body, [data-xpin-font="mono"] .markdown-preview { font-family: var(--mono); }

/* Side-by-side live preview (editor split). */
.editor-fields.editor-split { display: grid; grid-template-columns: 1fr 1fr; }
.editor-fields.editor-split > *:not(.note-body):not(.markdown-preview):not(.editor-bottom) { grid-column: 1 / -1; }
.editor-fields.editor-split .note-body { grid-column: 1; min-height: 320px; padding-right: 16px; border-right: 1px solid #1e3942; }
.editor-fields.editor-split .markdown-preview { grid-column: 2; min-height: 320px; padding-left: 16px; }
.editor-fields.editor-split .editor-bottom { grid-column: 1 / -1; }

/* Typed blocks + script blocks in preview. */
.p3-typed-block, .p3-script-block { margin: 12px 0; padding: 12px; border: 1px solid #2b4a54; border-radius: 8px; background: rgba(255,255,255,.02); }
.p3-type-chip { display: inline-block; margin-right: 8px; padding: 2px 7px; border-radius: 20px; background: rgba(84,220,232,.14); color: var(--cyan-bright); font-family: var(--mono); font-size: 9px; letter-spacing: .8px; text-transform: uppercase; }
.p3-typed-title { font-size: 13px; }
.p3-typed-fields { display: grid; gap: 8px; margin: 10px 0; }
.p3-typed-field { display: grid; gap: 3px; color: var(--muted); font-size: 11px; }
.p3-typed-field input, .p3-typed-field select { width: 100%; padding: 6px 8px; border: 1px solid #29444d; border-radius: 6px; background: #0a1f28; color: var(--ink); }
.p3-script-source { max-height: 320px; overflow: auto; padding: 12px; border: 1px solid #29444d; border-radius: 8px; background: #081820; color: #9ce7eb; font-family: var(--mono); font-size: 11px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

/* In-app dialog (replaces window.prompt). */
.xpin-dialog { padding: 23px; }
.xpin-dialog-backdrop { z-index: 8; }
.xpin-dialog-label { display: grid; gap: 6px; margin-top: 12px; color: #89a0a6; font-size: 12px; }
.xpin-dialog-input { width: 100%; }

/* Power & polish view. */
.phase3-view { padding: 8px 0 40px; max-width: 860px; }
.p3-view h2 { font-size: 22px; margin: 0 0 4px; }
.p3-view .tools-section { margin-bottom: 20px; }
.p3-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.p3-row .feature-input { flex: 1; min-width: 140px; }
.p3-task-list { display: grid; gap: 6px; margin: 10px 0; }
.p3-task { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #1d3841; border-radius: 8px; background: rgba(255,255,255,.018); cursor: pointer; }
.p3-task.is-selected { border-color: var(--cyan); }
.p3-task-score { flex: 0 0 auto; min-width: 28px; text-align: center; padding: 2px 6px; border-radius: 20px; background: rgba(84,220,232,.14); color: var(--cyan-bright); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.p3-task-text { font-size: 12px; line-height: 1.5; }
.p3-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 8px; }
.p3-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.p3-cal-day { min-height: 52px; padding: 6px 4px; border: 1px solid #1d3841; border-radius: 7px; background: none; color: var(--ink); cursor: pointer; text-align: left; font-family: inherit; }
.p3-cal-day:hover { border-color: var(--cyan); }
.p3-cal-day.is-other-month { opacity: .4; }
.p3-cal-day.is-today { border-color: var(--cyan); }
.p3-cal-num { display: block; font-size: 12px; font-weight: 600; }
.p3-cal-dot { display: block; color: var(--cyan-bright); font-size: 10px; }
.p3-script-card { padding: 10px; border: 1px solid #1d3841; border-radius: 8px; margin: 8px 0; }
.p3-section-title { margin: 0 0 6px; font-size: 14px; }

/* Comments panel under the editor. */
.note-comments { padding: 16px 34px 24px; border-top: 1px solid #1d3841; }
.p3-comment { padding: 8px 0; border-bottom: 1px solid #1d3841; }
.p3-comment-head { color: var(--muted); font-size: 11px; }
.p3-comment-body { margin: 4px 0 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.p3-comment-row { display: flex; gap: 8px; margin-top: 10px; }
.p3-comment-row .feature-input { flex: 1; }

/* Reminders banner on the daily note. */
.p3-reminders { display: flex; gap: 10px; align-items: center; margin: 12px 34px 0; padding: 10px 12px; border: 1px solid rgba(255,193,7,.4); border-radius: 8px; background: rgba(255,193,7,.08); font-size: 12px; }
.p3-banner-dismiss { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; }

/* Sidebar sections (saved queries, mentions). */
.p3-sidebar { margin: 18px 0 8px; }
.p3-sidebar .nav-label { margin-top: 14px; }
.p3-sidebar-item { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Graph v2 controls + zoom canvas. */
.graph-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.graph-controls .feature-select { max-width: 180px; }
.graph-zoom { color: var(--muted); font-family: var(--mono); font-size: 11px; min-width: 44px; text-align: center; }
.graph-canvas { position: absolute; inset: 0; transform-origin: 0 0; }
.graph-canvas .graph-edges { position: absolute; inset: 0; }
.graph-orphan-toggle { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; cursor: pointer; }

/* Databases v2: view controls, formulas, groups, reminders. */
.database-view-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.database-view-controls .feature-select, .database-view-controls .feature-input { max-width: 170px; }
.database-view-label { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; }
.formula-value { color: var(--cyan-bright); font-family: var(--mono); font-size: 12px; }
.database-group-heading { background: rgba(84,220,232,.06); color: var(--muted); font-size: 11px; font-weight: 700; }
.database-row-remind { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.database-row-remind:hover { color: var(--cyan-bright); }