/* NotePod Colab CSS \u2014 v3.85.0 | Phase 3.84.1 */

/* \u2500\u2500 Colab bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
#np-colab-bar {
  /* Fix 3.84.2d2: fixed + full-width so body max-width doesn't hide it */
  position:fixed;top:0;left:0;right:0;width:100%;z-index:99999;
  display:flex;align-items:center;gap:10px;padding:5px 14px;
  background:#1a1a2e;color:#e0e0e0;
  font-family:system-ui,sans-serif;font-size:13px;
  border-bottom:2px solid #4a90d9;box-shadow:0 2px 8px rgba(0,0,0,.35);
  user-select:none;box-sizing:border-box;
}
.np-cb-brand  { font-weight:700;color:#7ecbff;letter-spacing:.4px; }
.np-cb-role   { background:#2d2d4e;border-radius:4px;padding:2px 8px;color:#aad4ff;font-size:11px; }
.np-cb-version{ color:#555;font-size:11px; }
.np-cb-spacer { flex:1; }
.np-cb-hint   { font-size:11px;color:#6ee7b7;opacity:.85; }
.np-cb-hint.np-cb-locked { color:#f87171; }
.np-cb-ccount { background:#2d2d4e;border-radius:10px;padding:2px 8px;
                 color:#93c5fd;font-size:11px;cursor:default; }
.np-cb-toggle {
  display:inline-flex;align-items:center;gap:4px;padding:3px 10px;
  font-size:11px;font-family:inherit;background:transparent;
  border:1px solid #3a3a5c;border-radius:4px;color:#9ca3af;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.np-cb-toggle:hover { background:#2d2d4e;color:#e0e0e0;border-color:#4a90d9; }
#np-colab-hidden-hint {
  position:fixed;bottom:16px;right:16px;z-index:9999;
  width:36px;height:36px;border-radius:50%;
  background:#1a1a2e;border:2px solid #4a90d9;color:#fff;font-size:16px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.4);transition:transform .15s;padding:0;
}
#np-colab-hidden-hint:hover { transform:scale(1.15); }

/* \u2500\u2500 Phase 2b: editable hover \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-editable-hover {
  background:rgba(74,144,217,.07)!important;cursor:text;
  border-radius:3px;transition:background .15s;position:relative;
  user-select:none;
}
.np-readonly-hover { cursor:not-allowed!important; }
.np-pencil {
  position:absolute;top:2px;right:4px;font-size:11px;
  opacity:.7;user-select:none;cursor:pointer;
  background:none;border:none;padding:0;line-height:1;
  transition:opacity .15s,transform .1s;
}
.np-pencil:hover { opacity:1; transform:scale(1.2); }

/* \u2500\u2500 Phase 2b: textarea editing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-edit-wrapper { margin:2px 0; }
.np-edit-ta {
  width:100%;box-sizing:border-box;padding:8px 10px;
  font-family:inherit;font-size:inherit;line-height:1.6;
  border:2px solid #4a90d9;border-radius:6px;
  background:#f0f7ff;color:#1e293b;resize:vertical;outline:none;
  min-height:60px;transition:border-color .15s,box-shadow .15s;
}
.np-edit-ta:focus { border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.2); }
.np-edit-bar { display:flex;align-items:center;gap:8px;padding:5px 2px 2px; }
.np-edit-save,.np-edit-cancel {
  padding:4px 14px;font-size:12px;font-family:inherit;
  border:none;border-radius:4px;cursor:pointer;font-weight:600;
}
.np-edit-save  { background:#16a34a;color:#fff; }
.np-edit-save:hover  { background:#15803d; }
.np-edit-cancel{ background:#6b7280;color:#fff; }
.np-edit-cancel:hover{ background:#4b5563; }
.np-edit-hint  { font-size:11px;color:#94a3b8;margin-left:4px; }
@keyframes np-flash-green {
  0%   { background:rgba(22,163,74,.25); }
  100% { background:transparent; }
}
@keyframes np-flash-red {
  0%,50% { background:rgba(239,68,68,.18); }
  100%   { background:transparent; }
}
.np-flash-saved  { animation:np-flash-green 1.2s ease-out forwards; }
.np-flash-locked { animation:np-flash-red    .8s ease-out forwards; }
.np-has-edit::after {
  content:" \u25CF";font-size:8px;color:#4a90d9;vertical-align:super;opacity:.6;
}

/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   Phase 3.84.1 \u2014 Comment System
\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */

/* \u2500\u2500 Comment badge button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-comment-btn {
  display:none;   /* shown on hover or when has comments */
  position:absolute;top:-1px;right:26px;
  align-items:center;gap:3px;
  padding:1px 7px;font-size:11px;font-family:inherit;
  background:#eff6ff;border:1px solid #93c5fd;
  border-radius:10px;color:#1d4ed8;cursor:pointer;
  white-space:nowrap;z-index:10;
  transition:background .15s;
}
.np-comment-btn:hover { background:#dbeafe; }

/* \u2500\u2500 Thread panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-comment-thread {
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;
  padding:12px 14px;margin:6px 0 10px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  font-family:system-ui,sans-serif;font-size:13px;
  animation:np-slide-in .15s ease-out;
}
@keyframes np-slide-in {
  from { opacity:0;transform:translateY(-4px); }
  to   { opacity:1;transform:translateY(0); }
}
.np-ct-header {
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;font-weight:600;color:#334155;font-size:12px;
}
.np-ct-close {
  background:none;border:none;cursor:pointer;font-size:14px;
  color:#94a3b8;padding:0 4px;line-height:1;
}
.np-ct-close:hover { color:#ef4444; }
.np-ct-empty { color:#94a3b8;font-size:12px;text-align:center;padding:8px 0; }
.np-ct-login-note { color:#94a3b8;font-size:12px;text-align:center;padding:8px 0; }

/* \u2500\u2500 Individual comment \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-comment-item {
  padding:8px 10px;border-radius:6px;margin-bottom:6px;
  background:#fff;border:1px solid #e9ecef;
}
.np-comment-item.np-c-pending { border-left:3px solid #f59e0b;background:#fffbeb; }
.np-c-meta {
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-bottom:4px;font-size:11px;
}
.np-c-author { font-weight:600;color:#334155; }
.np-c-time   { color:#94a3b8; }
.np-c-badge-pending {
  background:#fef3c7;color:#92400e;border:1px solid #fcd34d;
  border-radius:4px;padding:1px 5px;font-size:10px;
}
.np-c-approve,.np-c-resolve,.np-c-delete {
  background:none;border:1px solid;border-radius:3px;cursor:pointer;
  font-size:10px;padding:1px 5px;
}
.np-c-approve { border-color:#16a34a;color:#16a34a; }
.np-c-approve:hover { background:#dcfce7; }
.np-c-resolve { border-color:#4a90d9;color:#4a90d9; }
.np-c-resolve:hover { background:#dbeafe; }
.np-c-delete  { border-color:#ef4444;color:#ef4444; }
.np-c-delete:hover { background:#fee2e2; }
.np-c-text { color:#1e293b;line-height:1.5;white-space:pre-wrap; }

/* \u2500\u2500 Replies \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-c-replies { margin-left:16px;border-left:2px solid #e2e8f0;padding-left:10px;margin-top:6px; }
.np-c-reply-btn {
  background:none;border:none;color:#4a90d9;cursor:pointer;
  font-size:11px;padding:2px 0;margin-top:4px;
}
.np-c-reply-btn:hover { text-decoration:underline; }

/* \u2500\u2500 Comment input form \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-ct-form  { margin-top:8px; }
.np-ct-row   { display:flex;gap:6px;align-items:flex-end; }
.np-ct-input {
  flex:1;padding:7px 10px;font-size:12px;font-family:inherit;
  border:1px solid #cbd5e1;border-radius:6px;resize:none;
  outline:none;min-height:36px;line-height:1.5;
  transition:border-color .15s,box-shadow .15s;
}
.np-ct-input:focus { border-color:#4a90d9;box-shadow:0 0 0 2px rgba(74,144,217,.2); }
.np-ct-input.np-ct-error { border-color:#ef4444;animation:np-flash-red .5s; }
.np-ct-send {
  padding:7px 14px;background:#4a90d9;color:#fff;border:none;
  border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;
  white-space:nowrap;transition:background .15s;
}
.np-ct-send:hover { background:#2563eb; }

/* \u2500\u2500 Phase 3.84.2a stubs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */

/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   Phase 3.84.2a \u2014 Editorial Notes
   Visible ONLY to editor/author roles. CSS gate: .np-note-* hidden globally,
   shown only when canModerate() adds class 'np-editorial-active' to <body>.
\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */

/* \u2500\u2500 Note icon button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-note-btn {
  position:absolute; top:2px; left:-22px;
  background:none; border:none; cursor:pointer;
  font-size:13px; padding:0; line-height:1;
  transition:opacity .15s, transform .1s;
  opacity:0;   /* shown via JS when note exists or on hover */
}
.np-note-btn:hover { transform:scale(1.2); }

/* \u2500\u2500 Note type left-border colouring \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-note-type-needs-review {
  border-left:3px solid #ef4444 !important;
  background:rgba(239,68,68,.04) !important;
  padding-left:8px !important;
}
.np-note-type-suggestion {
  border-left:3px solid #d97706 !important;
  background:rgba(217,119,6,.04) !important;
  padding-left:8px !important;
}
.np-note-type-approved {
  border-left:3px solid #16a34a !important;
  background:rgba(22,163,74,.04) !important;
  padding-left:8px !important;
}
.np-note-type-flagged {
  border-left:3px solid #7c3aed !important;
  background:rgba(124,58,237,.04) !important;
  padding-left:8px !important;
}

/* \u2500\u2500 Note panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-note-panel {
  background:#fffbeb; border:1px solid #fcd34d;
  border-radius:8px; padding:12px 14px; margin:6px 0 10px;
  font-family:system-ui,sans-serif; font-size:13px;
  box-shadow:2px 2px 12px rgba(0,0,0,.1);
  animation:np-slide-in .15s ease-out;
}
.np-note-panel-hdr {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px; font-weight:600; color:#78350f; font-size:12px;
}
.np-note-close {
  background:none; border:none; cursor:pointer; font-size:14px;
  color:#b45309; padding:0 4px;
}
.np-note-close:hover { color:#92400e; }
.np-note-type-row { margin-bottom:8px; }
.np-note-type-sel {
  width:100%; padding:5px 8px; font-size:12px; font-family:inherit;
  border:1px solid #fcd34d; border-radius:4px; background:#fff;
  outline:none;
}
.np-note-ta {
  width:100%; box-sizing:border-box; padding:7px 10px;
  font-size:12px; font-family:inherit; line-height:1.5;
  border:1px solid #fcd34d; border-radius:5px;
  background:#fff; resize:vertical; outline:none; min-height:56px;
}
.np-note-ta:focus { border-color:#d97706; box-shadow:0 0 0 2px rgba(217,119,6,.2); }
.np-note-btn-row {
  display:flex; gap:8px; margin-top:8px; align-items:center;
}
.np-note-save {
  padding:4px 14px; background:#d97706; color:#fff;
  border:none; border-radius:4px; cursor:pointer;
  font-size:12px; font-weight:600; font-family:inherit;
}
.np-note-save:hover { background:#b45309; }
.np-note-del {
  padding:4px 12px; background:none; color:#ef4444;
  border:1px solid #fca5a5; border-radius:4px; cursor:pointer;
  font-size:12px; font-family:inherit;
}
.np-note-del:hover { background:#fee2e2; }
.np-note-meta {
  margin-top:6px; font-size:11px; color:#92400e; opacity:.75;
}

/* \u2500\u2500 Summary bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
#np-note-bar {
  /* Fix 3.84.2d2: fixed below colab bar */
  position:fixed;top:40px;left:0;right:0;width:100%;z-index:99998;
  display:none; align-items:center; flex-wrap:wrap; gap:8px;
  padding:5px 14px;
  background:#fef3c7; border-bottom:1px solid #fcd34d;
  font-family:system-ui,sans-serif; font-size:12px;
  user-select:none;box-sizing:border-box;
}
/* Floating login button (bottom-left, visible when bar hidden) */
#np-float-login {
  position:fixed;bottom:60px;left:16px;z-index:99999;
  min-width:36px;height:36px;border-radius:18px;
  background:#1a1a2e;border:2px solid #4a90d9;color:#7ecbff;
  font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  transition:transform .15s,box-shadow .15s;padding:0 10px;
  font-family:system-ui,sans-serif;
}
#np-float-login:hover {
  transform:scale(1.1);box-shadow:0 4px 16px rgba(74,144,217,.5);
}
.np-nb-label  { font-weight:600; color:#78350f; }
.np-nb-chip   { border-radius:10px; padding:2px 9px; font-size:11px; }
.np-nb-needs-review { background:#fee2e2; color:#b91c1c; }
.np-nb-suggestion   { background:#fef3c7; color:#92400e; }
.np-nb-flagged      { background:#ede9fe; color:#5b21b6; }
.np-nb-approved     { background:#dcfce7; color:#15803d; }
.np-nb-clear {
  margin-left:auto; background:none; border:1px solid #fcd34d;
  border-radius:4px; padding:2px 10px; font-size:11px;
  color:#92400e; cursor:pointer;
}
.np-nb-clear:hover { background:#fde68a; }

/* \u2500\u2500 Note stub (hidden \u2014 was display:none placeholder) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */

/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   Phase 3.84.2a \u2014 Editorial Notes
   Visible ONLY to editor/author roles. CSS gate: .np-note-* hidden globally,
   shown only when canModerate() adds class 'np-editorial-active' to <body>.
\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */

/* \u2500\u2500 Note icon button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-note-btn {
  position:absolute; top:2px; left:-22px;
  background:none; border:none; cursor:pointer;
  font-size:13px; padding:0; line-height:1;
  transition:opacity .15s, transform .1s;
  opacity:0;   /* shown via JS when note exists or on hover */
}
.np-note-btn:hover { transform:scale(1.2); }

/* \u2500\u2500 Note type left-border colouring \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-note-type-needs-review {
  border-left:3px solid #ef4444 !important;
  background:rgba(239,68,68,.04) !important;
  padding-left:8px !important;
}
.np-note-type-suggestion {
  border-left:3px solid #d97706 !important;
  background:rgba(217,119,6,.04) !important;
  padding-left:8px !important;
}
.np-note-type-approved {
  border-left:3px solid #16a34a !important;
  background:rgba(22,163,74,.04) !important;
  padding-left:8px !important;
}
.np-note-type-flagged {
  border-left:3px solid #7c3aed !important;
  background:rgba(124,58,237,.04) !important;
  padding-left:8px !important;
}

/* \u2500\u2500 Note panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-note-panel {
  background:#fffbeb; border:1px solid #fcd34d;
  border-radius:8px; padding:12px 14px; margin:6px 0 10px;
  font-family:system-ui,sans-serif; font-size:13px;
  box-shadow:2px 2px 12px rgba(0,0,0,.1);
  animation:np-slide-in .15s ease-out;
}
.np-note-panel-hdr {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px; font-weight:600; color:#78350f; font-size:12px;
}
.np-note-close {
  background:none; border:none; cursor:pointer; font-size:14px;
  color:#b45309; padding:0 4px;
}
.np-note-close:hover { color:#92400e; }
.np-note-type-row { margin-bottom:8px; }
.np-note-type-sel {
  width:100%; padding:5px 8px; font-size:12px; font-family:inherit;
  border:1px solid #fcd34d; border-radius:4px; background:#fff;
  outline:none;
}
.np-note-ta {
  width:100%; box-sizing:border-box; padding:7px 10px;
  font-size:12px; font-family:inherit; line-height:1.5;
  border:1px solid #fcd34d; border-radius:5px;
  background:#fff; resize:vertical; outline:none; min-height:56px;
}
.np-note-ta:focus { border-color:#d97706; box-shadow:0 0 0 2px rgba(217,119,6,.2); }
.np-note-btn-row {
  display:flex; gap:8px; margin-top:8px; align-items:center;
}
.np-note-save {
  padding:4px 14px; background:#d97706; color:#fff;
  border:none; border-radius:4px; cursor:pointer;
  font-size:12px; font-weight:600; font-family:inherit;
}
.np-note-save:hover { background:#b45309; }
.np-note-del {
  padding:4px 12px; background:none; color:#ef4444;
  border:1px solid #fca5a5; border-radius:4px; cursor:pointer;
  font-size:12px; font-family:inherit;
}
.np-note-del:hover { background:#fee2e2; }
.np-note-meta {
  margin-top:6px; font-size:11px; color:#92400e; opacity:.75;
}

/* \u2500\u2500 Summary bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
#np-note-bar {
  display:none; align-items:center; flex-wrap:wrap; gap:8px;
  padding:5px 14px;
  background:#fef3c7; border-bottom:1px solid #fcd34d;
  font-family:system-ui,sans-serif; font-size:12px;
  user-select:none;
}
.np-nb-label  { font-weight:600; color:#78350f; }
.np-nb-chip   { border-radius:10px; padding:2px 9px; font-size:11px; }
.np-nb-needs-review { background:#fee2e2; color:#b91c1c; }
.np-nb-suggestion   { background:#fef3c7; color:#92400e; }
.np-nb-flagged      { background:#ede9fe; color:#5b21b6; }
.np-nb-approved     { background:#dcfce7; color:#15803d; }
.np-nb-clear {
  margin-left:auto; background:none; border:1px solid #fcd34d;
  border-radius:4px; padding:2px 10px; font-size:11px;
  color:#92400e; cursor:pointer;
}
.np-nb-clear:hover { background:#fde68a; }

/* \u2500\u2500 Note stub (hidden \u2014 was display:none placeholder) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-note { display:none; }  /* superseded by .np-note-type-* classes */

/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   Phase 3.84.2c \u2014 Paragraph Widgets
\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */

/* \u2500\u2500 Widget icon button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-widget-btn {
  position:absolute; top:2px; right:52px;
  background:none; border:none; cursor:pointer;
  font-size:13px; padding:0; line-height:1; opacity:0;
  transition:opacity .15s, transform .1s;
}
.np-widget-btn:hover { transform:scale(1.2); }
.np-widget-btn-active { opacity:1 !important; }

/* \u2500\u2500 Widget panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-widget-panel {
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  padding:14px; margin:6px 0 12px;
  box-shadow:0 4px 18px rgba(0,0,0,.1);
  font-family:system-ui,sans-serif; font-size:13px;
  animation:np-slide-in .15s ease-out;
  min-width:340px; max-width:680px;
}
.np-wp-hdr {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; font-weight:700; color:#1e293b; font-size:13px;
}
.np-wp-close {
  background:none; border:none; cursor:pointer; font-size:14px;
  color:#94a3b8; padding:0 4px;
}
.np-wp-close:hover { color:#ef4444; }

/* \u2500\u2500 Type chooser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-widget-chooser { text-align:center; padding:8px 0; }
.np-wc-label { color:#64748b; font-size:12px; margin-bottom:12px; }
.np-wc-type {
  display:inline-flex; align-items:center; gap:6px;
  margin:0 6px; padding:10px 20px; font-size:13px; font-family:inherit;
  border:2px solid #e2e8f0; border-radius:8px; cursor:pointer;
  background:#f8fafc; transition:border-color .15s, background .15s;
}
.np-wc-type:hover { border-color:#4a90d9; background:#eff6ff; }

/* \u2500\u2500 Todo Widget \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-todo-wrap { overflow-x:auto; }
.np-todo-hdr, .np-todo-row {
  display:grid;
  grid-template-columns:120px 1fr 110px 100px 90px;
  gap:4px; align-items:center; padding:3px 2px;
}
.np-todo-hdr {
  font-size:11px; font-weight:600; color:#64748b;
  border-bottom:2px solid #e2e8f0; padding-bottom:6px; margin-bottom:2px;
}
.np-todo-row { border-bottom:1px solid #f1f5f9; padding:4px 2px; }
.np-todo-row:last-of-type { border-bottom:none; }
.np-todo-done .np-td-task { text-decoration:line-through; color:#94a3b8; }
.np-td-input {
  width:100%; box-sizing:border-box; padding:3px 6px; font-size:12px;
  font-family:inherit; border:1px solid #e2e8f0; border-radius:4px;
  background:#fafafa; outline:none;
}
.np-td-input:focus { border-color:#4a90d9; background:#fff; }
.np-td-act { display:flex; gap:3px; }
.np-td-btn {
  padding:2px 6px; font-size:12px; font-family:inherit;
  border:1px solid #e2e8f0; border-radius:3px;
  background:#f8fafc; cursor:pointer; line-height:1;
}
.np-td-btn:hover { background:#e2e8f0; }
.np-td-del:hover { background:#fee2e2; border-color:#fca5a5; color:#dc2626; }
.np-todo-foot {
  display:flex; gap:8px; margin-top:10px; padding-top:8px;
  border-top:1px solid #e2e8f0; flex-wrap:wrap;
}
.np-tw-btn {
  padding:5px 14px; font-size:12px; font-family:inherit;
  border-radius:5px; cursor:pointer; font-weight:600; border:none;
}
.np-tw-add  { background:#eff6ff; color:#1d4ed8; border:1px solid #93c5fd; }
.np-tw-add:hover  { background:#dbeafe; }
.np-tw-save { background:#16a34a; color:#fff; }
.np-tw-save:hover { background:#15803d; }
.np-tw-del  { background:none; color:#ef4444; border:1px solid #fca5a5; }
.np-tw-del:hover  { background:#fee2e2; }

/* \u2500\u2500 Calendar Widget \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-cal-wrap { min-width:280px; }
.np-cal-title-row { margin-bottom:8px; }
.np-cal-title-in {
  width:100%; box-sizing:border-box; padding:6px 10px;
  font-size:13px; font-family:inherit;
  border:1px solid #e2e8f0; border-radius:6px; outline:none;
}
.np-cal-title-in:focus { border-color:#4a90d9; }
.np-cal-title-lbl { font-weight:600; color:#1e293b; margin-bottom:8px; font-size:14px; }
.np-cal-mode-row { display:flex; gap:8px; margin-bottom:10px; }
.np-cal-mode-btn {
  flex:1; padding:5px 0; font-size:12px; font-family:inherit;
  border:1px solid #e2e8f0; border-radius:5px; cursor:pointer; background:#f8fafc;
}
.np-cal-mode-active { background:#eff6ff; border-color:#4a90d9; color:#1d4ed8; font-weight:600; }
.np-cal-box { background:#f8fafc; border-radius:8px; padding:10px; }
.np-cal-nav {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.np-cal-nav-btn {
  background:none; border:1px solid #e2e8f0; border-radius:4px;
  padding:2px 10px; font-size:16px; cursor:pointer; line-height:1;
}
.np-cal-nav-btn:hover { background:#e2e8f0; }
.np-cal-month-lbl { font-weight:600; color:#334155; font-size:13px; }
.np-cal-week-hdr, .np-cal-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
}
.np-cal-week-hdr { margin-bottom:4px; }
.np-cal-week-hdr span {
  text-align:center; font-size:10px; font-weight:600; color:#94a3b8;
}
.np-cal-day, .np-cal-empty {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:12px; border-radius:50%; border:none; background:none;
  cursor:pointer; transition:background .1s;
}
.np-cal-day:hover { background:#e2e8f0; }
.np-cal-today { font-weight:700; color:#4a90d9; }
.np-cal-selected { background:#4a90d9 !important; color:#fff; border-radius:50%; }
.np-cal-in-range { background:#dbeafe; border-radius:0; }
.np-cal-range-start { background:#4a90d9 !important; color:#fff;
  border-radius:50% 0 0 50%; }
.np-cal-range-end   { background:#4a90d9 !important; color:#fff;
  border-radius:0 50% 50% 0; }
.np-cal-sel-disp { text-align:center; font-size:12px; color:#475569;
  margin-top:8px; min-height:18px; }
.np-cal-foot { display:flex; gap:8px; margin-top:10px;
  padding-top:8px; border-top:1px solid #e2e8f0; }

/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   Phase 3.84.2d \u2014 Login UI
\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */

/* \u2500\u2500 Login button in colab bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-login-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 12px; font-size:12px; font-family:inherit;
  border:1px solid #4a90d9; border-radius:4px;
  color:#4a90d9; background:transparent; cursor:pointer;
  transition:background .15s, color .15s;
  white-space:nowrap;
}
.np-login-btn:hover { background:#4a90d9; color:#fff; }
.np-login-btn.np-logged-in {
  border-color:#6ee7b7; color:#6ee7b7;
}
.np-login-btn.np-logged-in:hover { background:#065f46; color:#fff; border-color:#065f46; }

/* \u2500\u2500 Login panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
#np-login-panel {
  position:fixed; z-index:99999;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  padding:16px; min-width:300px; max-width:360px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  font-family:system-ui,sans-serif; font-size:13px;
  animation:np-slide-in .15s ease-out;
}
.np-lp-hdr {
  display:flex; align-items:center; gap:8px;
  margin-bottom:12px; font-weight:700; color:#1e293b;
}
.np-lp-hdr button.np-lp-close {
  margin-left:auto; background:none; border:none; cursor:pointer;
  font-size:14px; color:#94a3b8; padding:0 4px;
}
.np-lp-hdr button.np-lp-close:hover { color:#ef4444; }
.np-demo-badge {
  font-size:10px; background:#fef3c7; color:#92400e;
  border:1px solid #fcd34d; border-radius:4px; padding:1px 6px;
}
.np-lp-hint { font-size:12px; color:#64748b; margin-bottom:10px; }

/* \u2500\u2500 Role cards (demo picker) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-role-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px;
}
.np-role-card {
  display:flex; flex-direction:column; align-items:center;
  padding:10px 8px; border:2px solid transparent; border-radius:8px;
  cursor:pointer; transition:border-color .15s, transform .1s;
  font-family:inherit; position:relative;
}
.np-role-card:hover { transform:scale(1.03); border-color:currentColor; }
.np-role-active { border-color:currentColor !important; }
.np-rc-icon  { font-size:22px; margin-bottom:4px; line-height:1; }
.np-rc-label { font-size:12px; font-weight:600; }
.np-rc-cur {
  position:absolute; top:4px; right:6px; font-size:9px;
  background:#4a90d9; color:#fff; border-radius:3px; padding:1px 4px;
}
.np-lp-logout {
  width:100%; padding:7px; font-size:12px; font-family:inherit;
  border:1px solid #e2e8f0; border-radius:6px; cursor:pointer;
  color:#ef4444; background:#fff; margin-top:4px;
}
.np-lp-logout:hover { background:#fee2e2; border-color:#fca5a5; }
.np-lp-demo-link {
  width:100%; padding:6px; font-size:12px; font-family:inherit;
  border:none; border-radius:6px; cursor:pointer; color:#64748b;
  background:#f8fafc; margin-top:6px;
}
.np-lp-demo-link:hover { background:#e2e8f0; }

/* \u2500\u2500 Email/password form \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-login-form { display:flex; flex-direction:column; gap:6px; }
.np-lf-label { font-size:11px; font-weight:600; color:#475569; }
.np-lf-input {
  padding:8px 10px; font-size:13px; font-family:inherit;
  border:1px solid #cbd5e1; border-radius:6px; outline:none; width:100%;
  box-sizing:border-box;
}
.np-lf-input:focus { border-color:#4a90d9; box-shadow:0 0 0 2px rgba(74,144,217,.2); }
.np-lf-pw-wrap { position:relative; }
.np-lf-pw-wrap .np-lf-input { padding-right:36px; }
.np-lf-eye {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:14px; padding:0;
}
.np-login-error {
  background:#fee2e2; color:#b91c1c; border-radius:5px;
  padding:6px 10px; font-size:12px;
}
.np-lf-submit {
  padding:9px; background:#4a90d9; color:#fff; border:none;
  border-radius:6px; cursor:pointer; font-size:13px; font-weight:600;
  font-family:inherit; transition:background .15s;
}
.np-lf-submit:hover { background:#2563eb; }
.np-lf-submit:disabled { background:#94a3b8; cursor:not-allowed; }
.np-lf-forgot { font-size:11px; color:#4a90d9; text-align:center; text-decoration:none; }
.np-lf-forgot:hover { text-decoration:underline; }
.np-lf-sep { border:none; border-top:1px solid #e2e8f0; margin:4px 0; }

/* \u2500\u2500 Logged-in user info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-lp-user-info {
  display:flex; align-items:center; gap:12px;
  padding:10px; background:#f8fafc; border-radius:8px; margin-bottom:10px;
}
.np-lp-avatar { font-size:28px; line-height:1; }
.np-lp-uname { font-weight:700; color:#1e293b; font-size:14px; }
.np-lp-urole { font-size:12px; font-weight:600; }

/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
   3.84.2d7 \u2014 Icon polish, spacing, fill rings, expand cards
\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */

/* \u2500\u2500 Expand toggle button in bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-cb-expand {
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;font-size:11px;font-family:inherit;
  background:transparent;border:1px solid #3a3a5c;
  border-radius:4px;color:#9ca3af;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.np-cb-expand:hover { background:#2d2d4e;color:#e0e0e0;border-color:#4a90d9; }
.np-cb-expand.np-expand-active {
  background:#2d2d4e;color:#7ecbff;border-color:#4a90d9;font-weight:600;
}

/* \u2500\u2500 Filled-component ring indicator (.np-filled) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
/* Applied to icon buttons when they have data */
.np-comment-btn.np-filled {
  box-shadow:0 0 0 2px #3b82f6;
  background:#dbeafe !important;
  color:#1d4ed8 !important;
  display:inline-flex !important;   /* always visible when filled */
}
.np-widget-btn.np-filled {
  box-shadow:0 0 0 2px #059669;
  background:#d1fae5 !important;
  opacity:1 !important;
}
.np-widget-btn.np-filled-cal {
  box-shadow:0 0 0 2px #0369a1;
  background:#e0f2fe !important;
  opacity:1 !important;
}
.np-note-btn.np-filled {
  opacity:1 !important;
  box-shadow:0 0 0 2px currentColor;
  border-radius:4px;
}

/* \u2500\u2500 Icon spacing (right side, 30px apart) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-pencil {
  position:absolute;top:2px;right:4px;
  width:24px;height:24px;
  background:none;border:none;cursor:pointer;
  font-size:13px;padding:0;line-height:1;
  opacity:.7;user-select:none;
  transition:opacity .15s,transform .1s;
  display:flex;align-items:center;justify-content:center;
}
.np-pencil:hover { opacity:1;transform:scale(1.2); }

.np-comment-btn {
  position:absolute;top:0px;right:34px;
  width:26px;height:22px;
  align-items:center;gap:3px;
  padding:1px 5px;font-size:11px;font-family:inherit;
  background:#eff6ff;border:1px solid #93c5fd;
  border-radius:10px;color:#1d4ed8;cursor:pointer;
  white-space:nowrap;z-index:10;
  transition:background .15s;
}
.np-comment-btn:hover { background:#dbeafe; }

.np-widget-btn {
  position:absolute;top:2px;right:68px;
  width:24px;height:24px;
  background:none;border:none;cursor:pointer;
  font-size:14px;padding:0;line-height:1;
  transition:opacity .15s,transform .1s;
  display:flex;align-items:center;justify-content:center;
}
.np-widget-btn:hover { transform:scale(1.15); }
.np-widget-btn-active { opacity:1 !important; }

.np-note-btn {
  position:absolute;top:2px;left:-28px;
  background:none;border:none;cursor:pointer;
  font-size:13px;padding:0;line-height:1;
  transition:opacity .15s,transform .1s;
}
.np-note-btn:hover { transform:scale(1.2); }

/* \u2500\u2500 Expand summary cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.np-expand-card {
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:5px 10px 5px 6px;
  margin:-2px 0 4px 0;
  border-left:3px solid #4a90d9;
  background:#f0f7ff;
  border-radius:0 4px 4px 0;
  font-family:system-ui,sans-serif;
  animation:np-slide-in .12s ease-out;
}
.np-ec-tag {
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;padding:2px 8px;border-radius:10px;
  border:1px solid currentColor;
}
.np-ec-comment { color:#1d4ed8;background:#eff6ff;border-color:#93c5fd; }
.np-ec-todo    { color:#065f46;background:#d1fae5;border-color:#6ee7b7; }
.np-ec-cal     { color:#0369a1;background:#e0f2fe;border-color:#7dd3fc; }
.np-ec-note    { background:#fff; }
.np-dirty-badge { display:none; }