/* ========== Toast-System ========== */
#fancy-toast-host {
  position: fixed;
  top: env(safe-area-inset-top, 16px);
  right: 16px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
@media (max-width: 640px) {
  #fancy-toast-host { left: 16px; right: 16px; align-items: stretch; }
}
.fancy-toast {
  pointer-events: auto;
  min-width: 240px; max-width: 380px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.06);
  padding: 12px 14px;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.4;
  animation: fancyToastIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  border-left: 4px solid var(--fancy-accent, #5B21B6);
}
.fancy-toast.leaving { animation: fancyToastOut 0.2s ease-in forwards; }
.fancy-toast .ico { font-size: 20px; line-height: 1; flex-shrink: 0; }
.fancy-toast .body { flex: 1; min-width: 0; }
.fancy-toast .title { font-weight: 600; color: #0f172a; margin-bottom: 2px; }
.fancy-toast .msg { color: #475569; font-size: 13px; }
.fancy-toast .x { background: none; border: none; cursor: pointer; color: #94a3b8;
                  font-size: 18px; padding: 0 4px; line-height: 1; }
.fancy-toast.success { border-left-color: #16a34a; }
.fancy-toast.error   { border-left-color: #dc2626; }
.fancy-toast.warn    { border-left-color: #d97706; }
.fancy-toast.achievement {
  border-left-color: #9333ea;
  background: linear-gradient(135deg, #faf5ff 0%, white 60%);
}
.fancy-toast.achievement .title { color: #6b21a8; }

@keyframes fancyToastIn {
  from { opacity: 0; transform: translateX(20px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes fancyToastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ========== Konfidenz-Pill als Gradient ========== */
.conf-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: white; min-width: 38px; justify-content: center;
}

/* ========== Mini-Sparkline ========== */
.fancy-sparkline {
  display: inline-block; vertical-align: middle;
  height: 14px; width: 50px;
}

/* ========== Dark Mode ========== */
html.dark { color-scheme: dark; }
html.dark body { background: #0f172a; color: #e2e8f0; }
html.dark .bg-white { background: #1e293b !important; }
html.dark .bg-slate-50 { background: #0f172a !important; }
html.dark .bg-slate-100 { background: #334155 !important; color: #f1f5f9 !important; }
html.dark .bg-slate-200 { background: #475569 !important; color: #f1f5f9 !important; }
html.dark .bg-slate-300 { background: #64748b !important; color: #f1f5f9 !important; }
html.dark .hover\:bg-slate-200:hover { background: #475569 !important; }
html.dark .hover\:bg-slate-300:hover { background: #64748b !important; }
/* Custom-Klasse btn-secondary (Mobile) hat hartes background:white — Dark-Override */
html.dark .btn-secondary {
  background: #334155 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}
html.dark .btn-secondary:active { background: #475569 !important; }
html.dark .bg-purple-50 { background: #2e1065 !important; }
html.dark .bg-amber-50 { background: #451a03 !important; }
html.dark .bg-green-50 { background: #052e16 !important; }
html.dark .bg-red-50 { background: #450a0a !important; }
html.dark .bg-blue-50 { background: #172554 !important; }
html.dark .bg-yellow-100 { background: #422006 !important; color: #fef3c7 !important; }
html.dark .bg-green-100 { background: #14532d !important; color: #bbf7d0 !important; }
html.dark .bg-red-100 { background: #7f1d1d !important; color: #fecaca !important; }
html.dark .bg-amber-100 { background: #78350f !important; color: #fde68a !important; }
html.dark .bg-blue-100 { background: #1e3a8a !important; color: #bfdbfe !important; }
html.dark .bg-purple-100 { background: #581c87 !important; color: #e9d5ff !important; }
html.dark .text-slate-800, html.dark .text-slate-900 { color: #f1f5f9 !important; }
html.dark .text-slate-700 { color: #e2e8f0 !important; }
html.dark .text-slate-600 { color: #cbd5e1 !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-slate-400 { color: #64748b !important; }
html.dark .text-purple-700, html.dark .text-purple-800 { color: #c4b5fd !important; }
html.dark .text-green-700, html.dark .text-green-800 { color: #86efac !important; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-red-700 { color: #fca5a5 !important; }
html.dark .text-blue-700, html.dark .text-blue-800 { color: #93c5fd !important; }
html.dark .border-slate-100 { border-color: #1e293b !important; }
html.dark .border-slate-200, html.dark .border-slate-300 { border-color: #475569 !important; }
html.dark .border-purple-200 { border-color: #6b21a8 !important; }
html.dark .border-amber-200 { border-color: #92400e !important; }
html.dark .border-green-200 { border-color: #166534 !important; }
html.dark .border-red-200 { border-color: #991b1b !important; }
html.dark .border-blue-200 { border-color: #1e40af !important; }
html.dark input, html.dark select, html.dark textarea {
  background: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }
html.dark .fancy-toast { background: #1e293b; color: #e2e8f0; }
html.dark .fancy-toast .title { color: #f8fafc; }
html.dark .fancy-toast .msg { color: #cbd5e1; }
html.dark .fancy-toast.achievement {
  background: linear-gradient(135deg, #2e1065 0%, #1e293b 60%);
}
/* Onboarding-Modal + Help-Overlay Dark-Mode */
html.dark .fancy-onboard-modal {
  background: #1e293b !important;
  color: #e2e8f0;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
html.dark .fancy-onboard-modal h2 { color: #f1f5f9; }
html.dark .fancy-onboard-modal .bg-slate-200 { background: #475569 !important; }
html.dark kbd, html.dark .fancy-onboard-modal kbd {
  background: #334155 !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569;
}
/* Hover-States im Dark Mode subtiler */
html.dark .hover\:bg-slate-50:hover { background: #334155 !important; }
html.dark .hover\:bg-slate-100:hover { background: #475569 !important; }
/* Pending-List + Cards */
html.dark .pending-card { background: #1e293b !important; border-color: #334155 !important; }
html.dark .pending-card:active { background: #334155 !important; }
html.dark .field-row { background: #1e293b !important; border-color: #334155 !important; }
/* Drop-Zone: das gestrichelte Border + Hintergrund */
html.dark .border-dashed { border-color: #475569 !important; }

/* ========== Pull-to-Refresh-Indikator ========== */
.ptr-indicator {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%);
  background: white; border-radius: 0 0 12px 12px;
  padding: 8px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-size: 13px; color: #64748b; z-index: 100;
  transition: transform 0.2s;
}
.ptr-indicator.visible { transform: translateX(-50%) translateY(0); }
.ptr-indicator .spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid #cbd5e1; border-top-color: #5B21B6;
  border-radius: 50%; animation: ptrSpin 0.7s linear infinite;
  vertical-align: middle; margin-right: 6px;
}
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ========== Live-Typing-Cursor ========== */
.fancy-typing::after {
  content: '▌'; color: #5B21B6; animation: fancyBlink 0.7s step-end infinite;
  font-weight: normal; margin-left: 1px;
}
@keyframes fancyBlink { 50% { opacity: 0; } }

/* ========== Onboarding-Tour-Modal ========== */
.fancy-onboard-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6);
  z-index: 9998; display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fadeIn 0.2s;
}
.fancy-onboard-modal {
  background: white; border-radius: 16px; max-width: 460px; width: 100%;
  padding: 28px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  animation: popIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}