@font-face {
  font-family: "Red Hat Display";
  src: url("rhd-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; }

:root {
  --navy: #14324f;
  --accent: #2e9e44;
  --line: #e3e8ee;
  --muted: #5a6b7a;
}

body {
  font-family: "Red Hat Display", system-ui, sans-serif;
  color: #1c2b38;
  background: #f4f6f8;
  min-height: 100vh;
}

.topbar {
  height: 54px; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: space-between; padding: 0 18px;
}
.logo { color: #fff; text-decoration: none; font-size: 1.05rem; }
.logo b { color: #9fd4ff; }
.top-right { display: flex; gap: 14px; align-items: center; }
.top-link { color: #8fe3a4; text-decoration: none; font-weight: 700; font-size: 0.9rem; }

.btn {
  border: none; border-radius: 8px; padding: 9px 16px;
  font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: inherit;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #27893a; }
.btn.primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.ghost { background: transparent; border: 1.5px solid #6f8aa3; color: #e7f0f8; }
.btn.small { padding: 6px 11px; font-size: 0.78rem; background: #e8eef4; color: var(--navy); }
.btn.small:hover { background: #dbe5ee; }
.btn.small.danger { color: #c2273f; }

/* auth */
.auth-wrap { display: flex; justify-content: center; padding: 60px 16px; }
.auth-card {
  background: #fff; border-radius: 16px; padding: 28px; width: 100%; max-width: 400px;
  box-shadow: 0 10px 40px rgba(20, 50, 79, 0.12);
}
.tabs { display: flex; gap: 6px; margin-bottom: 20px; background: #eef2f6; border-radius: 10px; padding: 4px; }
.tabs button {
  flex: 1; border: none; background: none; padding: 9px; border-radius: 8px;
  font-family: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; color: var(--muted);
}
.tabs button.active { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
#auth-form { display: flex; flex-direction: column; gap: 14px; }
#auth-form label { font-size: 0.85rem; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
#auth-form input {
  border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-family: inherit; font-size: 0.95rem;
}
#auth-form input:focus { outline: none; border-color: var(--accent); }
.error { color: #c2273f; font-size: 0.83rem; min-height: 1em; }
.auth-note { margin-top: 18px; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

/* dashboard */
.dash { max-width: 760px; margin: 0 auto; padding: 30px 16px 60px; }
.dash h1 { color: var(--navy); font-size: 1.5rem; }
.dash-sub { color: var(--muted); margin: 6px 0 24px; }
.badge-beta { font-size: 0.68rem; background: var(--accent); color: #fff; border-radius: 8px; padding: 2px 8px; }
.dash-card {
  background: #fff; border-radius: 14px; padding: 22px; margin-bottom: 18px;
  box-shadow: 0 3px 16px rgba(20, 50, 79, 0.07);
}
.dash-card h2 { font-size: 1.02rem; color: var(--navy); margin-bottom: 12px; }
.muted { color: var(--muted); font-size: 0.86rem; }

.karte-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid #f0f3f6;
}
.karte-row:last-child { border-bottom: none; }
.k-id { background: #eef2f6; padding: 3px 9px; border-radius: 6px; font-size: 0.85rem; }
.k-meta { flex: 1; font-size: 0.84rem; color: var(--muted); }
.k-pro { font-size: 0.6rem; font-weight: 800; background: var(--navy); color: #9fd4ff; border-radius: 7px; padding: 2px 7px; margin-left: 4px; }
.k-actions { display: flex; gap: 6px; }
.k-code {
  width: 100%; background: var(--navy); color: #d9e8f5; padding: 12px;
  border-radius: 8px; font-size: 0.74rem; overflow-x: auto; margin-top: 4px;
}

.key-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.key-row code {
  background: #eef2f6; padding: 7px 12px; border-radius: 8px; font-size: 0.82rem;
  word-break: break-all;
}

.abo-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.dash-card a { color: #1d6fd1; }