:root { --na: var(--app-accent, #f59e0b); }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: #1f2937; background: #faf9f7; }
.nb-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #efece5; position: sticky; top: 0; z-index: 10; }
.nb-bar img { width: 26px; height: 26px; }
.nb-bar .name { font-weight: 700; }
.nb-bar .sp { flex: 1; }
.nb-search { flex: 1; max-width: 480px; padding: 9px 14px; border: 1px solid #e6e2d8; border-radius: 10px; font-size: 14px; background: #f6f4ef; }
.nb-search:focus { outline: none; background: #fff; border-color: var(--na); }
.nb-tabs { display: flex; gap: 4px; padding: 10px 16px 0; }
.nb-tabs button { border: 0; background: none; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; color: #6b7280; }
.nb-tabs button.on { background: #fff; color: var(--na); box-shadow: 0 1px 3px rgba(60,50,10,.10); }
.wrap { max-width: 1080px; margin: 14px auto 80px; padding: 0 16px; }
/* capture box */
.capture { max-width: 560px; margin: 6px auto 22px; background: #fff; border: 1px solid #e6e2d8; border-radius: 12px; box-shadow: 0 1px 4px rgba(60,50,10,.06); padding: 10px 14px; }
.capture input, .capture textarea { width: 100%; border: 0; font-size: 14.5px; font-family: inherit; resize: none; background: none; }
.capture input { font-weight: 600; }
.capture input:focus, .capture textarea:focus { outline: none; }
.capture .row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cap-btn { border: 0; background: var(--na); color: #fff; font-weight: 600; border-radius: 8px; padding: 7px 14px; cursor: pointer; }
.icon-b { border: 0; background: none; cursor: pointer; font-size: 16px; color: #8a8577; padding: 5px 8px; border-radius: 6px; }
.icon-b:hover { background: #f3f0e8; color: #4b4636; }
/* masonry grid */
.grid { column-count: 4; column-gap: 14px; }
@media (max-width: 1000px) { .grid { column-count: 3; } }
@media (max-width: 760px) { .grid { column-count: 2; } }
@media (max-width: 500px) { .grid { column-count: 1; } }
.note { break-inside: avoid; background: #fff; border: 1px solid #e9e5da; border-radius: 12px; padding: 13px 14px 8px; margin: 0 0 14px; position: relative; transition: box-shadow .12s ease; }
.note:hover { box-shadow: 0 6px 18px rgba(60,50,10,.12); }
.note .t { font-weight: 650; font-size: 14.5px; margin-bottom: 5px; word-break: break-word; }
.note .b { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: #374151; }
.note .pin { position: absolute; top: 8px; right: 8px; opacity: 0; }
.note:hover .pin, .note .pin.on { opacity: 1; }
.note .tools { display: flex; gap: 2px; margin-top: 8px; opacity: 0; }
.note:hover .tools { opacity: 1; }
.note .chk { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; font-size: 13.5px; }
.note .chk input { margin-top: 3px; accent-color: var(--na); }
.note .chk.done span { text-decoration: line-through; color: #9ca3af; }
.labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; background: rgba(0,0,0,.06); color: #4b4636; padding: 2px 9px; border-radius: 20px; }
.lbl-x { border: 0; background: none; cursor: pointer; color: #8a8577; font-size: 13px; padding: 0; line-height: 1; }
.lbl-filter { display: flex; flex-wrap: wrap; gap: 6px; max-width: 1080px; margin: 8px auto 0; padding: 0 16px; }
.lchip { border: 1px solid #e6e2d8; background: #fff; color: #6b5f4a; border-radius: 20px; padding: 4px 12px; cursor: pointer; font-size: 12.5px; }
.lchip.on { background: var(--na); color: #fff; border-color: var(--na); }
.ed-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ed-lbl-in { border: 0; background: rgba(0,0,0,.04); border-radius: 20px; padding: 4px 12px; font-size: 12.5px; font-family: inherit; width: 100px; }
.ed-lbl-in:focus { outline: none; background: rgba(0,0,0,.08); }
.swatches { display: none; gap: 6px; position: absolute; bottom: 40px; left: 10px; background: #fff; border: 1px solid #e6e2d8; border-radius: 20px; padding: 6px 10px; box-shadow: 0 8px 20px rgba(60,50,10,.16); z-index: 5; }
.swatches.open { display: flex; }
.sw { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); cursor: pointer; padding: 0; }
.empty { text-align: center; color: #a39d8d; padding: 60px 20px; }
.empty .big { font-size: 42px; }
.sec-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #a39d8d; text-transform: uppercase; margin: 4px 2px 10px; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; z-index: 999; }
/* edit dialog */
.dlg-back { position: fixed; inset: 0; background: rgba(30,25,10,.35); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.dlg { width: min(560px, 92vw); background: #fff; border-radius: 14px; box-shadow: 0 30px 70px rgba(30,25,10,.3); padding: 16px 18px 12px; }
.dlg input.dt { width: 100%; border: 0; font-size: 17px; font-weight: 650; font-family: inherit; }
.dlg textarea.db { width: 100%; border: 0; font-size: 14.5px; font-family: inherit; min-height: 140px; resize: vertical; margin-top: 8px; line-height: 1.55; }
.dlg input:focus, .dlg textarea:focus { outline: none; }
.dlg .foot { display: flex; align-items: center; gap: 4px; margin-top: 8px; }