/* =====================================================================
   MyPrompts – Designsystem und Oberfläche
   Alle Klassen tragen das Präfix "mpl-". CSS und JavaScript sind getrennt.
   ===================================================================== */

/* -------------------- Designtokens -------------------- */
:root {
  /* Farben: Anthrazit/Marineblau als Hauptfarbe, ein dezenter Teal-Akzent */
  --mpl-bg: #eef1f6;
  --mpl-surface: #ffffff;
  --mpl-surface-2: #f5f7fb;
  --mpl-surface-3: #eceff5;
  --mpl-ink: #1a2332;
  --mpl-ink-soft: #566074;
  --mpl-ink-faint: #8792a6;
  --mpl-border: #dde3ec;
  --mpl-border-strong: #c7cfdc;

  --mpl-primary: #1d3a66;
  --mpl-primary-hover: #244a81;
  --mpl-primary-ink: #ffffff;

  --mpl-accent: #11776a;
  --mpl-accent-soft: #e3f1ef;

  --mpl-rail: #1a2332;
  --mpl-rail-2: #222d40;
  --mpl-rail-ink: #cdd5e3;
  --mpl-rail-ink-soft: #8b97ad;
  --mpl-rail-active: #2b3952;

  --mpl-gold: #c48a1a;           /* semantisch: Favorit */
  --mpl-danger: #b4323a;         /* semantisch: Löschen */
  --mpl-danger-hover: #9a2a31;
  --mpl-danger-soft: #fbeaeb;
  --mpl-ok: #11776a;

  /* Typografie */
  --mpl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mpl-font-mono: "SFMono-Regular", "SF Mono", "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
  --mpl-fs-xs: 0.75rem;
  --mpl-fs-sm: 0.8125rem;
  --mpl-fs-base: 0.9375rem;
  --mpl-fs-md: 1rem;
  --mpl-fs-lg: 1.1875rem;
  --mpl-fs-xl: 1.5rem;
  --mpl-fs-2xl: 2rem;
  --mpl-lh: 1.6;
  --mpl-lh-tight: 1.3;

  /* Abstände */
  --mpl-sp-1: 0.25rem;
  --mpl-sp-2: 0.5rem;
  --mpl-sp-3: 0.75rem;
  --mpl-sp-4: 1rem;
  --mpl-sp-5: 1.5rem;
  --mpl-sp-6: 2rem;
  --mpl-sp-7: 3rem;

  /* Rahmen, Radien, Schatten */
  --mpl-radius-sm: 6px;
  --mpl-radius: 10px;
  --mpl-radius-lg: 14px;
  --mpl-shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.06), 0 1px 1px rgba(20, 30, 50, 0.04);
  --mpl-shadow: 0 4px 14px rgba(20, 30, 50, 0.08);
  --mpl-shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.22);
  --mpl-ring: 0 0 0 3px rgba(29, 58, 102, 0.28);

  /* Layout */
  --mpl-rail-w: 264px;
  --mpl-content-max: 1180px;
  --mpl-reader-max: 760px;
}

/* -------------------- Grundlagen -------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--mpl-font);
  font-size: var(--mpl-fs-base);
  line-height: var(--mpl-lh);
  color: var(--mpl-ink);
  background: var(--mpl-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: var(--mpl-lh-tight); margin: 0; font-weight: 650; }

button { font-family: inherit; }

a { color: var(--mpl-primary); }

.mpl-hidden { display: none !important; }

.mpl-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--mpl-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------------------- Buttons -------------------- */
.mpl-btn {
  --btn-bg: var(--mpl-surface);
  --btn-ink: var(--mpl-ink);
  --btn-border: var(--mpl-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mpl-sp-2);
  padding: 0.5rem 0.9rem;
  font-size: var(--mpl-fs-base);
  font-weight: 550;
  line-height: 1.2;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--mpl-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.mpl-btn:hover { background: var(--mpl-surface-2); }
.mpl-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.mpl-btn--primary {
  --btn-bg: var(--mpl-primary);
  --btn-ink: var(--mpl-primary-ink);
  --btn-border: var(--mpl-primary);
}
.mpl-btn--primary:hover { background: var(--mpl-primary-hover); border-color: var(--mpl-primary-hover); }

.mpl-btn--danger {
  --btn-bg: var(--mpl-surface);
  --btn-ink: var(--mpl-danger);
  --btn-border: var(--mpl-border-strong);
}
.mpl-btn--danger:hover { background: var(--mpl-danger-soft); border-color: var(--mpl-danger); }

.mpl-btn--ghost { --btn-bg: transparent; --btn-border: transparent; }
.mpl-btn--ghost:hover { background: var(--mpl-surface-3); }

.mpl-btn--sm { padding: 0.35rem 0.6rem; font-size: var(--mpl-fs-sm); }
.mpl-btn--block { width: 100%; }
.mpl-btn--icon { padding: 0.5rem; }

.mpl-icon { width: 1.05em; height: 1.05em; flex: none; stroke-width: 2; }

/* -------------------- Login -------------------- */
.mpl-login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--mpl-sp-5);
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(29, 58, 102, 0.10), transparent 60%),
    var(--mpl-bg);
}
.mpl-login__card {
  width: 100%;
  max-width: 400px;
  background: var(--mpl-surface);
  border: 1px solid var(--mpl-border);
  border-radius: var(--mpl-radius-lg);
  box-shadow: var(--mpl-shadow);
  padding: var(--mpl-sp-6);
}
.mpl-login__brand {
  display: flex; align-items: center; gap: var(--mpl-sp-3);
  margin-bottom: var(--mpl-sp-5);
}
.mpl-brandmark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--mpl-rail); color: #fff;
  border-radius: 10px; font-weight: 700; font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.mpl-login__brand h1 { font-size: var(--mpl-fs-lg); }
.mpl-login__brand p { margin: 2px 0 0; font-size: var(--mpl-fs-sm); color: var(--mpl-ink-soft); }
.mpl-login__card label {
  display: block; font-size: var(--mpl-fs-sm); font-weight: 600;
  margin-bottom: var(--mpl-sp-2); color: var(--mpl-ink-soft);
}
.mpl-field {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: var(--mpl-fs-md);
  font-family: inherit;
  color: var(--mpl-ink);
  background: var(--mpl-surface);
  border: 1px solid var(--mpl-border-strong);
  border-radius: var(--mpl-radius-sm);
}
.mpl-field:focus { outline: none; border-color: var(--mpl-primary); box-shadow: var(--mpl-ring); }
textarea.mpl-field { resize: vertical; line-height: var(--mpl-lh); min-height: 90px; }
.mpl-pw-row { display: flex; gap: var(--mpl-sp-2); }
.mpl-pw-row .mpl-field { flex: 1; }
.mpl-login__actions { margin-top: var(--mpl-sp-5); }
.mpl-login__hint { margin-top: var(--mpl-sp-4); font-size: var(--mpl-fs-xs); color: var(--mpl-ink-faint); text-align: center; }
.mpl-form-msg { margin-top: var(--mpl-sp-4); font-size: var(--mpl-fs-sm); min-height: 1.2em; }
.mpl-form-msg--error { color: var(--mpl-danger); }

/* -------------------- App-Grundgerüst -------------------- */
.mpl-app { display: grid; grid-template-columns: var(--mpl-rail-w) 1fr; min-height: 100dvh; }

.mpl-rail {
  background: var(--mpl-rail);
  color: var(--mpl-rail-ink);
  display: flex;
  flex-direction: column;
  padding: var(--mpl-sp-5) var(--mpl-sp-4);
  gap: var(--mpl-sp-5);
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}
.mpl-rail__brand { display: flex; align-items: center; gap: var(--mpl-sp-3); }
.mpl-rail__brand h1 { font-size: var(--mpl-fs-md); color: #fff; letter-spacing: -0.01em; }
.mpl-rail__brand .mpl-brandmark { width: 34px; height: 34px; font-size: 0.95rem; background: var(--mpl-rail-2); }

.mpl-rail__section-title {
  font-size: var(--mpl-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mpl-rail-ink-soft);
  margin: 0 0 var(--mpl-sp-2) var(--mpl-sp-2);
  display: flex; align-items: center; justify-content: space-between;
}
.mpl-rail__section-title button { color: var(--mpl-rail-ink-soft); }
.mpl-rail__section-title button:hover { color: #fff; }

.mpl-nav { display: flex; flex-direction: column; gap: 2px; }
.mpl-nav__item {
  display: flex; align-items: center; gap: var(--mpl-sp-3);
  width: 100%; text-align: left;
  padding: 0.5rem var(--mpl-sp-2);
  font-size: var(--mpl-fs-base);
  color: var(--mpl-rail-ink);
  background: transparent; border: 0; border-radius: var(--mpl-radius-sm);
  cursor: pointer;
}
.mpl-nav__item:hover { background: var(--mpl-rail-2); color: #fff; }
.mpl-nav__item.is-active { background: var(--mpl-rail-active); color: #fff; font-weight: 600; }
.mpl-nav__item .mpl-count {
  margin-left: auto;
  font-size: var(--mpl-fs-xs);
  color: var(--mpl-rail-ink-soft);
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 7px; border-radius: 999px;
}
.mpl-nav__item.is-active .mpl-count { color: #fff; }
.mpl-nav__cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mpl-cat-row { display: flex; align-items: center; gap: 2px; }
.mpl-cat-row .mpl-nav__item { flex: 1; min-width: 0; }
.mpl-cat-edit {
  opacity: 0; color: var(--mpl-rail-ink-soft);
  padding: 0.4rem; background: transparent; border: 0; border-radius: var(--mpl-radius-sm); cursor: pointer;
}
.mpl-cat-row:hover .mpl-cat-edit, .mpl-cat-edit:focus-visible { opacity: 1; }
.mpl-cat-edit:hover { color: #fff; background: var(--mpl-rail-2); }

.mpl-rail__scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 calc(-1 * var(--mpl-sp-2)); padding: 0 var(--mpl-sp-2); }
.mpl-rail__foot { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: var(--mpl-sp-4); }
.mpl-rail__user { font-size: var(--mpl-fs-xs); color: var(--mpl-rail-ink-soft); margin-bottom: var(--mpl-sp-3); }
.mpl-rail__foot .mpl-btn {
  --btn-bg: transparent; --btn-ink: var(--mpl-rail-ink); --btn-border: rgba(255,255,255,0.14);
}
.mpl-rail__foot .mpl-btn:hover { background: var(--mpl-rail-2); color: #fff; }

/* -------------------- Hauptbereich -------------------- */
.mpl-main { min-width: 0; display: flex; flex-direction: column; }

.mpl-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--mpl-sp-3);
  padding: var(--mpl-sp-4) var(--mpl-sp-5);
  background: rgba(238, 241, 246, 0.88);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--mpl-border);
}
.mpl-menu-btn { display: none; }
.mpl-search { position: relative; flex: 1; max-width: 560px; }
.mpl-search .mpl-icon {
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  color: var(--mpl-ink-faint); pointer-events: none;
}
.mpl-search input {
  width: 100%; padding: 0.55rem 2.2rem 0.55rem 2.2rem;
  font-size: var(--mpl-fs-base); color: var(--mpl-ink);
  background: var(--mpl-surface);
  border: 1px solid var(--mpl-border-strong); border-radius: 999px;
}
.mpl-search input:focus { outline: none; border-color: var(--mpl-primary); box-shadow: var(--mpl-ring); }
.mpl-search__clear {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--mpl-ink-faint); cursor: pointer; padding: 0.3rem;
}
.mpl-topbar__spacer { flex: 1; }

.mpl-content { padding: var(--mpl-sp-5); max-width: var(--mpl-content-max); width: 100%; margin: 0 auto; }

.mpl-page-head { margin-bottom: var(--mpl-sp-5); }
.mpl-page-head h2 { font-size: var(--mpl-fs-xl); letter-spacing: -0.01em; }
.mpl-page-head p { margin: var(--mpl-sp-2) 0 0; color: var(--mpl-ink-soft); font-size: var(--mpl-fs-base); }

/* Statistikkacheln */
.mpl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mpl-sp-4); margin-bottom: var(--mpl-sp-5); }
.mpl-stat {
  background: var(--mpl-surface); border: 1px solid var(--mpl-border);
  border-radius: var(--mpl-radius); padding: var(--mpl-sp-4) var(--mpl-sp-5);
  box-shadow: var(--mpl-shadow-sm);
}
.mpl-stat__value { font-size: var(--mpl-fs-2xl); font-weight: 680; letter-spacing: -0.02em; }
.mpl-stat__label { font-size: var(--mpl-fs-sm); color: var(--mpl-ink-soft); margin-top: 2px; }

.mpl-toolbar {
  display: flex; align-items: center; gap: var(--mpl-sp-3);
  margin-bottom: var(--mpl-sp-4); flex-wrap: wrap;
}
.mpl-toolbar__title { font-size: var(--mpl-fs-lg); font-weight: 650; margin-right: auto; }
.mpl-chip-row { display: flex; gap: var(--mpl-sp-2); flex-wrap: wrap; }
.mpl-chip {
  padding: 0.3rem 0.7rem; font-size: var(--mpl-fs-sm); font-weight: 550;
  color: var(--mpl-ink-soft); background: var(--mpl-surface);
  border: 1px solid var(--mpl-border-strong); border-radius: 999px; cursor: pointer;
}
.mpl-chip:hover { background: var(--mpl-surface-2); }
.mpl-chip.is-active { color: #fff; background: var(--mpl-primary); border-color: var(--mpl-primary); }

/* Prompt-Karten */
.mpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--mpl-sp-4); }
.mpl-card {
  display: flex; flex-direction: column;
  background: var(--mpl-surface); border: 1px solid var(--mpl-border);
  border-radius: var(--mpl-radius); padding: var(--mpl-sp-4) var(--mpl-sp-5);
  box-shadow: var(--mpl-shadow-sm); cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.mpl-card:hover { border-color: var(--mpl-border-strong); box-shadow: var(--mpl-shadow); }
.mpl-card:focus-within { border-color: var(--mpl-primary); }
.mpl-card.is-archived { background: var(--mpl-surface-2); }
.mpl-card__top { display: flex; align-items: flex-start; gap: var(--mpl-sp-3); margin-bottom: var(--mpl-sp-2); }
.mpl-card__title { font-size: var(--mpl-fs-md); font-weight: 650; flex: 1; overflow-wrap: anywhere; }
.mpl-card__fav { flex: none; border: 0; background: transparent; cursor: pointer; padding: 2px; color: var(--mpl-ink-faint); }
.mpl-card__fav.is-fav { color: var(--mpl-gold); }
.mpl-card__desc {
  font-size: var(--mpl-fs-sm); color: var(--mpl-ink-soft);
  margin-bottom: var(--mpl-sp-3);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mpl-card__meta { display: flex; align-items: center; gap: var(--mpl-sp-2); margin-top: auto; flex-wrap: wrap; }
.mpl-badge {
  font-size: var(--mpl-fs-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--mpl-accent-soft); color: var(--mpl-accent); white-space: nowrap;
}
.mpl-badge--muted { background: var(--mpl-surface-3); color: var(--mpl-ink-soft); }
.mpl-card__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mpl-tag { font-size: var(--mpl-fs-xs); color: var(--mpl-ink-faint); }
.mpl-card__copy { margin-left: auto; }

/* Leer-/Ladezustände */
.mpl-empty { text-align: center; padding: var(--mpl-sp-7) var(--mpl-sp-5); color: var(--mpl-ink-soft); }
.mpl-empty__icon { color: var(--mpl-ink-faint); margin-bottom: var(--mpl-sp-3); }
.mpl-empty h3 { font-size: var(--mpl-fs-md); margin-bottom: var(--mpl-sp-2); color: var(--mpl-ink); }
.mpl-skeleton {
  background: linear-gradient(100deg, var(--mpl-surface-2) 30%, var(--mpl-surface-3) 50%, var(--mpl-surface-2) 70%);
  background-size: 200% 100%; animation: mpl-shimmer 1.3s infinite linear;
  border-radius: var(--mpl-radius); height: 128px; border: 1px solid var(--mpl-border);
}
@keyframes mpl-shimmer { to { background-position: -200% 0; } }

/* -------------------- Overlay, Dialog, Lesefenster -------------------- */
.mpl-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 42, 0.5);
  display: flex; justify-content: flex-end;
  opacity: 0; transition: opacity 0.18s ease;
}
.mpl-overlay.is-open { opacity: 1; }
.mpl-overlay--center { align-items: center; justify-content: center; padding: var(--mpl-sp-5); }

.mpl-reader {
  width: min(720px, 100%); height: 100dvh;
  background: var(--mpl-surface);
  display: flex; flex-direction: column;
  box-shadow: var(--mpl-shadow-lg);
  transform: translateX(16px); transition: transform 0.18s ease;
}
.mpl-overlay.is-open .mpl-reader { transform: none; }

.mpl-reader__head { padding: var(--mpl-sp-5) var(--mpl-sp-5) var(--mpl-sp-4); border-bottom: 1px solid var(--mpl-border); }
.mpl-reader__toprow { display: flex; align-items: center; gap: var(--mpl-sp-2); margin-bottom: var(--mpl-sp-3); }
.mpl-reader__toprow .mpl-badge { margin-right: auto; }
.mpl-reader__title { font-size: var(--mpl-fs-xl); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.mpl-reader__meta { margin-top: var(--mpl-sp-3); font-size: var(--mpl-fs-sm); color: var(--mpl-ink-soft); display: flex; gap: var(--mpl-sp-4); flex-wrap: wrap; }
.mpl-reader__desc { margin-top: var(--mpl-sp-3); color: var(--mpl-ink-soft); font-size: var(--mpl-fs-base); }

.mpl-reader__tabs { display: flex; gap: var(--mpl-sp-1); margin-top: var(--mpl-sp-4); border-bottom: 1px solid var(--mpl-border); margin-bottom: -1px; }
.mpl-tab {
  padding: 0.5rem 0.9rem; font-size: var(--mpl-fs-base); font-weight: 550;
  color: var(--mpl-ink-soft); background: transparent; border: 0;
  border-bottom: 2px solid transparent; cursor: pointer;
}
.mpl-tab:hover { color: var(--mpl-ink); }
.mpl-tab.is-active { color: var(--mpl-primary); border-bottom-color: var(--mpl-primary); }

.mpl-reader__body { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }
.mpl-reader__scroll { padding: var(--mpl-sp-5); }

.mpl-reader__actions {
  display: flex; align-items: center; gap: var(--mpl-sp-2);
  padding: var(--mpl-sp-3) var(--mpl-sp-5);
  border-top: 1px solid var(--mpl-border); background: var(--mpl-surface-2);
  flex-wrap: wrap;
}
.mpl-reader__actions .mpl-spacer { flex: 1; }

/* Inhaltsverzeichnis für lange Prompts */
.mpl-toc {
  background: var(--mpl-surface-2); border: 1px solid var(--mpl-border);
  border-radius: var(--mpl-radius); padding: var(--mpl-sp-3) var(--mpl-sp-4);
  margin-bottom: var(--mpl-sp-5);
}
.mpl-toc summary { font-size: var(--mpl-fs-sm); font-weight: 600; color: var(--mpl-ink-soft); cursor: pointer; }
.mpl-toc ul { margin: var(--mpl-sp-3) 0 0; padding-left: var(--mpl-sp-4); }
.mpl-toc li { font-size: var(--mpl-fs-sm); margin: 2px 0; }
.mpl-toc a { color: var(--mpl-ink-soft); text-decoration: none; }
.mpl-toc a:hover { color: var(--mpl-primary); text-decoration: underline; }
.mpl-toc--lvl3 { margin-left: var(--mpl-sp-3); }

/* Dialog (Formular, Bestätigung) */
.mpl-dialog {
  width: min(640px, 100%); max-height: calc(100dvh - 3rem);
  background: var(--mpl-surface); border-radius: var(--mpl-radius-lg);
  box-shadow: var(--mpl-shadow-lg); display: flex; flex-direction: column;
  transform: translateY(8px) scale(0.99); transition: transform 0.16s ease;
}
.mpl-overlay.is-open .mpl-dialog { transform: none; }
.mpl-dialog--sm { width: min(440px, 100%); }
.mpl-dialog__head { display: flex; align-items: center; padding: var(--mpl-sp-5) var(--mpl-sp-5) var(--mpl-sp-4); border-bottom: 1px solid var(--mpl-border); }
.mpl-dialog__head h3 { font-size: var(--mpl-fs-lg); }
.mpl-dialog__head .mpl-btn { margin-left: auto; }
.mpl-dialog__body { padding: var(--mpl-sp-5); overflow-y: auto; }
.mpl-dialog__foot { display: flex; justify-content: flex-end; gap: var(--mpl-sp-3); padding: var(--mpl-sp-4) var(--mpl-sp-5); border-top: 1px solid var(--mpl-border); background: var(--mpl-surface-2); flex-wrap: wrap; }

.mpl-form-group { margin-bottom: var(--mpl-sp-4); }
.mpl-form-group > label { display: block; font-size: var(--mpl-fs-sm); font-weight: 600; margin-bottom: var(--mpl-sp-2); color: var(--mpl-ink-soft); }
.mpl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mpl-sp-4); }
.mpl-form-hint { font-size: var(--mpl-fs-xs); color: var(--mpl-ink-faint); margin-top: var(--mpl-sp-2); }
.mpl-checkbox { display: flex; align-items: center; gap: var(--mpl-sp-2); font-size: var(--mpl-fs-base); color: var(--mpl-ink); cursor: pointer; }
.mpl-checkbox input { width: 16px; height: 16px; accent-color: var(--mpl-primary); }
select.mpl-field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23566074' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.2rem; }
.mpl-field--mono { font-family: var(--mpl-font-mono); font-size: var(--mpl-fs-sm); }
.mpl-dialog__msg { font-size: var(--mpl-fs-sm); color: var(--mpl-danger); margin-top: var(--mpl-sp-2); min-height: 1.1em; }
.mpl-confirm-text { color: var(--mpl-ink-soft); }
.mpl-confirm-text strong { color: var(--mpl-ink); }

/* Versionsliste */
.mpl-version { display: flex; gap: var(--mpl-sp-3); padding: var(--mpl-sp-3) 0; border-bottom: 1px solid var(--mpl-border); }
.mpl-version:last-child { border-bottom: 0; }
.mpl-version__badge { flex: none; }
.mpl-version__body { flex: 1; min-width: 0; }
.mpl-version__meta { font-size: var(--mpl-fs-xs); color: var(--mpl-ink-faint); }
.mpl-version__note { font-size: var(--mpl-fs-sm); color: var(--mpl-ink-soft); margin-top: 2px; }
.mpl-version__preview { font-family: var(--mpl-font-mono); font-size: var(--mpl-fs-xs); color: var(--mpl-ink-soft); background: var(--mpl-surface-2); border: 1px solid var(--mpl-border); border-radius: var(--mpl-radius-sm); padding: var(--mpl-sp-2); margin-top: var(--mpl-sp-2); max-height: 72px; overflow: hidden; white-space: pre-wrap; word-break: break-word; }

/* -------------------- Toast / Benachrichtigung -------------------- */
.mpl-toasts { position: fixed; bottom: var(--mpl-sp-5); left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: var(--mpl-sp-2); align-items: center; width: max-content; max-width: calc(100vw - 2rem); pointer-events: none; }
.mpl-toast {
  display: flex; align-items: center; gap: var(--mpl-sp-2);
  padding: 0.6rem 0.9rem; border-radius: 999px;
  font-size: var(--mpl-fs-sm); font-weight: 550;
  color: #fff; background: var(--mpl-ink);
  box-shadow: var(--mpl-shadow-lg);
  animation: mpl-toast-in 0.18s ease;
}
.mpl-toast--ok { background: var(--mpl-ok); }
.mpl-toast--error { background: var(--mpl-danger); }
@keyframes mpl-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* globaler Ladebalken */
.mpl-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--mpl-accent); width: 0; z-index: 100; transition: width 0.2s ease, opacity 0.3s ease; }

/* -------------------- Responsiv -------------------- */
@media (max-width: 900px) {
  .mpl-app { grid-template-columns: 1fr; }
  .mpl-rail {
    position: fixed; z-index: 70; left: 0; top: 0; width: min(300px, 86vw);
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .mpl-app.is-rail-open .mpl-rail { transform: none; }
  .mpl-rail-backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(15, 23, 42, 0.4); }
  .mpl-menu-btn { display: inline-flex; }
  .mpl-stats { grid-template-columns: 1fr; gap: var(--mpl-sp-3); }
  .mpl-stat { display: flex; align-items: baseline; gap: var(--mpl-sp-3); padding: var(--mpl-sp-3) var(--mpl-sp-4); }
  .mpl-stat__value { font-size: var(--mpl-fs-xl); }
}
@media (max-width: 560px) {
  .mpl-content { padding: var(--mpl-sp-4); }
  .mpl-topbar { padding: var(--mpl-sp-3) var(--mpl-sp-4); }
  .mpl-grid { grid-template-columns: 1fr; }
  .mpl-form-row { grid-template-columns: 1fr; }
  .mpl-reader__scroll { padding: var(--mpl-sp-4); }
  .mpl-reader__actions { gap: var(--mpl-sp-1); }
  .mpl-dialog__foot { flex-direction: column-reverse; }
  .mpl-dialog__foot .mpl-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}