html.page-animated-notes { color-scheme: dark; }
.page-animated-notes body { min-height: 100vh; }
.notes-app { width: min(1500px, 100%); min-height: 100vh; margin: 0 auto; padding: 24px; }
.notes-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; padding: 22px 24px; border: var(--border); border-radius: 24px; background: linear-gradient(125deg, rgba(255,69,189,.92), rgba(155,92,255,.72) 55%, rgba(110,231,255,.68)); box-shadow: var(--shadow); }
.notes-header h1 { margin: 0; font-size: clamp(2.7rem, 6vw, 5.6rem); }
.notes-header h1 span { color: var(--electric-lime); }
.eyebrow, .section-label { margin: 0 0 8px; color: var(--ink); font: 900 .74rem/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.workspace { display: grid; grid-template-columns: minmax(270px, 360px) minmax(0, 1fr); gap: 20px; min-height: calc(100vh - 235px); }
.notes-sidebar, .editor-panel { min-height: 600px; border: var(--border); border-radius: 22px; background: linear-gradient(180deg, var(--panel), var(--panel-3)); box-shadow: var(--shadow-sm); }
.notes-sidebar { padding: 16px; overflow: hidden; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.sidebar-head .section-label { color: var(--hot-pink); }
.count { display: block; font-size: 1.15rem; }
.icon-button { display: none; width: 44px; padding: 0; font-size: 1.4rem; }
.search-label { display: block; margin: 0 0 7px; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
#search-notes { margin-bottom: 18px; }
.notes-list { display: grid; gap: 11px; max-height: calc(100vh - 390px); min-height: 300px; padding: 3px 7px 10px 3px; overflow-y: auto; }
.note-card { width: 100%; min-height: 82px; padding: 11px; justify-content: flex-start; border-radius: 15px; background: var(--paper); color: var(--ink); text-align: left; }
.note-card:hover { background: var(--sky-blue); }
.note-card.active { background: var(--hot-pink); transform: translate(-2px,-2px); box-shadow: 7px 7px 0 #000; }
.note-card-icon { flex: 0 0 54px; display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden; border: 3px solid #000; border-radius: 12px; background: var(--electric-lime); }
.note-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.fallback-icon { font-size: 1.8rem; }
.note-card-copy { min-width: 0; }
.note-card-title, .note-card-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-card-title { margin-bottom: 3px; font-weight: 900; }
.note-card-preview { max-width: 220px; color: #55535f; font: 500 .73rem/1.3 "IBM Plex Mono", monospace; }
.no-results { padding: 24px 10px; color: var(--muted); text-align: center; }
.editor-panel { position: relative; padding: clamp(18px, 3vw, 36px); }
.empty-state { display: grid; place-items: center; align-content: center; height: 100%; min-height: 520px; text-align: center; }
.empty-state .eyebrow { color: var(--hot-pink); }
.empty-state h2 { max-width: 760px; font-size: clamp(2rem, 5vw, 5rem); }
.empty-spark { color: var(--electric-lime); font-size: 5rem; text-shadow: 5px 5px 0 #000; animation: float 2.4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(8deg); } }
.note-editor { display: grid; gap: 14px; }
.editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.save-status { color: var(--electric-lime); font: 700 .78rem/1 "IBM Plex Mono", monospace; }
button.danger { background: #ff5f5f; color: #fff; }
.title-input { padding: 15px 17px; font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 700; }
.icon-fieldset { margin: 5px 0; padding: 15px; border: 3px solid #000; border-radius: 16px; background: var(--panel-2); box-shadow: 5px 5px 0 #000; }
.icon-fieldset legend { padding: 0 8px; font-weight: 900; text-transform: uppercase; }
.icon-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.icon-option { width: 68px; height: 68px; min-height: 68px; padding: 7px; border-radius: 14px; background: var(--paper); }
.icon-option img { width: 100%; height: 100%; object-fit: contain; }
.icon-option.selected { outline: 4px solid var(--electric-lime); outline-offset: 3px; background: var(--hot-pink); }
.icon-help { margin: 3px 0 0; font-size: .8rem; }
#note-content { min-height: 310px; height: min(44vh, 570px); padding: 18px; line-height: 1.65; }
.editor-footer { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font: 500 .76rem/1.3 "IBM Plex Mono", monospace; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 5; max-width: min(390px, calc(100vw - 48px)); padding: 13px 18px; border: var(--border); border-radius: 999px; background: var(--electric-lime); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 900; }
@media (max-width: 850px) {
  .notes-header { align-items: start; }
  .workspace { grid-template-columns: 1fr; }
  .notes-sidebar, .editor-panel { min-height: auto; }
  .notes-list { max-height: 300px; min-height: 0; }
  .editor-panel { min-height: 580px; }
}
@media (max-width: 620px) {
  .notes-app { padding: 12px; }
  .notes-header { display: block; padding: 17px; }
  .header-actions { justify-content: flex-start; margin-top: 18px; }
  .header-actions #new-note { display: none; }
  .icon-button { display: inline-flex; }
  .editor-panel { padding: 17px; }
  .editor-footer { display: grid; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }