/* ============================================================================
   Держава «Грид» — Модуль замечаний Маэстро (Maestro Feedback Notes v2.1)
   Файл: maestro_notes.css · Стандарты: WCAG 2.2 AAA · HSL Tokens · Linear Design
   ============================================================================ */

/* 1. Плавающая кнопка вызова режима (FAB) */
.maestro-notes-fab {
  position: fixed !important; bottom: var(--sp-6) !important; right: var(--sp-6) !important;
  z-index: 9500 !important; display: inline-flex !important; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1-5) var(--sp-3-5); height: 38px; box-sizing: border-box; background: var(--card2); border: 1px solid var(--violet);
  border-radius: var(--r-full); color: var(--tx); font-family: var(--sans); font-size: var(--fs-sub);
  font-weight: 600; cursor: pointer; box-shadow: 0 4px 20px var(--black-alpha-40), 0 0 14px var(--violet-glow);
  transition: all var(--dur-normal) cubic-bezier(0.16, 1, 0.3, 1); user-select: none;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.maestro-notes-fab:hover {
  background: var(--violet); color: var(--tx-inverse); border-color: var(--violet-light);
  box-shadow: 0 6px 24px var(--black-alpha-50), 0 0 22px var(--violet-glow); transform: translateY(-2px);
}
.maestro-notes-fab:active { transform: scale(0.96); }
.maestro-notes-fab.active {
  background: var(--accent-red) !important; border-color: var(--red-light) !important;
  color: var(--tx-inverse) !important; box-shadow: 0 4px 20px var(--red-alpha-40), 0 0 16px var(--red-alpha-50) !important;
}
.maestro-notes-fab-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.maestro-notes-fab-text { letter-spacing: -0.1px; }
.maestro-notes-fab-kbd {
  font-family: var(--mono); font-size: var(--fs-xs); padding: var(--sp-0-5) var(--sp-1);
  border-radius: var(--r-xs); background: var(--white-alpha-08); border: 1px solid var(--line-glass);
  color: inherit; opacity: 0.85;
}

/* 2. Акцентная рамка по периметру окна в активном режиме */
.maestro-notes-viewport-border {
  position: fixed; inset: 0; pointer-events: none; z-index: 9800;
  box-shadow: inset 0 0 0 3px var(--violet), inset 0 0 28px var(--violet-glow);
  opacity: 0; transition: opacity var(--dur-smooth) cubic-bezier(0.16, 1, 0.3, 1);
  animation: maestro-border-pulse var(--dur-pulse) infinite alternate ease-in-out;
}
.maestro-notes-viewport-border.active { opacity: 1; }
@keyframes maestro-border-pulse {
  0% { box-shadow: inset 0 0 0 3px var(--violet), inset 0 0 20px var(--violet-glow); }
  100% { box-shadow: inset 0 0 0 3px var(--violet-light), inset 0 0 32px var(--violet-alpha-40); }
}

/* 3. Верхний бейдж подсказки в режиме инспекции */
#maestroModeBadge,
.maestro-mode-badge {
  position: fixed; top: var(--sp-4); left: 50%; transform: translateX(-50%) translateY(-20px);
  z-index: 9850; pointer-events: none; background: var(--bg-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--violet);
  padding: var(--sp-1-5) var(--sp-3); border-radius: var(--radius-md, var(--r-card, 12px)) !important; color: var(--tx);
  font-size: var(--fs-xs); display: flex; align-items: center; gap: var(--sp-2);
  box-shadow: 0 8px 24px var(--black-alpha-50), 0 0 16px var(--violet-glow);
  opacity: 0; transition: transform var(--dur-smooth) cubic-bezier(0.16, 1, 0.3, 1), opacity var(--dur-smooth) ease; user-select: none;
  max-width: min(calc(100vw - var(--sp-6)), 460px);
  box-sizing: border-box;
}
#maestroModeBadge.active,
.maestro-mode-badge.active { transform: translateX(-50%) translateY(0); opacity: 1; }
.maestro-mode-badge-dot {
  width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-circle);
  background: var(--violet); box-shadow: 0 0 var(--sp-2) var(--violet);
  animation: maestro-dot-pulse var(--dur-pulse) infinite alternate ease-in-out; flex: 0 0 auto;
}
@keyframes maestro-dot-pulse {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 1; }
}
.maestro-mode-badge kbd,
#maestroModeBadge kbd {
  background: var(--card2); border: 1px solid var(--line-light); border-radius: var(--r-xs);
  padding: var(--sp-0-5) var(--sp-1); font-family: var(--mono); font-size: var(--fs-xs); color: var(--tx2);
}

/* 4. Оверлей подсветки элемента при наведении */
.maestro-highlighter {
  position: fixed; pointer-events: none; z-index: 9840; border: 2px solid var(--violet);
  outline: 1px solid var(--black-alpha-70); outline-offset: -1px; background: var(--violet-alpha-12);
  border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--white-alpha-20), 0 0 18px var(--violet-glow), inset 0 0 12px var(--violet-alpha-15);
  transition: top var(--dur-fast) cubic-bezier(0.16, 1, 0.3, 1), left var(--dur-fast) cubic-bezier(0.16, 1, 0.3, 1),
              width var(--dur-fast) cubic-bezier(0.16, 1, 0.3, 1), height var(--dur-fast) cubic-bezier(0.16, 1, 0.3, 1);
  display: none; box-sizing: border-box;
}
.maestro-highlighter.visible { display: block; }
.maestro-highlighter-tag {
  position: absolute; top: -26px; left: -2px; background: var(--slate-900); border: 1px solid var(--violet);
  border-radius: var(--r-xs); padding: var(--sp-0-5) var(--sp-1); color: var(--tx);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.4; white-space: nowrap;
  pointer-events: none; max-width: 480px; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: var(--sp-1-5); box-shadow: 0 2px 8px var(--black-alpha-40);
}
.maestro-highlighter-dim { color: var(--violet-light); font-weight: 600; }
.maestro-highlighter-tag-text { color: var(--tx3); font-family: var(--sans); overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* 5. Модальное окно ввода замечания */
.maestro-notes-backdrop {
  position: fixed; inset: 0; background: var(--canvas-alpha-70); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); z-index: 9950; display: none; align-items: center; justify-content: center;
  padding: var(--sp-4); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-normal) cubic-bezier(0.16, 1, 0.3, 1), visibility var(--dur-normal) cubic-bezier(0.16, 1, 0.3, 1);
}
.maestro-notes-backdrop.visible { display: flex; opacity: 1; visibility: visible; pointer-events: auto; }
.maestro-notes-modal {
  background: var(--card); border: 1px solid var(--border-color); border-radius: var(--r-lg);
  width: 100%; max-width: 540px; box-shadow: 0 24px 64px var(--black-alpha-60), 0 0 28px var(--violet-glow);
  overflow: hidden; transform: scale(0.94) translateY(12px);
  transition: transform var(--dur-normal) cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column;
  max-height: calc(100vh - 40px);
}
.maestro-notes-backdrop.visible .maestro-notes-modal { transform: scale(1) translateY(0); }
.maestro-modal-handle { display: none; }

/* Шапка модального окна */
.maestro-notes-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: transparent;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.maestro-notes-head-title-wrap { display: flex; align-items: center; gap: var(--sp-2); }
.maestro-notes-title { font-size: var(--fs-md); font-weight: 600; color: var(--tx); margin: 0; }
.maestro-notes-title-icon { color: var(--violet); display: inline-flex; }
.maestro-page-badge {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--violet-light);
  background: var(--violet-alpha-12); border: 1px solid var(--violet-alpha-20);
  border-radius: var(--r-xs); padding: var(--sp-0-5) var(--sp-1-5);
}
.maestro-notes-close {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; min-height: 34px; box-sizing: border-box;
  border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--tx3);
  cursor: pointer; transition: all var(--dur-normal) ease;
}
.maestro-notes-close:hover { background: var(--card-hover); color: var(--tx); border-color: var(--line-light); }

/* Тело модального окна */
.maestro-notes-body {
  padding: var(--sp-3-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
  overflow-y: auto; max-height: calc(100vh - 180px);
}
.maestro-section-label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--tx2); letter-spacing: -0.05px;
  display: block; margin-bottom: var(--sp-1);
}

/* Карточка целевого элемента */
.maestro-target-card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-2-5) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1-5);
}
.maestro-target-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.maestro-target-selector-box {
  display: flex; align-items: center; gap: var(--sp-1); max-width: 70%;
}
.maestro-target-selector {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--violet-light);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maestro-btn-copy-sel,
.maestro-btn-toggle-preview {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; min-height: 34px; box-sizing: border-box;
  background: var(--card2); border: 1px solid var(--line-light); border-radius: var(--r-xs);
  color: var(--tx3); cursor: pointer; transition: all var(--dur-fast) ease;
}
.maestro-btn-copy-sel:hover,
.maestro-btn-toggle-preview:hover { background: var(--card-hover); color: var(--tx); border-color: var(--violet); }
.maestro-target-meta-right { display: flex; align-items: center; gap: var(--sp-1-5); }
.maestro-target-dim {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--tx3);
  background: var(--card2); border: 1px solid var(--line-glass); border-radius: var(--r-xs);
  padding: var(--sp-0-5) var(--sp-1);
}
.maestro-target-text {
  font-size: var(--fs-xs); color: var(--tx2); line-height: var(--lh-normal);
  max-height: 44px; overflow: hidden; text-overflow: ellipsis;
}
.maestro-preview-canvas-box {
  width: 100%; height: 90px; background: var(--slate-950); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; display: flex; align-items: center; justify-content: center;
  margin-top: var(--sp-1);
}
.maestro-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Сегментированный выбор вида замечания */
.maestro-kind-selector-wrap { display: flex; flex-direction: column; gap: var(--sp-1); }
.maestro-kind-selector {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1-5);
}
.maestro-kind-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 36px; height: 36px; box-sizing: border-box;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--bg); color: var(--tx2); font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; transition: all var(--dur-normal) ease; user-select: none;
}
.maestro-kind-btn kbd {
  font-family: var(--mono); font-size: var(--fs-2xs); opacity: 0.65; background: var(--card2);
  padding: 0 var(--sp-1); border-radius: var(--r-2xs); border: 1px solid var(--line-glass);
}
.maestro-kind-btn:hover { background: var(--card2); color: var(--tx); border-color: var(--line-light); }
.maestro-kind-btn.active[data-kind="не так"] {
  background: var(--amber-alpha-20); border-color: var(--amber); color: var(--amber-light);
  box-shadow: 0 0 12px var(--amber-alpha-20);
}
.maestro-kind-btn.active[data-kind="баг"] {
  background: var(--red-alpha-20); border-color: var(--red); color: var(--red-light);
  box-shadow: 0 0 12px var(--red-alpha-20);
}
.maestro-kind-btn.active[data-kind="дизайн"] {
  background: var(--violet-alpha-20); border-color: var(--violet); color: var(--violet-light);
  box-shadow: 0 0 12px var(--violet-glow);
}
.maestro-kind-btn.active[data-kind="добавить"] {
  background: var(--blue-alpha-20); border-color: var(--blue); color: var(--blue-light);
  box-shadow: 0 0 12px var(--blue-alpha-20);
}

/* Быстрые чипы-пресеты */
.maestro-presets-wrap { display: flex; flex-direction: column; gap: var(--sp-1); }
.maestro-presets-chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
}
.maestro-preset-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 36px; height: 36px; box-sizing: border-box;
  padding: var(--sp-1-5) var(--sp-3); border-radius: var(--r-full);
  background: var(--bg2); border: 1px solid var(--line-light); color: var(--tx2);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  transition: all var(--dur-fast) ease; user-select: none;
}
.maestro-preset-chip:hover {
  background: var(--violet-alpha-15); color: var(--violet-light); border-color: var(--violet);
  transform: translateY(-1px);
}
.maestro-preset-chip:active { transform: scale(0.96); }

/* Поле ввода замечания */
.maestro-textarea-wrap { display: flex; flex-direction: column; gap: var(--sp-1); }
.maestro-textarea {
  width: 100%; min-height: 88px; padding: var(--sp-2-5) var(--sp-3);
  border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line-light);
  color: var(--tx); font-family: var(--sans); font-size: var(--fs-body);
  line-height: var(--lh-normal); resize: none; outline: none;
  transition: border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
  box-sizing: border-box;
}
.maestro-textarea:focus {
  border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-alpha-20);
}
.maestro-textarea::placeholder { color: var(--tx3); opacity: 0.7; }
.maestro-textarea-footer {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); padding-top: var(--sp-1); min-height: 20px;
}
.maestro-form-error { color: var(--red-light); display: none; }
.maestro-form-error.visible { display: block; }
.maestro-char-count { color: var(--tx3); font-family: var(--mono); margin-left: auto; }
.maestro-char-count.valid { color: var(--green-light); font-weight: 500; }
.maestro-char-count .char-ok { color: var(--green); display: inline-flex; vertical-align: -0.1em; }

/* Подвал модального окна */
.maestro-notes-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line);
  background: transparent; border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.maestro-foot-hint { font-size: var(--fs-xs); color: var(--tx3); }
.maestro-foot-hint kbd {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: var(--sp-0-5) var(--sp-1); font-family: var(--mono); font-size: var(--fs-xs);
}
.maestro-foot-actions { display: flex; align-items: center; gap: var(--sp-2); }
.maestro-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1-5); min-height: 36px; height: 36px; box-sizing: border-box;
  padding: var(--sp-1-5) var(--sp-3); border-radius: var(--r-md); font-family: var(--sans);
  font-size: var(--fs-body); font-weight: 500; line-height: 1.4; cursor: pointer;
  transition: all var(--dur-normal) ease; border: 1px solid transparent; user-select: none; outline: none;
}
.maestro-btn-cancel { background: transparent; border-color: var(--line); color: var(--tx2); }
.maestro-btn-cancel:hover { background: var(--card-hover); color: var(--tx); border-color: var(--line-light); }
.maestro-btn-submit {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-light) 100%);
  color: var(--tx-inverse); font-weight: 600;
  box-shadow: 0 2px 10px var(--violet-glow);
}
.maestro-btn-submit:hover {
  filter: brightness(1.1); box-shadow: 0 4px 16px var(--violet-glow); transform: translateY(-1px);
}
.maestro-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* 6. Всплывающий тост об успешной отправке */
.maestro-notes-toast {
  position: fixed; bottom: calc(var(--sp-6) + 48px); right: var(--sp-6);
  z-index: 10000; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2-5) var(--sp-4); border-radius: var(--r-md);
  background: var(--slate-900); border: 1px solid var(--green); color: var(--tx);
  font-family: var(--sans); font-size: var(--fs-body);
  box-shadow: 0 8px 24px var(--black-alpha-50), 0 0 12px var(--green-alpha-30);
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform var(--dur-smooth) cubic-bezier(0.16, 1, 0.3, 1), opacity var(--dur-smooth) ease;
}
.maestro-notes-toast.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.maestro-toast-icon { color: var(--green); display: inline-flex; }

/* 7. Адаптивность для мобильных экранов (<= 600px, включая 411px) — Bottom Sheet */
@media (max-width: 600px) {
  .maestro-notes-backdrop {
    align-items: flex-end !important; padding: 0 !important;
  }
  .maestro-notes-modal {
    max-width: 100% !important; width: 100% !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    border-bottom: none !important;
    max-height: calc(100dvh - 24px) !important;
    box-shadow: 0 -12px 36px var(--black-alpha-60), 0 0 24px var(--violet-glow) !important;
  }
  .maestro-modal-handle {
    display: block !important; width: 36px; height: 4px; border-radius: var(--r-full);
    background: var(--line-light); margin: var(--sp-2) auto 0;
  }
  .maestro-notes-head {
    padding: var(--sp-2-5) var(--sp-3) !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  }
  .maestro-notes-body {
    padding: var(--sp-3) !important; gap: var(--sp-2-5) !important;
    max-height: calc(100dvh - 160px) !important;
  }
  .maestro-kind-selector {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .maestro-kind-btn kbd { display: none !important; }
  .maestro-notes-foot {
    padding: var(--sp-2-5) var(--sp-3) max(var(--sp-3), env(safe-area-inset-bottom, 12px)) !important;
    border-radius: 0 !important;
  }
  .maestro-foot-hint { display: none !important; }
  .maestro-foot-actions { width: 100% !important; }
  .maestro-btn { flex: 1 !important; min-height: 44px !important; }
  .maestro-notes-fab {
    position: fixed !important; right: var(--sp-3) !important;
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)) !important;
    width: 44px !important; height: 44px !important; min-width: 44px !important;
    min-height: 44px !important; padding: 0 !important; border-radius: var(--r-circle) !important;
    justify-content: center !important;
  }
  .maestro-notes-fab-text,
  .maestro-notes-fab-kbd { display: none !important; }
  .maestro-notes-toast {
    right: var(--sp-3); left: var(--sp-3);
    bottom: calc(var(--sp-3) + 60px);
  }
  #maestroModeBadge,
  .maestro-mode-badge {
    border-radius: var(--r-md) !important;
    max-width: calc(100vw - var(--sp-4)) !important;
    font-size: var(--fs-xs) !important;
  }
  #maestroModeBadge kbd,
  .maestro-mode-badge kbd { display: none !important; }
}

/* 8. Стилизация кнопки замечаний в шапке страниц */
#btnMaestroNotes,
.head #btnMaestroNotes,
.head-right #btnMaestroNotes {
  display: inline-flex !important; align-items: center; gap: var(--sp-1-5);
  transition: all var(--dur-normal) ease;
}
#btnMaestroNotes.active,
.head #btnMaestroNotes.active,
.head-right #btnMaestroNotes.active {
  background: var(--violet) !important; color: var(--tx-inverse) !important;
  border-color: var(--violet-light) !important; box-shadow: 0 0 12px var(--violet-glow) !important;
}

/* 9. Светлая тема для плавающей кнопки */
html.light-theme .maestro-notes-fab {
  background: var(--card) !important; border-color: var(--violet) !important;
  color: var(--tx) !important; box-shadow: 0 4px 16px var(--black-alpha-12), 0 0 10px var(--violet-alpha-20) !important;
}
html.light-theme .maestro-notes-fab-kbd {
  background: var(--black-alpha-04); border-color: var(--black-alpha-12); color: var(--tx2);
}

/* 10. Семантические токены реестра заметок на странице /changes */
#notesList,
.notes-list-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-3); position: relative;
}
#notesList .note-card-item,
.notes-list-grid .note-card-item {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--sp-3); background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--r-md); gap: var(--sp-2-5);
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
#notesList .note-card-item:hover,
.notes-list-grid .note-card-item:hover {
  transform: translateY(-1px); border-color: var(--accent-primary);
  box-shadow: 0 4px 12px var(--black-alpha-20);
}
.note-status-badge {
  font-size: var(--fs-xs); font-weight: 600; padding: var(--sp-0-5) var(--sp-2);
  border-radius: var(--r-xs); display: inline-flex; align-items: center; gap: var(--sp-1);
}
.note-status-badge.new {
  background: var(--violet-alpha-20); color: var(--violet-light); border: 1px solid var(--violet-alpha-30);
}
.note-status-badge.work {
  background: var(--amber-alpha-20); color: var(--amber-light); border: 1px solid var(--amber-alpha-30);
}
.note-status-badge.done {
  background: var(--green-alpha-20); color: var(--green-light); border: 1px solid var(--green-alpha-30);
}
.note-naryad-badge {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px !important; min-width: 32px !important; box-sizing: border-box; gap: var(--sp-1);
  padding: var(--sp-0-5) var(--sp-1-5); font-size: var(--fs-xs); font-family: var(--sans);
  font-variant-numeric: tabular-nums; border-radius: var(--r-xs);
  background: var(--violet-alpha-12); color: var(--accent-primary);
  border: 1px solid var(--violet-alpha-20); text-decoration: none;
  transition: all var(--dur-fast) ease; cursor: pointer;
}
.note-naryad-badge:hover {
  background: var(--violet-alpha-20); border-color: var(--accent-primary);
  color: var(--accent-primary); transform: translateY(-1px);
}
.note-naryad-badge.pending {
  background: var(--bg-card); color: var(--text-muted); border: 1px dashed var(--border-color); cursor: default;
}
.note-proof-thumb-box {
  position: relative; width: 100%; height: 96px; border-radius: var(--r-sm);
  border: 1px solid var(--border-color); background: var(--bg-primary); cursor: pointer;
  transition: all var(--dur-fast) ease;
}
.note-proof-thumb-box:hover {
  border-color: var(--accent-primary); box-shadow: 0 0 12px var(--violet-alpha-30);
}
.note-proof-thumb-img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; border-radius: var(--r-sm);
}