/* App-eigenes Modal-/Popup-Framework (Review 1, I-01). Nutzt die Design-Tokens
   aus design-system.css und passt sich Dark/Light automatisch an. */

.ui-scrim {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, #000 52%, transparent);
  opacity: 0; transition: opacity .2s ease;
}
.ui-scrim.show { opacity: 1; }

.ui-modal {
  width: 100%; max-width: 480px; max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column;
  background: var(--surface, #161F2A);
  border: 1px solid var(--border, #26313E);
  border-radius: var(--r-lg, 18px);
  box-shadow: var(--shadow-lg, 0 24px 64px -24px rgba(0,0,0,.7));
  transform: translateY(8px) scale(.98); opacity: 0;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.ui-scrim.show .ui-modal { transform: none; opacity: 1; }
.ui-modal-sm { max-width: 420px; }
.ui-modal-md { max-width: 560px; }
.ui-modal-lg { max-width: 820px; }

.ui-modal-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px;
}
.ui-modal-title {
  margin: 0; font-family: var(--font-display, serif); font-weight: 600;
  font-size: 18px; color: var(--text, #F4F1EA); line-height: 1.25;
}
.ui-modal-x {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-2, #313E4D); background: transparent;
  color: var(--mist, #AEB9C6); font-size: 14px; line-height: 1;
}
.ui-modal-x:hover { color: var(--text, #F4F1EA); border-color: var(--gold, #C9A24B); }

.ui-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 4px; }
.ui-modal-head + .ui-modal-body { padding-top: 0; }
.ui-modal-body:first-child { padding-top: 18px; }
.ui-modal-text { margin: 6px 0 2px; color: var(--mist, #AEB9C6); font-size: 14px; line-height: 1.55; }

.ui-input {
  width: 100%; margin-top: 12px; box-sizing: border-box;
  background: var(--bg, #0E141B); border: 1px solid var(--border-2, #313E4D);
  border-radius: 10px; color: var(--text, #F4F1EA);
  font-family: var(--font-ui, sans-serif); font-size: 14px; padding: 11px 13px;
}
.ui-input:focus { outline: none; border-color: var(--gold, #C9A24B); }
textarea.ui-input { resize: vertical; line-height: 1.5; }

.ui-modal-foot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 20px 18px;
}
.ui-modal-foot:empty { display: none; }

/* Destruktive Aktion — ergänzt die Button-Familie aus design-system.css. */
.btn-danger {
  background: var(--red, #e5484d); color: #fff; border: 1px solid transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.btn-danger:hover { filter: brightness(1.06); }

@media (max-width: 560px) { .ui-modal { max-width: 100%; } }

/* Meridian-Wiederoeffnen-FAB (Review 1 R14): Pille mit Label, unten rechts — sichtbar nur
   bei eingeklapptem Panel; stapelt sich mit dem Feedback-FAB (Fix Marc 2026-06-16). */
.mer-reopen {
  position: fixed; right: 18px; bottom: 18px; z-index: 79;
  display: none; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--gold, #C9A24B);
  background: linear-gradient(180deg, var(--gold-soft, #D9B86E), var(--bronze, #9C7A33));
  color: var(--on-gold, #fff); font-family: var(--font-ui, sans-serif);
  font-size: 14px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.28);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); transition: transform .15s, box-shadow .2s;
}
.mer-reopen.show { display: inline-flex; }
.mer-reopen:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(0,0,0,.6); }
.mer-reopen svg { width: 20px; height: 20px; }
.mer-reopen-label { white-space: nowrap; }

/* Profil-Editor (Review 1 R65). */
.pf-edit { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.pf-label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--mist, #AEB9C6); }
.pf-label .ui-input { margin-top: 0; }
.pf-2fa { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border, #26313E); border-radius: 12px; background: var(--bg, #0E141B); }
.pf-2fa-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text, #F4F1EA); font-weight: 600; }
.pf-2fa-state { font-size: 12px; font-weight: 600; color: var(--gold, #C9A24B); }
.pf-2fa .btn { align-self: flex-start; }
.pf-hint { font-size: 11.5px; color: var(--mist-dim, #7C8794); }
.pf-err { color: var(--red, #e5484d) !important; }