.notif-dd {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  max-width: 360px;
  background: var(--dropdown-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--dropdown-shadow);
  z-index: 2000;
  display: none;
  overflow: hidden;
  max-height: 400px;
  display: none;
  flex-direction: column;
}
.notif-dd.open { display: flex; }
.notif-dd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.notif-dd-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.notif-dd-title svg { width: 14px; height: 14px; flex-shrink: 0; }
.notif-dd-clear {
  font-size: 11px;
  color: #FF3B30;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.notif-dd-clear:hover { opacity: 0.75; }
.notif-dd-body {
  overflow-y: auto;
  flex: 1;
}
.notif-dd-body::-webkit-scrollbar-track {
  background: transparent;
}
.notif-dd-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
.notif-dd-body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

@supports (-moz-appearance: none) {
  .notif-dd-body {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }
}
.notif-dd-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--divider);
  transition: background 0.1s;
}
.notif-dd-item:last-child { border-bottom: none; }
.notif-dd-item:hover { background: var(--row-hover); }
.notif-dd-item.unread { background: var(--today-bg); }
.notif-dd-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 1px; }
.notif-dd-item-main { flex: 1; min-width: 0; }
.notif-dd-text { font-size: 12px; color: var(--text); line-height: 1.45; flex: 1; word-break: break-word; }
.notif-dd-text .notif-line { display: inline; }
.notif-dd-text b { font-weight: 600; }
.notif-dir { font-weight: 700; margin-right: 3px; }
.notif-dir--up { color: #34C759; }
.notif-dir--down { color: #FF3B30; }
.notif-dir--flat { color: var(--text-tertiary); }
.notif-prod-name { font-weight: 600; }
.notif-distr { color: var(--text-secondary); font-weight: 500; }
.notif-val-old {
  text-decoration: line-through;
  color: var(--text-tertiary);
  font-weight: 500;
}
.notif-arrow-inline { color: var(--text-tertiary); margin: 0 2px; font-weight: 500; }
.notif-val-new { font-weight: 600; }
.notif-val-new--up { color: #34C759; }
.notif-val-new--down { color: #FF3B30; }
.notif-val-new--neu { color: var(--text); }
[data-theme="dark"] .notif-dir--up { color: #6bbd86; }
[data-theme="dark"] .notif-dir--down { color: #ff6b5e; }
[data-theme="dark"] .notif-val-new--up { color: #6bbd86; }
[data-theme="dark"] .notif-val-new--down { color: #ff6b5e; }
.notif-dd-time { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.notif-dd-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 28px 16px;
  text-align: center;
}
.notif-dd-empty svg { width: 28px; height: 28px; color: var(--text-tertiary); }
.notif-dd-empty p { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }


  /* ===== Custom confirm modal (как окно входа: auth-modal / report-modal) ===== */
  .cconfirm-overlay {
  display: none;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 20000;
  box-sizing: border-box;
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px max(16px, env(safe-area-inset-left, 0px)) 24px max(16px, env(safe-area-inset-right, 0px));
}
.cconfirm-overlay.open { display: grid; }
.cconfirm-modal {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--auth-modal-radius, 8px);
  box-sizing: border-box;
  width: min(400px, 100%);
  max-width: 100%;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  box-shadow: var(--dropdown-shadow, 0 8px 32px rgba(0, 0, 0, 0.18)), 0 24px 64px rgba(0, 0, 0, 0.25);
  position: relative;
  opacity: 0;
  transform: translateY(8px) scale(0.988);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.cconfirm-overlay.open .cconfirm-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cconfirm-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--auth-control-radius, 10px);
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff3b30;
  flex-shrink: 0;
  align-self: center;
}
.cconfirm-icon svg { width: 22px; height: 22px; }
.cconfirm-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  margin: 0;
}
.cconfirm-text {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  margin: -6px 0 0;
}
.cconfirm-text.cconfirm-text--multiline { white-space: pre-line; }
.cconfirm-overlay.cconfirm--single .cconfirm-cancel { display: none !important; }
.cconfirm-overlay.cconfirm--single .cconfirm-btns { margin-top: 0; }
.cconfirm-overlay.cconfirm--single .cconfirm-ok { flex: 1; min-width: 0; }
.cconfirm-btns {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}
.cconfirm-cancel {
  flex: 1;
  min-height: 44px;
  border-radius: var(--auth-control-radius, 10px);
  border: 1px solid var(--filter-border);
  background: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.cconfirm-cancel:hover { background: var(--divider); }
.cconfirm-ok {
  flex: 1;
  min-height: 44px;
  border-radius: var(--auth-control-radius, 10px);
  background: #ff3b30;
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.cconfirm-ok:hover { opacity: 0.88; }
.cconfirm-ok:active { opacity: 0.75; }
.cconfirm-ok.cconfirm-ok--primary {
  background: #0078d4;
}
.cconfirm-ok.cconfirm-ok--primary:hover { opacity: 0.88; }
/* Как кнопка «Сохранить» в черновике спецификации (.spec-draft-toolbar-qf--save) */
.cconfirm-ok.cconfirm-ok--success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.12);
}
.cconfirm-ok.cconfirm-ok--success:hover {
  opacity: 0.92;
  filter: brightness(1.05);
}
/* Подтверждение «Очистить набор» — голубые тона, не зелёные */
.cconfirm-ok.cconfirm-ok--cyan {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 48%, #0284c7 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.12);
}
.cconfirm-ok.cconfirm-ok--cyan:hover {
  opacity: 0.92;
  filter: brightness(1.05);
}
.cconfirm-icon.cconfirm-icon--cyan {
  background: rgba(14, 165, 233, 0.14);
  border: 1px solid rgba(6, 182, 212, 0.38);
  color: #0ea5e9;
}
.cconfirm-icon.cconfirm-icon--primary {
  background: rgba(0, 120, 212, 0.1);
  border-color: rgba(0, 120, 212, 0.22);
  color: #0078d4;
}
.cconfirm-icon.cconfirm-icon--success {
  background: rgba(52, 199, 89, 0.12);
  border: 1px solid rgba(52, 199, 89, 0.28);
  color: #22c55e;
}
.cconfirm-icon.cconfirm-icon--danger {
  background: rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.2);
  color: #ff3b30;
}
  /* Circle: как вкладки входа / отчёт об ошибке */
  [data-style="circle"] .cconfirm-modal {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35) !important;
  }
  [data-style="circle"] .cconfirm-icon {
    border-radius: 50% !important;
  }
  [data-style="circle"] .cconfirm-cancel,
  [data-style="circle"] .cconfirm-ok {
    border-radius: 12px !important;
  }
  [data-style="circle"] .cconfirm-ok.cconfirm-ok--primary {
    background: #007aff !important;
  }
  [data-style="circle"] .cconfirm-ok.cconfirm-ok--primary:hover {
    opacity: 0.88 !important;
    background: #007aff !important;
  }
  [data-style="circle"] .cconfirm-ok.cconfirm-ok--success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border-radius: 12px !important;
  }
  [data-style="circle"] .cconfirm-ok.cconfirm-ok--success:hover {
    opacity: 0.9 !important;
    filter: brightness(1.04) !important;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  }
  [data-style="circle"] .cconfirm-ok.cconfirm-ok--cyan {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #0284c7 100%) !important;
    border-radius: 12px !important;
  }
  [data-style="circle"] .cconfirm-ok.cconfirm-ok--cyan:hover {
    opacity: 0.9 !important;
    filter: brightness(1.04) !important;
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 50%, #0284c7 100%) !important;
  }

/* Общая анимация появления — .proj-export-modal, .save-spec-modal */
@keyframes cconfirmIn {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== PROJECTS MODULE v24 ===== */
/* Plus button next to star in table */
.proj-add-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); border-radius: 5px;
  transition: color 0.15s, transform 0.15s; flex-shrink: 0;
  opacity: 0; pointer-events: none;
}
.proj-add-btn svg { width: 14px; height: 14px; }
.proj-add-btn:hover { color: #0078D4; transform: scale(1.15); }
/* Show plus only for logged in */
body.is-logged-in .proj-add-btn { opacity: 1; pointer-events: auto; }

/* ===== SPEC INPUT OVERLAY ===== */