/* notes.css */
.notes-hero { padding:2rem 0 1.5rem; background:linear-gradient(135deg,rgba(6,182,212,0.08),rgba(139,92,246,0.06)); border-bottom:1px solid var(--color-border-subtle); text-align:center; }
.notes-hero h1 { font-family:'Cabinet Grotesk',sans-serif; font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; background:linear-gradient(135deg,#06b6d4,#8b5cf6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin:0 0 0.4rem; }
.notes-hero p { color:var(--color-text-faint); font-size:0.9rem; }
.notes-layout { display:grid; grid-template-columns:280px 1fr; gap:1.5rem; padding:1.5rem 0 3rem; min-height:600px; }
.notes-sidebar { display:flex; flex-direction:column; gap:0.75rem; }
.notes-actions { display:flex; gap:0.5rem; }
.btn-new-note { flex:1; padding:0.55rem 0.9rem; border-radius:8px; border:none; background:linear-gradient(135deg,#fbbf24,#f97316); color:#000; font-weight:700; font-size:0.88rem; cursor:pointer; transition:all 0.2s; }
.btn-new-note:hover { opacity:0.9; transform:translateY(-1px); }
.notes-search-wrap { position:relative; }
.notes-search-wrap svg { position:absolute; left:0.75rem; top:50%; transform:translateY(-50%); color:var(--color-text-faint); pointer-events:none; }
#notes-search { width:100%; padding:0.5rem 0.75rem 0.5rem 2.2rem; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:8px; color:var(--color-text); font-size:0.85rem; box-sizing:border-box; }
#notes-search:focus { outline:none; border-color:rgba(251,191,36,0.5); }
.tag-filters { display:flex; flex-wrap:wrap; gap:0.35rem; }
.tag-filter-btn { padding:0.2rem 0.65rem; border-radius:4px; border:1px solid var(--glass-border); background:var(--glass-bg-light); color:var(--color-text-faint); font-size:0.75rem; font-weight:600; cursor:pointer; transition:all 0.2s; }
.tag-filter-btn.active { background:rgba(251,191,36,0.15); border-color:rgba(251,191,36,0.3); color:#fbbf24; }
.notes-list { display:flex; flex-direction:column; gap:0.4rem; overflow-y:auto; max-height:600px; }
.note-item { padding:0.85rem 1rem; background:var(--color-surface); border:1px solid var(--glass-border); border-radius:8px; cursor:pointer; transition:all 0.2s; }
.note-item:hover { border-color:rgba(251,191,36,0.3); background:var(--glass-bg); }
.note-item.active { border-color:rgba(251,191,36,0.5); background:rgba(251,191,36,0.06); }
.ni-title { font-weight:600; color:var(--color-text); font-size:0.88rem; margin-bottom:0.3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ni-preview { font-size:0.78rem; color:var(--color-text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:0.4rem; }
.ni-tags { display:flex; gap:0.3rem; flex-wrap:wrap; }
.ni-tag { padding:0.1rem 0.4rem; border-radius:3px; font-size:0.68rem; font-weight:600; background:rgba(251,191,36,0.1); color:#fbbf24; border:1px solid rgba(251,191,36,0.2); }
.ni-date { font-size:0.7rem; color:var(--color-text-faint); margin-top:0.3rem; }
.notes-empty { text-align:center; padding:2rem; color:var(--color-text-faint); font-size:0.9rem; }
.note-editor { display:flex; flex-direction:column; gap:0.75rem; }
.editor-toolbar { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.editor-toolbar input[type=text] { flex:1; padding:0.5rem 0.75rem; background:var(--glass-bg); border:1px solid var(--color-border); border-radius:6px; color:var(--color-text); font-size:0.95rem; font-weight:600; }
.editor-toolbar input:focus { outline:none; border-color:rgba(251,191,36,0.5); }
.tag-input { padding:0.4rem 0.7rem; background:var(--glass-bg-light); border:1px solid var(--color-border); border-radius:6px; color:var(--color-text-muted); font-size:0.82rem; width:160px; }
.btn-save-note { padding:0.5rem 1.1rem; border-radius:6px; border:none; background:rgba(34,197,94,0.2); border:1px solid rgba(34,197,94,0.35); color:#22c55e; font-weight:700; cursor:pointer; }
.btn-delete-note { padding:0.5rem 0.8rem; border-radius:6px; border:1px solid rgba(239,68,68,0.25); background:rgba(239,68,68,0.1); color:#f87171; font-weight:600; cursor:pointer; }
.note-textarea { flex:1; min-height:500px; padding:1rem; background:var(--color-surface); border:1px solid var(--glass-border); border-radius:10px; color:var(--color-text); font-family:'JetBrains Mono',monospace; font-size:0.88rem; line-height:1.8; resize:vertical; }
.note-textarea:focus { outline:none; border-color:rgba(251,191,36,0.4); }
.note-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:400px; color:var(--color-text-faint); text-align:center; gap:0.75rem; }
.note-placeholder-icon { font-size:3rem; opacity:0.5; }
@media(max-width:700px){.notes-layout{grid-template-columns:1fr}.notes-sidebar{position:static}.notes-list{max-height:280px}}

@media(max-width:500px){
  .notes-layout{grid-template-columns:1fr}
  .notes-sidebar{position:static}
  .notes-list{max-height:220px}
  .editor-toolbar{flex-direction:column;align-items:stretch}
  .editor-toolbar input[type=text]{width:100%}
  .tag-input{width:100%}
  .note-textarea{min-height:320px}
}

/* ─── Inline Delete Confirm ────────────────────────────────── */
.delete-confirm {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 1rem;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 8px;
  margin: 0 1rem 0.75rem;
  font-size: 0.85rem;
  color: #f87171;
}
.delete-confirm span { flex: 1; }
.dc-yes {
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  border: 1px solid rgba(239,68,68,0.5);
  background: rgba(239,68,68,0.15);
  color: #f87171;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.dc-yes:hover { background: rgba(239,68,68,0.3); }
.dc-no {
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--glass-bg-light);
  color: var(--color-text-faint);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.dc-no:hover { background: var(--color-border); color: var(--color-text); }

/* Delete button updated style */
.btn-delete-note {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
}