/* My notes: composer + card board (masonry), coloured notes, checklist ticks, editor dialog. */
.content.personal-notes-content { padding: 0; overflow: auto; display: block; }
.nt-board { padding: 26px 30px 90px; display: grid; gap: 16px; align-content: start; }

.nt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nt-head h1 { margin: 0; font-size: 26px; letter-spacing: -.5px; }
.nt-head small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.nt-search { display: flex; align-items: center; gap: 8px; width: min(340px, 100%); height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.nt-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.nt-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.nt-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.nt-filters button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.nt-filters button em { font-style: normal; font-size: 11px; opacity: .8; }
.nt-filters button.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

/* Note colours (cards, composer, editor, swatches) */
.c-yellow { --note: #f6d365; } .c-green { --note: #4cc38a; } .c-blue { --note: #5b9bf0; } .c-purple { --note: #a78bfa; } .c-pink { --note: #f472b6; } .c-gray { --note: #94a3b8; }
.nt-note[class*=" c-"], .nt-composer[class*=" c-"] { background: color-mix(in srgb, var(--note) 16%, var(--surface)); border-color: color-mix(in srgb, var(--note) 45%, var(--line)); }
.sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); background: var(--note, var(--surface)); cursor: pointer; padding: 0; transition: transform .12s; }
.sw.c-none { background: linear-gradient(135deg, var(--surface) 45%, var(--line) 45%, var(--line) 55%, var(--surface) 55%); }
.sw:hover { transform: scale(1.12); }
.sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* Composer */
.nt-composer { width: 100%; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 10px 30px rgba(6, 12, 30, .12); }
.nt-composer.closed { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--muted); font: inherit; font-size: 14px; cursor: text; text-align: left; }
.nt-composer.closed svg { color: var(--accent); }
.nt-composer.closed span { flex: 1; }
.nt-composer.closed kbd, .nt-composer-bar small { font-family: inherit; font-size: 11px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.nt-composer.open { display: grid; padding: 6px 6px 8px; animation: nt-grow .15s ease-out; }
.nt-composer.open input, .nt-composer.open textarea { border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; padding: 10px 14px; }
.nt-composer.open input { font-size: 16px; font-weight: 800; }
.nt-composer.open textarea { font-size: 14px; line-height: 1.6; resize: vertical; min-height: 96px; }
.nt-composer-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 0; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.nt-tool { width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.nt-tool:hover { background: var(--surface2); color: var(--ink); }
.nt-tool.on { color: var(--accent); background: var(--soft); }
.nt-inline-swatches { display: inline-flex; gap: 5px; margin-left: 4px; }
.nt-spacer { flex: 1; }

/* Card board */
.nt-section h2 { margin: 6px 4px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nt-grid { columns: 260px; column-gap: 14px; }
.nt-note { position: relative; break-inside: avoid; margin-bottom: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: box-shadow .15s, border-color .15s, transform .15s; }
.nt-note:hover { box-shadow: 0 12px 28px rgba(6, 12, 30, .14); transform: translateY(-1px); }
.nt-note-open { padding: 14px 16px 6px; cursor: pointer; outline: none; }
.nt-note-open:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 14px; }
.nt-note h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: -.2px; overflow-wrap: anywhere; }
.nt-note-body { display: grid; gap: 3px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.nt-note-body p { margin: 0; overflow-wrap: anywhere; }
.nt-note-body p.gap { height: 6px; }
.nt-note-body .muted { color: var(--muted); font-style: italic; }
.nb-check { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.nb-check svg { flex: none; margin-top: 2px; color: var(--muted); }
.nb-check:hover svg { color: var(--accent); }
.nb-check.done span { text-decoration: line-through; color: var(--muted); }
.nb-check.done svg { color: #2fb380; }
.nt-note footer { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px 16px; min-height: 40px; }
.nt-note-meta { flex: 1; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.nt-note-tools { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.nt-note:hover .nt-note-tools, .nt-note:focus-within .nt-note-tools { opacity: 1; }
.nt-note-tools button { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.nt-note-tools button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.nt-note-tools button.on { color: var(--accent); }
.nt-note-tools button.danger:hover { color: #d84a4a; }
.nt-swatches { position: absolute; right: 8px; bottom: 44px; z-index: 5; display: flex; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 12px 30px rgba(6, 12, 30, .2); }
.nt-empty { display: grid; justify-items: center; gap: 6px; padding: 50px 20px; color: var(--muted); text-align: center; }
.nt-empty strong { color: var(--ink); font-size: 15px; }
.nt-empty small { font-size: 12.5px; }

/* Editor dialog */
.ne-dialog .mx-body { gap: 6px; padding: 18px 26px 10px; }
.ne-dialog[class*=" c-"] .mx-head { background: linear-gradient(180deg, color-mix(in srgb, var(--note) 22%, transparent), transparent); }
.ne-title { border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 24px; font-weight: 800; letter-spacing: -.4px; padding: 4px 0; }
.ne-body { min-height: 46vh; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.75; padding: 4px 0; }
.ne-title::placeholder, .ne-body::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.ne-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #1b8a5f; }
.ne-state[data-state=saving] { color: var(--muted); }
.ne-state[data-state=saving] svg { animation: nt-spin 1s linear infinite; }
:root[data-theme=dark] .ne-state { color: #6fdcae; }

@media (max-width: 700px) { .nt-board { padding: 18px 14px 50px; } .nt-note-tools { opacity: 1; } }
@keyframes nt-grow { from { opacity: .4; transform: scale(.98) } to { opacity: 1; transform: none } }
@keyframes nt-spin { to { transform: rotate(360deg) } }

/* Notes: private / team split */
.nt-scope { display: flex; padding: 3px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.nt-scope button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nt-scope button em { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--surface2); }
.nt-scope button.on { color: var(--accent); background: var(--soft); }
.nt-author { color: var(--accent); font-weight: 700; }
/* Note card tools float over the footer on hover, so the author/date line keeps its full width. */
.nt-note footer { position: relative; }
.nt-note-tools { position: absolute; right: 6px; bottom: 5px; padding: 2px; border-radius: 10px; background: var(--surface); box-shadow: 0 6px 18px rgba(6, 12, 30, .16); pointer-events: none; }
.nt-note:hover .nt-note-tools, .nt-note:focus-within .nt-note-tools { pointer-events: auto; }
@media (max-width: 700px) { .nt-note-tools { position: static; box-shadow: none; background: transparent; pointer-events: auto; } }
/* ======================================================================
   Notebook (sections · list · editor)
   ====================================================================== */
.content.personal-notes-content { padding: 0; overflow: hidden; display: flex; }
.nb2 { flex: 1; min-width: 0; display: grid; grid-template-columns: 250px 330px minmax(0, 1fr); height: 100%; }
.nb2-nav { display: flex; flex-direction: column; gap: 14px; padding: 18px 14px; border-right: 1px solid var(--line); background: var(--surface); overflow: auto; }
.nb2-new { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #3976d8, #214fa6); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(33, 79, 166, .28); }
.nb2-new:hover { filter: brightness(1.07); }
.nb2-scopes { display: grid; gap: 4px; }
.nb2-scope { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nb2-scope:hover { background: var(--surface2); }
.nb2-scope.on { background: var(--soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.nb2-scope-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; }
.nb2-scope-icon.mine { color: #4882e2; background: rgba(72, 130, 226, .15); }
.nb2-scope-icon.team { color: #2fb380; background: rgba(47, 179, 128, .15); }
.nb2-scope-icon.client { color: #8a72f0; background: rgba(138, 114, 240, .16); }
.nb2-scope-text { flex: 1; min-width: 0; display: grid; }
.nb2-scope-text strong { font-size: 13.5px; }
.nb2-scope-text small { font-size: 11.5px; color: var(--muted); }
.nb2-scope em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--surface2); color: var(--muted); }
.nb2-filters { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.nb2-filters > span { margin: 0 8px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nb2-filters button { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.nb2-filters button:hover { background: var(--surface2); color: var(--ink); }
.nb2-filters button.on { color: var(--accent); background: var(--soft); }

.nb2-list { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 18px 12px 12px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface2) 35%, var(--bg)); }
.nb2-list > header { padding: 0 6px; }
.nb2-list h2 { margin: 0; font-size: 18px; }
.nb2-list header small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.nb2-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.nb2-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.nb2-search:focus-within { border-color: var(--accent); }
.nb2-client { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.nb2-items { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 6px; padding: 2px; scrollbar-width: thin; }
.nb2-item { display: grid; gap: 4px; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-left: 4px solid var(--note, var(--line)); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.nb2-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); border-left-color: var(--note, var(--accent)); }
.nb2-item.active { border-color: var(--accent); border-left-color: var(--note, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.nb2-item-top { display: flex; align-items: center; gap: 6px; }
.nb2-item-top strong { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb2-pin { color: var(--accent); flex: none; }
.nb2-item > small { font-size: 12px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb2-item-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.nb2-item-meta span { display: inline-flex; align-items: center; gap: 3px; }
.nb2-item-meta time { margin-left: auto; }
.nb2-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 140px; padding: 1px 7px; border-radius: 999px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nb2-tag.team { color: #1b8a5f; background: rgba(47, 179, 128, .14); }
.nb2-tag.client { color: #6a52d6; background: rgba(138, 114, 240, .15); }
:root[data-theme=dark] .nb2-tag.team { color: #6fdcae; } :root[data-theme=dark] .nb2-tag.client { color: #b6a6ff; }
.nb2-empty { display: grid; justify-items: center; gap: 10px; padding: 34px 16px; text-align: center; color: var(--muted); }
.nb2-empty p { margin: 0; font-size: 12.5px; line-height: 1.5; }

.nb2-editor { min-width: 0; min-height: 0; overflow: auto; background: var(--bg); }
.nb2-ed { min-height: 100%; display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin: 0 auto; padding: 16px 28px 24px; }
.nb2-ed[class*=" c-"] { box-shadow: inset 0 4px 0 var(--note); }
.nb2-ed-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nb2-back { display: none; width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--surface2); color: var(--ink); place-items: center; cursor: pointer; }
.nb2-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.nb2-state[data-state=saving] svg { animation: ch-spin 1s linear infinite; }
.nb2-spacer { flex: 1; }
.nb2-tool { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.nb2-tool:hover { background: var(--surface2); color: var(--ink); }
.nb2-tool.on { color: var(--accent); background: var(--soft); }
.nb2-tool.danger:hover { color: #d84a4a; background: rgba(216, 74, 74, .1); }
.nb2-colors { display: inline-flex; gap: 4px; padding: 0 6px; }
.nb2-colors .sw { width: 18px; height: 18px; }
.nb2-vis { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.nb2-vis.mine { border-left: 4px solid #4882e2; } .nb2-vis.team { border-left: 4px solid #2fb380; } .nb2-vis.client { border-left: 4px solid #8a72f0; }
.nb2-vis-label { font-size: 12px; font-weight: 800; }
.nb2-vis > small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.nb2-vis.readonly { gap: 8px; font-size: 13px; font-weight: 700; }
.nb2-vis.readonly small { flex-basis: auto; margin-left: auto; }
.nb2-vis select { height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); font: inherit; font-size: 12.5px; }
.nb2-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface2); }
.nb2-seg button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.nb2-seg button.on { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgba(6, 12, 30, .15); }
.nb2-title { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 26px; font-weight: 800; letter-spacing: -.4px; padding: 4px 0; }
.nb2-progress { display: flex; align-items: center; gap: 10px; }
.nb2-progress span { flex: 1; height: 6px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.nb2-progress i { display: block; height: 100%; background: linear-gradient(90deg, #2fb380, #1b8a5f); }
.nb2-progress small { font-size: 12px; color: var(--muted); }
.nb2-body { flex: 1; min-height: 48vh; width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.75; padding: 0; }
.nb2-ed-foot { font-size: 11.5px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); }

.nb2-welcome { max-width: 760px; margin: 0 auto; padding: 48px 28px; text-align: center; }
.nb2-welcome h2 { margin: 0 0 6px; font-size: 22px; }
.nb2-welcome > p { margin: 0 0 22px; color: var(--muted); font-size: 13.5px; }
.nb2-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left; }
.nb2-kind { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.nb2-kind:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--accent); }
.nb2-kind[disabled] { opacity: .5; cursor: not-allowed; }
.nb2-kind strong { font-size: 14.5px; }
.nb2-kind small { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.nb2-kind-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--accent); }
.nb2-tip { display: inline-flex; align-items: center; gap: 6px; margin: 22px 0 0; font-size: 12px; color: var(--muted); }

@media (min-width: 901px) and (max-width: 1280px) {
  .nb2 { grid-template-columns: 210px 290px minmax(0, 1fr); }
  .nb2-scope-text small { display: none; }
  .nb2-kinds { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nb2 { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .nb2-nav { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .nb2-new { flex: none; width: 44px; padding: 0; font-size: 0; gap: 0; }
  .nb2-scopes { display: flex; gap: 6px; }
  .nb2-scope { flex: none; padding: 6px 10px 6px 6px; }
  .nb2-scope-icon { width: 28px; height: 28px; }
  .nb2-scope-text small { display: none; }
  .nb2-filters { display: none; }
  .nb2-list { border-right: 0; padding: 12px; }
  .nb2-editor { display: none; }
  .nb2.nb-editor-open .nb2-list, .nb2.nb-editor-open .nb2-nav { display: none; }
  .nb2.nb-editor-open { grid-template-rows: minmax(0, 1fr); }
  .nb2.nb-editor-open .nb2-editor { display: block; }
  .nb2-back { display: grid; }
  .nb2-ed { padding: 10px 14px 18px; }
  .nb2-title { font-size: 22px; }
  .nb2-colors { order: 10; flex-basis: 100%; padding: 4px 0 0; }
}
/* ======================================================================
   Notes v3: header bar with tabs + full-width card grid; editor in a side panel
   ====================================================================== */
.content.personal-notes-content { padding: 0; overflow: auto; display: block; }
.nb3 { display: grid; gap: 18px; align-content: start; padding: 22px 28px 90px; }
.nb3-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.nb3-title { display: grid; margin-right: 6px; }
.nb3-title h1 { margin: 0; font-size: 20px; letter-spacing: -.3px; }
.nb3-title small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.nb3-tabs { display: flex; padding: 3px; border-radius: 12px; background: var(--surface2); }
.nb3-tab { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.nb3-tab em { font-style: normal; font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nb3-tab.on { color: var(--ink); background: var(--surface); box-shadow: 0 1px 4px rgba(6, 12, 30, .16); }
.nb3-tab.on.mine svg { color: #4882e2; } .nb3-tab.on.team svg { color: #2fb380; } .nb3-tab.on.client svg { color: #8a72f0; }
.nb3-spacer { flex: 1; }
.nb3-search { display: flex; align-items: center; gap: 8px; width: 240px; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface2); color: var(--muted); }
.nb3-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.nb3-search:focus-within { border-color: var(--accent); }
.nb3-filter { display: inline-flex; gap: 4px; }
.nb3-filter button { height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.nb3-filter button.on { color: var(--accent); border-color: var(--accent); background: var(--soft); }
.nb3-client { height: 38px; padding: 0 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); font: inherit; font-size: 13px; }
.nb3-new { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #3976d8, #214fa6); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(33, 79, 166, .28); white-space: nowrap; }
.nb3-new:hover { filter: brightness(1.07); }

.nb3-section { display: grid; gap: 10px; }
.nb3-section h2 { margin: 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nb3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.nb3-card { position: relative; display: flex; flex-direction: column; min-height: 150px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: transform .14s, box-shadow .14s, border-color .14s; }
.nb3-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 12px 28px rgba(6, 12, 30, .14); }
.nb3-card[class*=" c-"] { background: color-mix(in srgb, var(--note) 15%, var(--surface)); border-color: color-mix(in srgb, var(--note) 45%, var(--line)); }
.nb3-card.pinned { box-shadow: inset 0 3px 0 var(--note, var(--accent)); }
.nb3-pin { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.nb3-card:hover .nb3-pin, .nb3-pin.on { opacity: 1; }
.nb3-pin.on { color: var(--accent); background: var(--soft); }
.nb3-open { flex: 1; display: grid; align-content: start; gap: 8px; padding: 16px 44px 6px 16px; cursor: pointer; }
.nb3-open h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.nb3-body { display: grid; gap: 3px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.nb3-body p { margin: 0; overflow-wrap: anywhere; }
.nb3-body p.muted { color: var(--muted); }
.nb3-check { display: flex; align-items: flex-start; gap: 7px; padding: 1px 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nb3-check svg { flex: none; margin-top: 2px; color: var(--muted); }
.nb3-check.done { color: var(--muted); } .nb3-check.done span { text-decoration: line-through; } .nb3-check.done svg { color: #2fb380; }
.nb3-card footer { display: flex; align-items: center; gap: 8px; padding: 8px 16px 12px; font-size: 11.5px; color: var(--muted); }
.nb3-card footer span { display: inline-flex; align-items: center; gap: 4px; }
.nb3-card footer time { margin-left: auto; }
.nb3-empty { display: grid; justify-items: center; gap: 10px; max-width: 520px; margin: 40px auto; padding: 32px; text-align: center; border-radius: 18px; border: 1px dashed var(--line); background: var(--surface); }
.nb3-empty .nb2-scope-icon { width: 54px; height: 54px; border-radius: 16px; }
.nb3-empty strong { font-size: 16px; }
.nb3-empty p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* Side panel editor */
.mx.mx-sheet.nb3-sheet { max-width: 720px; }
.nb3-panel { height: 100%; overflow: auto; }
.nb3-panel .nb2-ed { min-height: 100%; padding: 16px 24px 22px; }
.nb3-panel .nb2-back { display: grid; order: 99; margin-left: 4px; }

@media (max-width: 1100px) { .nb3-search { width: 180px; } }
@media (max-width: 900px) {
  .nb3 { padding: 12px 12px 30px; gap: 12px; }
  .nb3-head { position: static; padding: 10px; }
  .nb3-title { flex-basis: 100%; }
  .nb3-tabs { flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .nb3-tab { flex: 1; justify-content: center; padding: 0 8px; }
  .nb3-spacer { display: none; }
  .nb3-search { flex: 1; width: auto; }
  .nb3-filter { flex-basis: 100%; order: 10; }
  .nb3-new span { display: none; }
  .nb3-new { width: 40px; padding: 0; justify-content: center; }
  .nb3-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .nb3-pin { opacity: 1; }
}
@media (max-width: 420px) { .nb3-grid { grid-template-columns: 1fr; } .nb3-tab span { font-size: 12px; } }
.nb3 { grid-template-columns: minmax(0, 1fr); }
.nb3-head, .nb3-section, .nb3-grid { min-width: 0; }
@media (max-width: 900px) {
  .nb3-panel .nb2-back { order: -1; margin: 0 6px 0 0; }
  .nb3-panel .nb2-ed-bar { flex-wrap: wrap; }
}
/* Note editor dialog */
.mx.ne-modal { max-width: 860px; }
.mx.ne-modal .mx-body { padding: 0; }
.ne-modal .nb3-panel { height: auto; overflow: visible; }
.ne-wrap { display: flex; flex-direction: column; gap: 12px; padding: 16px 22px 18px; }
.ne-wrap[class*=" c-"] { box-shadow: inset 0 4px 0 var(--note); }
.ne-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ne-tools .nb2-tool { width: auto; padding: 0 10px; gap: 6px; display: inline-flex; align-items: center; border: 1px solid var(--line); font: inherit; font-size: 12.5px; font-weight: 700; }
.ne-tools .nb2-colors { margin-left: auto; }
.ne-wrap .nb2-body { min-height: 220px; flex: none; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--surface2) 40%, transparent); }
.ne-wrap .nb2-body:focus { border-color: var(--accent); }
.ne-wrap .nb2-title:focus { outline: none; }
.ne-vis { display: grid; gap: 8px; padding-top: 4px; }
.ne-vis h4 { margin: 0; font-size: 13px; }
.ne-vis-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.ne-vis-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.ne-vis-opt:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.ne-vis-opt > svg { flex: none; margin-top: 1px; color: var(--muted); }
.ne-vis-opt span:last-child { display: grid; gap: 2px; }
.ne-vis-opt strong { font-size: 13.5px; }
.ne-vis-opt small { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.ne-vis-radio { width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line); }
.ne-vis-opt.on .ne-vis-radio { border: 5px solid var(--accent); }
.ne-vis-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.ne-vis-opt.on.mine > svg { color: #4882e2; } .ne-vis-opt.on.team > svg { color: #2fb380; } .ne-vis-opt.on.client > svg { color: #8a72f0; }
.ne-vis-client { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; }
.ne-vis-client select { flex: 1; max-width: 320px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); font: inherit; font-size: 13px; }
.ne-vis-info { display: flex; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface2); }
.ne-vis-info > div { display: grid; gap: 2px; }
.ne-vis-info small { font-size: 12px; color: var(--muted); }
.ne-modal .mx-foot .nb2-state { font-size: 12px; }
@media (max-width: 900px) { .ne-wrap { padding: 12px 14px; } .ne-tools .nb2-colors { margin-left: 0; flex-basis: 100%; } .ne-vis-options { grid-template-columns: 1fr; } }