/* Profilseite DLG Cards – PoC. Farben der Karte kommen als CSS-Variablen. */
:root {
  --brand: #111827;
  --brand-fg: #ffffff;
  --brand-label: #cbd5e1;
  --bg: #f5f5f4;
  --surface: #ffffff;
  --text: #1c1917;
  --muted: #78716c;
  --line: #e7e5e4;
  --radius: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0a09;
    --surface: #1c1917;
    --text: #f5f5f4;
    --muted: #a8a29e;
    --line: #292524;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px calc(32px + env(safe-area-inset-bottom));
}

.hero {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  color: var(--brand-fg);
  border-radius: var(--radius);
  padding: 32px 24px 28px;
  text-align: center;
}
.hero > * { position: relative; }
.hero > .hero-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 34%;
  max-width: 150px;
  pointer-events: none;
}

.avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--brand-fg) 16%, transparent);
}

.hero h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 650; }
.hero .role { margin: 6px 0 0; color: var(--brand-label); }
.hero .company { margin: 2px 0 0; font-weight: 600; }

.actions {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.btn.wallet { background: #000000; color: #ffffff; }
.btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); min-height: 44px; }

.wallet-status {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
}
.wallet-status .ws { margin: 0; display: none; }
.wallet-status[data-state="pending"] .ws-pending,
.wallet-status[data-state="added"] .ws-added,
.wallet-status[data-state="timeout"] .ws-timeout { display: block; }
.wallet-status[data-state="added"] { border-color: #16a34a; }
.wallet-status[data-state="added"] strong { color: #16a34a; }

.hint { margin: 2px 4px 0; color: var(--muted); font-size: 13px; text-align: center; }

.rows, .links { list-style: none; margin: 0 0 16px; padding: 0; }

.rows {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.rows li {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.rows li:first-child { border-top: 0; }
.rows .label { font-size: 13px; color: var(--muted); }
.rows a { color: var(--text); text-decoration: none; font-weight: 500; }

.links { display: grid; gap: 8px; }

.about { padding: 0 4px 8px; color: var(--muted); }

footer {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
footer a { color: var(--muted); }
footer .made { margin: 8px 0 0; }