/* Easy-Passwort – gemeinsame Gestaltung (Tokens). Gleiche Familie wie Easy-Remote, eigene Akzentfarbe (Türkis). */
:root {
  --bg: #0b0f17;
  --bg2: #0f1521;
  --panel: #141b29;
  --panel2: #1a2334;
  --hover: #1f2a3e;
  --line: #243049;
  --text: #e8edf7;
  --muted: #93a0b8;
  --dim: #64718a;
  --accent: #2dd4bf;
  --accent2: #14b8a6;
  --accent-ink: #04201c;
  --accent-soft: rgba(45, 212, 191, 0.14);
  --ok: #22c55e;
  --warn: #f5a524;
  --bad: #ef4444;
  --bad-soft: rgba(239, 68, 68, 0.14);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --radius: 12px;
  --radius-s: 8px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f6fb;
    --bg2: #eef2f8;
    --panel: #ffffff;
    --panel2: #f7f9fc;
    --hover: #eef3fa;
    --line: #dfe5ef;
    --text: #0f1a2e;
    --muted: #5d6a82;
    --dim: #8a96ab;
    --accent: #0d9488;
    --accent2: #0f766e;
    --accent-ink: #ffffff;
    --accent-soft: rgba(13, 148, 136, 0.10);
    --bad-soft: rgba(239, 68, 68, 0.10);
    --shadow: 0 10px 30px rgba(15, 26, 46, 0.12);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f4f6fb; --bg2: #eef2f8; --panel: #ffffff; --panel2: #f7f9fc; --hover: #eef3fa; --line: #dfe5ef;
  --text: #0f1a2e; --muted: #5d6a82; --dim: #8a96ab; --accent: #0d9488; --accent2: #0f766e; --accent-ink: #ffffff;
  --accent-soft: rgba(13, 148, 136, 0.10); --bad-soft: rgba(239, 68, 68, 0.10); --shadow: 0 10px 30px rgba(15, 26, 46, 0.12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
::selection { background: var(--accent-soft); }

.ep-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s;
}
.ep-btn:hover { background: var(--hover); }
.ep-btn:focus-visible, .ep-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ep-btn.primaer { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ep-btn.primaer:hover { background: var(--accent2); border-color: var(--accent2); }
.ep-btn.gefahr { color: var(--bad); }
.ep-btn.flach { background: transparent; border-color: transparent; }
.ep-btn.icon { width: 34px; padding: 0; }
.ep-btn:disabled { opacity: .5; cursor: default; }

.ep-input {
  width: 100%; height: 36px; padding: 0 12px; border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--bg2); color: var(--text); outline: none;
}
textarea.ep-input { height: auto; min-height: 90px; padding: 8px 12px; resize: vertical; }
.ep-input::placeholder { color: var(--dim); }
.ep-label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.ep-mono { font-family: var(--mono); letter-spacing: .02em; }

.ep-avatar {
  width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex: none; font-size: 14px; overflow: hidden;
}
.ep-avatar img { width: 100%; height: 100%; object-fit: cover; background: #fff; }

.ep-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.ep-badge.akzent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.ep-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--panel2); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 10px 16px; border-radius: 10px; z-index: 1000; }

/* Schloss-Logo */
.ep-logo { width: 28px; height: 28px; flex: none; }