.labs-notes[hidden] { display: none !important; }
.labs-notes { width: 100%; padding: 2px 0 72px; color: #252522; }
.labs-notes-toolbar { min-height: 42px; margin: -4px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.labs-notes-filters { min-width: 0; min-height: 34px; display: flex; align-items: center; gap: 3px; }
.labs-notes-filters button { min-height: 32px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: #77746f; font: 500 11.5px/1 Inter, sans-serif; cursor: pointer; transition: color 140ms ease, background 140ms ease; }
.labs-notes-filters button:hover { background: #f3f3f0; color: #292926; }
.labs-notes-filters button.is-active { background: #ededeb; color: #20201e; }
.labs-notes-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.labs-notes-search { width: 220px; height: 34px; border: 1px solid #deded9; border-radius: 8px; overflow: hidden; display: flex; align-items: center; background: #fff; color: #777771; transition: width 180ms ease, border-color 140ms ease; }
.labs-notes-search.is-collapsed { width: 34px; border-color: transparent; }
.labs-notes-search:focus-within { border-color: #bfbfb8; box-shadow: 0 0 0 3px rgba(28,28,25,.035); }
.labs-notes-search button { width: 32px; height: 32px; padding: 0; border: 0; display: grid; flex: 0 0 auto; place-items: center; background: transparent; color: inherit; cursor: pointer; }
.labs-notes-search button:hover { background: #f2f2ef; color: #292926; }
.labs-notes-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; }
.labs-notes-search input { width: 180px; min-width: 0; padding: 0 9px 0 2px; border: 0; outline: 0; background: transparent; color: #292926; font: 500 9.5px/1 Inter, sans-serif; }
.labs-notes-search input::placeholder { color: #a3a39d; }
.labs-notes-new { height: 34px; padding: 0 12px; border: 1px solid #deded9; border-radius: 8px; background: #fff; color: #292926; font: 500 9.5px/1 Inter, sans-serif; cursor: pointer; }
.labs-notes-new:hover { border-color: #c8c8c2; background: #f7f7f5; }
.labs-notes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-items: start; gap: 18px 14px; }
.labs-note { min-width: 0; position: relative; }
.labs-note-card { position: relative; }
.labs-note-summary { width: 100%; min-height: 124px; padding: 15px 16px 14px; border: 1px solid rgba(32,32,30,.1); border-radius: 8px; display: flex; align-items: flex-start; flex-direction: column; background: #f8f8f8; color: #292926; text-align: left; text-decoration: none; cursor: pointer; transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease; }
.labs-note.is-empty-card .labs-note-summary { border: 2px solid #d8d8d8; background: #fff; }
.labs-note.is-archived .labs-note-summary { background: #fffeda; color: #66665f; }
.labs-note-summary:hover, .labs-note-summary:focus-visible { border-color: rgba(32,32,30,.3); box-shadow: 0 5px 13px rgba(25,25,22,.035); transform: translateY(-1px); outline: 0; }
.labs-note-summary strong { width: 100%; overflow: hidden; color: inherit; font: 600 14px/1.22 Inter, sans-serif; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.labs-note-summary p { width: 100%; min-height: 2.75em; margin: 10px 0 12px; overflow: hidden; display: -webkit-box; color: #393936; font: 500 10px/1.38 "Intel One Mono", monospace; letter-spacing: .005em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.labs-note.is-empty-card .labs-note-summary p { color: #a0a09a; }
.labs-note-summary time { margin-top: auto; color: #555550; font: 500 9.5px/1 Inter, sans-serif; }
.labs-note-favorite { position: absolute; z-index: 3; top: -9px; right: -7px; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; opacity: 0; pointer-events: none; cursor: pointer; transition: opacity 130ms ease, transform 130ms ease; }
.labs-note-card:hover .labs-note-favorite, .labs-note-favorite:focus-visible, .labs-note-favorite.is-favorite { opacity: 1; pointer-events: auto; }
.labs-note-favorite:hover { transform: scale(1.025); }
.labs-note-favorite:focus-visible { border-radius: 50%; outline: 2px solid #8cb9ff; outline-offset: 2px; }
.labs-note-favorite img { width: 100%; height: 100%; display: block; object-fit: contain; }
.labs-note-card-archive { position: absolute; z-index: 3; right: 9px; bottom: 8px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,.74); color: #777771; opacity: 0; pointer-events: none; cursor: pointer; transition: opacity 130ms ease, color 130ms ease, background 130ms ease; }
.labs-note-card:hover .labs-note-card-archive, .labs-note-card-archive:focus-visible { opacity: 1; pointer-events: auto; }
.labs-note-card-archive:hover { background: #ececea; color: #242421; }
.labs-note-card-archive:focus-visible { outline: 2px solid #8cb9ff; outline-offset: 1px; }
.labs-note-card-archive svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.labs-note.is-open { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); align-items: start; gap: 28px; padding: 8px 0 22px; }
.labs-note.is-open .labs-note-card { position: sticky; top: 92px; }
.labs-note-panel { position: relative; min-height: 390px; padding: 4px clamp(22px, 3vw, 46px) 30px; border-left: 1px solid #e6e6e1; }
.labs-note-panel[hidden] { display: none !important; }
.labs-note-title-edit { width: 100%; margin: 0 0 15px; padding: 0 0 7px; border: 0; border-bottom: 1px solid transparent; outline: 0; background: transparent; color: #252522; font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.02em; }
.labs-note-title-edit:focus { border-color: #deded9; }
.labs-note-blocks { min-height: 280px; padding: 6px 0 22px; display: grid; align-content: start; gap: 11px; }
.labs-note-block { position: relative; padding-left: 13px; }
.labs-note-block::before { content: ""; position: absolute; top: 8px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #c6c6c0; opacity: 0; }
.labs-note-block:hover::before { opacity: 1; }
.labs-note-block-remove { position: absolute; top: 0; right: -25px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; display: grid; place-items: center; background: transparent; color: #a0a09a; font: inherit; font-size: 15px; line-height: 1; opacity: 0; cursor: pointer; }
.labs-note-block:hover .labs-note-block-remove,
.labs-note-block-remove:focus-visible { opacity: 1; }
.labs-note-block-remove:hover { background: #f0f0ed; color: #3d3d39; }
.labs-note-block [contenteditable="true"] { outline: 0; }
.labs-note-paragraph { min-height: 20px; color: #53534e; font-size: 10.5px; font-weight: 500; line-height: 1.65; }
.labs-note-heading { min-height: 24px; color: #2e2e2a; font-size: 12px; font-weight: 600; line-height: 1.45; }
.labs-note-quote { padding: 6px 10px; border-left: 2px solid #c8a768; color: #666660; font-size: 10.5px; font-weight: 500; font-style: italic; line-height: 1.55; }
.labs-note-list-block { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 5px; color: #53534e; font-size: 10.5px; font-weight: 500; line-height: 1.6; }
.labs-note-list-block::before { content: "•"; color: #8e8e88; }
.labs-note-check { display: flex; align-items: flex-start; gap: 8px; color: #53534e; font-size: 10.5px; font-weight: 500; line-height: 1.55; }
.labs-note-check input { width: 14px; height: 14px; margin: 2px 0 0; accent-color: #282825; }
.labs-note-check span { min-width: 0; flex: 1; outline: 0; }
.labs-note-check input:checked + span { color: #92928c; text-decoration: line-through; }
.labs-note-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; color: #4d4d48; font-size: 9.5px; font-weight: 500; }
.labs-note-table td { min-width: 90px; padding: 8px 9px; border-right: 1px solid #e3e3de; border-bottom: 1px solid #e3e3de; outline: 0; background: #fff; }
.labs-note-table tr:first-child td { border-top: 1px solid #e3e3de; background: #f5f5f2; color: #363632; }
.labs-note-table td:first-child { border-left: 1px solid #e3e3de; }
.labs-note-table tr:first-child td:first-child { border-top-left-radius: 7px; }
.labs-note-table tr:first-child td:last-child { border-top-right-radius: 7px; }
.labs-note-table tr:last-child td:first-child { border-bottom-left-radius: 7px; }
.labs-note-table tr:last-child td:last-child { border-bottom-right-radius: 7px; }
.labs-note-image { display: grid; gap: 7px; }
.labs-note-image img { max-width: min(720px, 100%); max-height: 420px; border: 1px solid #e1e1dc; border-radius: 9px; display: block; object-fit: cover; }
.labs-note-image input { width: 100%; height: 30px; padding: 0 9px; border: 1px solid #e1e1dc; border-radius: 7px; outline: 0; color: #555550; font: inherit; font-size: 9px; font-weight: 500; }
.labs-note-image input:focus { border-color: #bdbdb7; }
.labs-note-footer { position: relative; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ecece8; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.labs-note-add { height: 30px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: #686862; font: inherit; font-size: 9px; font-weight: 500; cursor: pointer; }
.labs-note-add:hover { background: #f1f1ee; color: #252522; }
.labs-note-add:disabled { color: #b0b0aa; cursor: default; }
.labs-note-footer-meta { display: flex; align-items: center; gap: 10px; }
.labs-note-counter { color: #a0a09a; font-size: 8px; font-weight: 500; }
.labs-note-archive { height: 30px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: #7c7c76; font: 500 8.5px/1 Inter, sans-serif; cursor: pointer; }
.labs-note-archive:hover { background: #f1f1ee; color: #252522; }
.labs-note-block-menu { position: fixed; z-index: 40; width: 220px; padding: 6px; border: 1px solid #deded9; border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #fff; box-shadow: 0 14px 32px rgba(30,30,27,.12); }
.labs-note-block-menu[hidden] { display: none !important; }
.labs-note-block-menu button { height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #555550; font: inherit; font-size: 9px; font-weight: 500; text-align: left; cursor: pointer; }
.labs-note-block-menu button:hover { background: #f1f1ee; color: #22221f; }
.labs-notes-empty { min-height: 180px; display: grid; place-content: center; gap: 5px; color: #8e8e88; text-align: center; }
.labs-notes-empty[hidden] { display: none !important; }
.labs-notes-empty strong { color: #555550; font-size: 11px; font-weight: 500; }
.labs-notes-empty small { font-size: 9px; font-weight: 500; }
@media (max-width: 900px) {
  .labs-note.is-open { grid-template-columns: minmax(190px, 225px) minmax(0, 1fr); gap: 20px; }
  .labs-note-panel { padding-right: 18px; padding-left: 28px; }
}
@media (max-width: 720px) {
  .labs-notes-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .labs-notes-filters { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .labs-notes-filters button { flex: 0 0 auto; }
  .labs-notes-actions { justify-content: flex-end; }
  .labs-notes-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .labs-note.is-open { display: block; padding-top: 0; }
  .labs-note.is-open .labs-note-card { position: relative; top: auto; max-width: 280px; }
  .labs-note-panel { min-height: 330px; margin-top: 22px; padding: 22px 16px 28px; border-top: 1px solid #e6e6e1; border-left: 0; }
  .labs-note-blocks { min-height: 230px; }
}
@media (max-width: 480px) {
  .labs-notes-list { grid-template-columns: 1fr; }
  .labs-note-summary { min-height: 120px; }
  .labs-note.is-open .labs-note-card { max-width: none; }
  .labs-note-footer { align-items: flex-start; }
  .labs-note-footer-meta { align-items: flex-end; flex-direction: column; gap: 2px; }
}