/* Notes studio. UI 2 only. Three calm columns (collections, list, document) that fold to one pane on a phone. */
html.ui2 #notesPage > :not(#nsRoot) { display: none !important; }
html.ui2 #notesPage { padding-bottom: 0; }
html.ns-lock, html.ns-lock body { overflow: hidden; }

html.ui2 .ns { --ns-h: calc(100dvh - var(--u2-top-h, 56px) - 128px); display: grid; grid-template-columns: 228px 340px minmax(0, 1fr); gap: 14px; height: max(520px, var(--ns-h)); max-width: 1500px; margin: 0 auto; }
html.ui2 .ns > section, html.ui2 .ns > aside { min-width: 0; min-height: 0; }

/* ---- rail ---- */
html.ui2 .ns-rail { display: flex; flex-direction: column; gap: 18px; overflow-y: auto; padding: 2px 4px 12px 2px; scrollbar-width: thin; }
html.ui2 .ns-new { display: flex; gap: 6px; }
html.ui2 .ns-newbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: none; border-radius: 12px; background: var(--ion); color: #04121a; font: 700 14px var(--font-ui); cursor: pointer; transition: transform 140ms var(--ease-out), filter 140ms; }
html.ui2.theme-light .ns-newbtn { color: #fff; }
html.ui2 .ns-newbtn:active { transform: scale(.97); }
html.ui2 .ns-newcaret { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; }
html.ui2 .ns-colls { display: grid; gap: 2px; }
html.ui2 .ns-coll { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: none; border-radius: 10px; background: transparent; color: var(--text-dim); font: 600 13.5px var(--font-ui); cursor: pointer; text-align: left; transition: background-color 120ms linear, color 120ms linear; }
html.ui2 .ns-coll svg { flex: none; opacity: .85; }
html.ui2 .ns-coll span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .ns-coll i { font: 600 11.5px var(--font-mono); font-style: normal; color: var(--text-faint); }
html.ui2 .ns-coll.on { background: var(--ion-dim); color: var(--ion); }
html.ui2 .ns-coll.on i { color: var(--ion); }
@media (hover: hover) and (pointer: fine) { html.ui2 .ns-coll:hover:not(.on) { background: var(--surface-hover); color: var(--text); } }
html.ui2 .ns-sec h4 { margin: 0 0 6px 10px; font: 700 10.5px var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
html.ui2 .ns-frow { display: flex; align-items: center; position: relative; }
html.ui2 .ns-fdel { position: absolute; right: 30px; width: 24px; height: 24px; border: none; background: none; color: var(--text-faint); border-radius: 6px; cursor: pointer; opacity: 0; display: grid; place-items: center; }
html.ui2 .ns-frow:hover .ns-fdel, html.ui2 .ns-fdel:focus-visible { opacity: 1; }
html.ui2 .ns-fdel:hover { color: var(--rose); }
html.ui2 .ns-fadd input { width: 100%; height: 36px; padding: 0 10px; border: 1px dashed var(--border); border-radius: 10px; background: transparent; color: var(--text); font: 500 13px var(--font-ui); margin-top: 4px; }
html.ui2 .ns-fadd input:focus { border-style: solid; border-color: var(--ion-line); outline: none; }
html.ui2 .ns-tagcloud { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
html.ui2 .ns-tagbtn { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font: 600 12px var(--font-ui); cursor: pointer; }
html.ui2 .ns-tagbtn i { font-style: normal; margin-left: 6px; color: var(--text-faint); font-family: var(--font-mono); font-size: 10.5px; }
html.ui2 .ns-tagbtn.on { border-color: var(--ion-line); background: var(--ion-dim); color: var(--ion); }

/* ---- list ---- */
html.ui2 .ns-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--u2-hi); overflow: hidden; }
html.ui2 .ns-lhead { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px 18px; }
html.ui2 .ns-lhead h3 { margin: 0; font: 700 17px var(--font-display); display: flex; align-items: baseline; gap: 8px; }
html.ui2 .ns-lhead h3 i { font: 600 12px var(--font-mono); font-style: normal; color: var(--text-faint); }
html.ui2 .ns-mnew { display: none; width: 40px; height: 40px; border: none; border-radius: 12px; background: var(--ion); color: #04121a; cursor: pointer; place-items: center; }
html.ui2 .ns-chipsrow { display: none; gap: 6px; overflow-x: auto; padding: 0 16px 8px; scrollbar-width: none; }
html.ui2 .ns-chipsrow::-webkit-scrollbar { display: none; }
html.ui2 .ns-cchip { flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font: 600 12.5px var(--font-ui); cursor: pointer; }
html.ui2 .ns-cchip.on { border-color: var(--ion-line); background: var(--ion-dim); color: var(--ion); }
html.ui2 .ns-tools { display: flex; gap: 8px; padding: 4px 14px 10px; }
html.ui2 .ns-search { position: relative; flex: 1; min-width: 0; display: block; }
html.ui2 .ns-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
html.ui2 .ns-search input { width: 100%; height: 38px; padding: 0 12px 0 33px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: 500 13.5px var(--font-ui); }
html.ui2 .ns-search input:focus-visible, html.ui2 #nsSort:focus-visible { outline: 2px solid var(--ion); outline-offset: 1px; border-color: transparent; }
html.ui2 #nsSort { height: 38px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font: 600 12.5px var(--font-ui); }
html.ui2 .ns-scroll { flex: 1; overflow-y: auto; padding: 0 8px 14px; overscroll-behavior: contain; }
html.ui2 .ns-grp { margin: 14px 10px 6px; font: 700 10.5px var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
html.ui2 .ns-item { position: relative; display: block; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 2px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; font-family: var(--font-ui); transition: background-color 120ms linear; }
html.ui2 .ns-item::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--ion); transform: scaleY(0); transition: transform 180ms var(--ease-out); }
html.ui2 .ns-item.on { background: var(--ion-dim); }
html.ui2 .ns-item.on::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) { html.ui2 .ns-item:hover:not(.on) { background: var(--surface-hover); } }
html.ui2 .ns-item:focus-visible { outline: 2px solid var(--ion); outline-offset: -2px; }
html.ui2 .ns-i-top { display: flex; align-items: center; gap: 8px; }
html.ui2 .ns-i-title { flex: 1; min-width: 0; font: 650 14.5px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .ns-i-pin { color: var(--ion); display: grid; }
html.ui2 .ns-i-prev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
html.ui2 .ns-i-prev em { color: var(--text-faint); font-style: normal; }
html.ui2 .ns-item mark, html.ui2 .nd-page mark { background: color-mix(in srgb, var(--amber) 32%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
html.ui2 .ns-i-meta { display: flex; align-items: center; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
html.ui2 .ns-i-meta time { margin-left: auto; font-size: 11.5px; color: var(--text-dim); }
html.ui2 .ns-chip { font: 600 10.5px var(--font-ui); padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui2 .ns-chip.tr { background: var(--blue-dim); color: color-mix(in srgb, var(--blue) 45%, var(--text)); }
html.ui2 .ns-chip.st { background: var(--violet-dim); color: color-mix(in srgb, var(--violet) 55%, var(--text)); }
html.ui2 .ns-chip.td.ok { background: var(--teal-dim); color: var(--teal); }
html.ui2 .ns-empty, html.ui2 .ns-first { text-align: center; padding: 38px 20px; color: var(--text-dim); }
html.ui2 .ns-empty h3, html.ui2 .ns-first h3 { font: 700 16px var(--font-display); color: var(--text); margin: 0 0 6px; }
html.ui2 .ns-skel { display: grid; gap: 10px; padding: 16px; } html.ui2 .ns-skel i { height: 64px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-2), var(--surface-hover), var(--surface-2)); background-size: 200% 100%; animation: tpShimmer 1.4s linear infinite; }

/* ---- document ---- */
html.ui2 .ns-doc { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--u2-hi); overflow: hidden; }
html.ui2 .ns-doc > .nd, html.ui2 .ns-opanel > .nd { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html.ui2 .nd-bar { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); }
html.ui2 .nd-back { display: none; }
html.ui2 .ns-opanel .nd-back { display: grid; }
html.ui2 .nd-ibtn { width: 36px; height: 36px; display: grid; place-items: center; border: none; border-radius: 10px; background: transparent; color: var(--text-dim); cursor: pointer; transition: background-color 120ms linear, color 120ms linear; }
@media (hover: hover) and (pointer: fine) { html.ui2 .nd-ibtn:hover { background: var(--surface-hover); color: var(--text); } }
html.ui2 .nd-ibtn.on { color: var(--ion); background: var(--ion-dim); }
html.ui2 .nd-ibtn.on svg { fill: currentColor; }
html.ui2 .nd-ibtn:focus-visible { outline: 2px solid var(--ion); outline-offset: 1px; }
html.ui2 .nd-crumb { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; padding-left: 6px; font: 500 12.5px var(--font-ui); color: var(--text-faint); overflow: hidden; white-space: nowrap; }
html.ui2 .nd-crumb i { font-style: normal; opacity: .6; }
html.ui2 .nd-status { font: 600 12px var(--font-ui); color: var(--text-faint); min-width: 54px; text-align: right; padding-right: 6px; }
html.ui2 .nd-status[data-s="Saved"] { color: var(--teal); }
html.ui2 .nd-status[data-s="Notsaved"] { color: var(--rose); }
html.ui2 .nd-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
html.ui2 .nd-page { max-width: 780px; margin: 0 auto; padding: 30px clamp(18px, 5vw, 56px) 140px; }
html.ui2 .nd-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
html.ui2 .nd-links.hidden { display: none; }
html.ui2 .nd-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: 600 13px var(--font-ui); cursor: pointer; }
html.ui2 .nd-chip em { font-style: normal; font: 600 12.5px var(--font-mono); }
html.ui2 .nd-chip svg { color: var(--text-dim); }
html.ui2 .nd-trade { border-color: color-mix(in srgb, var(--blue) 35%, var(--border)); } html.ui2 .nd-setup { border-color: color-mix(in srgb, var(--violet) 35%, var(--border)); }
html.ui2 .nd-x { width: 22px; height: 22px; border: none; background: transparent; color: var(--text-faint); border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
html.ui2 .nd-x:hover { color: var(--rose); }
html.ui2 .nd-title { width: 100%; border: none; background: transparent; color: var(--text); font: 700 clamp(26px, 3.4vw, 38px)/1.15 var(--font-display); letter-spacing: -.025em; padding: 0; margin: 0 0 10px; }
html.ui2 .nd-title::placeholder { color: var(--text-faint); opacity: .7; }
html.ui2 .nd-title:focus { outline: none; }
html.ui2 .nd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 22px; min-height: 28px; }
html.ui2 .nd-tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font: 600 12px var(--font-ui); }
html.ui2 .nd-tag button { width: 18px; height: 18px; border: none; background: none; color: var(--text-faint); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
html.ui2 .nd-tag button:hover { color: var(--rose); }
html.ui2 .nd-tagin { height: 26px; width: 110px; padding: 0 6px; border: none; background: transparent; color: var(--text); font: 500 12.5px var(--font-ui); }
html.ui2 .nd-tagin::placeholder { color: var(--text-faint); } html.ui2 .nd-tagin:focus { outline: none; }
html.ui2 .nd-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 4px; border: none; background: none; color: var(--text-faint); font: 500 13px var(--font-ui); cursor: pointer; opacity: .7; }
html.ui2 .nd-add kbd { font: 600 11px var(--font-mono); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); }
html.ui2 .nd-add:hover { opacity: 1; color: var(--text-dim); }
html.ui2 .nd-foot { display: flex; gap: 14px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--border-soft); color: var(--text-faint); font: 500 12px var(--font-ui); }
html.ui2 .nd-foot .ok { color: var(--teal); }

/* blocks */
html.ui2 .nb { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 2px 0; border-radius: 8px; }
html.ui2 .nb:focus { outline: 2px solid var(--ion); outline-offset: 2px; }
html.ui2 .nb-gut { position: absolute; left: -54px; top: 3px; display: flex; gap: 0; opacity: 0; transition: opacity 120ms linear; }
html.ui2 .nb:hover .nb-gut, html.ui2 .nb:focus-within .nb-gut { opacity: 1; }
html.ui2 .nb-gut button { width: 24px; height: 28px; border: none; background: none; border-radius: 6px; color: var(--text-faint); cursor: pointer; display: grid; place-items: center; }
html.ui2 .nb-grip { touch-action: none; cursor: grab; }
html.ui2 .nb.nb-lift { z-index: 5; background: var(--surface-2); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55), 0 0 0 1px var(--ion-line); opacity: .96; cursor: grabbing; pointer-events: none; }
html.ui2 .nb.nb-lift .nb-gut { opacity: 1; }
html.ui2 .nb.drop-before::before, html.ui2 .nb.drop-after::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--ion); box-shadow: 0 0 12px var(--ion-line); z-index: 4; }
html.ui2 .nb.drop-before::before { top: -3px; }
html.ui2 .nb.drop-after::after { bottom: -3px; }
html.ui2 .nb.nb-dropped { animation: nbDropped 520ms var(--ease-out); }
@keyframes nbDropped { from { background: var(--ion-dim); } to { background: transparent; } }
body.nb-dragging { user-select: none; cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { html.ui2 .nb.nb-dropped { animation: none; } }
html.ui2 .nb-gut button:hover { background: var(--surface-hover); color: var(--text); }
html.ui2 .nb-c { flex: 1; min-width: 0; font: 400 16.5px/1.7 var(--font-ui); color: var(--text); outline: none; overflow-wrap: anywhere; white-space: pre-wrap; padding: 1px 0; }
html.ui2 .nb-c:empty:focus::before, html.ui2 .nb:first-child .nb-c:empty::before { content: attr(data-ph); color: var(--text-faint); pointer-events: none; }
html.ui2 .nb-c b, html.ui2 .nb-c strong { font-weight: 700; }
html.ui2 .nb-c code { font: 500 .88em var(--font-mono); padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border-soft); }
html.ui2 .nb-c a { color: var(--ion); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ion-line); }
html.ui2 .nb-c .mention-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 7px; background: var(--blue-dim); color: var(--blue); font: 600 .88em var(--font-ui); cursor: pointer; white-space: nowrap; user-select: all; }
html.ui2 .nb-c .mention-chip[data-mention-kind="setup"] { background: var(--violet-dim); color: var(--violet); }
html.ui2 .nb-c .mention-chip[data-mention-kind="tag"] { background: var(--surface-2); color: var(--text-dim); }
html.ui2 .nb[data-type="heading1"] .nb-c { font: 700 30px/1.25 var(--font-display); letter-spacing: -.02em; margin-top: 18px; }
html.ui2 .nb[data-type="heading2"] .nb-c { font: 700 22.5px/1.3 var(--font-display); letter-spacing: -.015em; margin-top: 14px; }
html.ui2 .nb[data-type="heading3"] .nb-c { font: 650 18px/1.4 var(--font-display); margin-top: 8px; }
html.ui2 .nb-mark { flex: none; margin-top: 0; }
html.ui2 .nb-dot { width: 24px; height: 28px; position: relative; } html.ui2 .nb-dot::after { content: ''; position: absolute; left: 9px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
html.ui2 .nb-num { min-width: 24px; line-height: 28px; font: 600 15px var(--font-mono); color: var(--text-dim); text-align: right; }
html.ui2 .nb-box { width: 24px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; position: relative; font: 700 13px var(--font-ui); color: var(--teal); }
html.ui2 .nb-box::before { content: ''; position: absolute; left: 2px; top: 5px; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--text-faint); transition: background-color 120ms, border-color 120ms; }
html.ui2 .nb.is-done .nb-box::before { background: var(--teal-dim); border-color: var(--teal); }
html.ui2 .nb-box { display: grid; place-items: center; line-height: 1; } html.ui2 .nb-box { padding-top: 0; }
html.ui2 .nb.is-done .nb-c { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--text-faint); }
html.ui2 .nb[data-type="quote"] .nb-c { padding-left: 16px; border-left: 3px solid var(--ion); color: var(--text-dim); font-style: italic; font-size: 17.5px; }
html.ui2 .nb[data-type="callout"] { padding: 12px 14px; margin: 6px 0; background: var(--ion-dim); border: 1px solid var(--ion-line); border-radius: 12px; align-items: flex-start; --c: var(--ion); }
html.ui2 .nb[data-tone="warn"] { --c: var(--amber); background: var(--amber-dim); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
html.ui2 .nb[data-tone="rule"] { --c: var(--teal); background: var(--teal-dim); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
html.ui2 .nb-ico { width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--surface); font: 700 13px var(--font-ui); }
html.ui2 .nb[data-type="callout"] .nb-gut { left: -50px; top: 10px; }
html.ui2 .nb[data-type="divider"] hr { flex: 1; border: none; border-top: 1px solid var(--border); margin: 18px 0; }
html.ui2 .nb[data-type="image"] img { max-width: 100%; border-radius: 12px; border: 1px solid var(--border); display: block; margin: 8px 0; }
html.ui2 .nb[data-type="trade"], html.ui2 .nb[data-type="setup"] { padding: 4px 0; }
html.ui2 .nb-card { flex: 1; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; min-width: 0; }
html.ui2 .nb-card-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--blue-dim); color: var(--blue); flex: none; }
html.ui2 .nb[data-type="setup"] .nb-card-ico { background: var(--violet-dim); color: var(--violet); }
html.ui2 .nb-card > div { flex: 1; min-width: 0; } html.ui2 .nb-card b { display: block; font: 700 14.5px var(--font-display); } html.ui2 .nb-card b em { font: 700 10px var(--font-ui); font-style: normal; letter-spacing: .06em; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--surface); }
html.ui2 .nb-card b em.long { color: var(--teal); } html.ui2 .nb-card b em.short { color: var(--rose); }
html.ui2 .nb-card small { color: var(--text-faint); font-size: 12px; } html.ui2 .nb-card strong { font: 700 16px var(--font-mono); }
html.ui2 .nb-card-go { color: var(--ion); font: 600 12.5px var(--font-ui); opacity: 0; transition: opacity 140ms; }
@media (hover: hover) and (pointer: fine) { html.ui2 .nb-card:hover { border-color: var(--ion-line); } html.ui2 .nb-card:hover .nb-card-go { opacity: 1; } }

/* ---- empty document ---- */
html.ui2 .ns-blank { flex: 1; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
html.ui2 .ns-blank-in { max-width: 560px; text-align: center; }
html.ui2 .ns-blank h2 { display: block; font: 700 24px var(--font-display); margin: 0 0 8px; letter-spacing: -.02em; }
html.ui2 .ns-blank p { color: var(--text-dim); line-height: 1.6; margin: 0 0 22px; }
html.ui2 .ns-tpls { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; text-align: left; }
html.ui2 .ns-tpls-sm { grid-template-columns: 1fr; margin-top: 12px; }
html.ui2 .ns-tpl { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-family: var(--font-ui); text-align: left; transition: border-color 140ms, transform 140ms var(--ease-out); }
html.ui2 .ns-tpl b { font-size: 14px; } html.ui2 .ns-tpl span { color: var(--text-faint); font-size: 12.5px; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { html.ui2 .ns-tpl:hover { border-color: var(--ion-line); transform: translateY(-2px); } }

/* ---- popups ---- */
.np { position: fixed; z-index: 9600; display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .65); overflow: hidden; font-family: var(--font-ui); }
.np[hidden] { display: none; }
.np-search { margin: 8px 8px 0; height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 500 13.5px var(--font-ui); }
.np-search:focus-visible { outline: 2px solid var(--ion); outline-offset: 1px; }
.np-body { overflow-y: auto; padding: 6px; }
.np-group { padding: 8px 8px 4px; font: 700 10px var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.np-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--text); }
.np-item.hl { background: var(--ion-dim); }
.np-item.danger { color: var(--rose); }
.np-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--text-dim); font: 700 12px var(--font-ui); }
.np-lab { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-item small { color: var(--text-dim); font-size: 11.5px; white-space: nowrap; }
.np-empty { padding: 14px; color: var(--text-faint); font-size: 13px; text-align: center; }
.ns-sel { position: fixed; z-index: 9700; display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: #151b27; border: 1px solid rgba(148, 170, 210, .25); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.ns-sel[hidden] { display: none; }
.ns-sel button { min-width: 34px; height: 34px; border: none; border-radius: 8px; background: transparent; color: #e8edf6; font: 600 14px var(--font-ui); cursor: pointer; padding: 0 6px; }
.ns-sel button:hover { background: rgba(255, 255, 255, .1); }
.ns-sel code { font: 600 12px var(--font-mono); } .ns-hl { background: rgba(240, 180, 41, .5); padding: 0 4px; border-radius: 3px; }

/* ---- overlay (a note opened from a trade or a setup) ---- */
.ns-overlay { position: fixed; inset: 0; z-index: 8000; display: grid; place-items: center; visibility: hidden; pointer-events: none; }
.ns-overlay.open { visibility: visible; pointer-events: auto; }
.ns-obg { position: absolute; inset: 0; background: rgba(2, 5, 10, .6); opacity: 0; transition: opacity 200ms ease; }
.ns-overlay.open .ns-obg { opacity: 1; }
.ns-opanel { position: relative; display: flex; flex-direction: column; width: min(880px, 94vw); height: min(88vh, 940px); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .75); overflow: hidden; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity 200ms ease, transform 260ms cubic-bezier(.23, 1, .32, 1); }
.ns-overlay.open .ns-opanel { opacity: 1; transform: none; }

/* ---- fold down ---- */
@media (max-width: 1180px) {
  html.ui2 .ns { grid-template-columns: 330px minmax(0, 1fr); }
  html.ui2 .ns-rail { display: none; }
  html.ui2 .ns-chipsrow { display: flex; }
  html.ui2 .nb-gut { left: -4px; top: -22px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; z-index: 2; }
}
@media (max-width: 900px) {
  html.ui2 .ns { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--u2-top-h, 56px) - 150px); }
  html.ui2 .ns[data-mode="list"] .ns-doc, html.ui2 .ns[data-mode="edit"] .ns-list { display: none; }
  html.ui2 .nd-back { display: grid; }
  html.ui2 .ns-mnew { display: grid; }
  html.ui2 .nd-page { padding: 18px 16px 120px; }
  html.ui2 .nb-gut { display: none; }
  html.ui2 .nb[data-type="callout"] .nb-gut { display: none; }
  html.ui2 .nb-c { font-size: 16px; }
  html.ui2 .nb[data-type="heading1"] .nb-c { font-size: 25px; } html.ui2 .nb[data-type="heading2"] .nb-c { font-size: 20px; }
  .ns-opanel { width: 100vw; height: 100dvh; border-radius: 0; border: none; }
  html.ui2 .nd-add { padding: 12px 4px; }
}
@media (prefers-reduced-motion: reduce) { .ns-opanel, .ns-obg { transition: none; } html.ui2 .ns-item::before { transition: none; } }
html[data-motion="off"] .ns-opanel, html[data-motion="off"] .ns-obg { transition: none; }

html.ui2 .nb-c .mention-chip, html.ui2 .nb-card-ico { color: color-mix(in srgb, var(--blue) 45%, var(--text)); }
html.ui2 .nb-c .mention-chip[data-mention-kind="setup"], html.ui2 .nb[data-type="setup"] .nb-card-ico { color: color-mix(in srgb, var(--violet) 55%, var(--text)); }