:root {
  --accent: #111827;
  --on-accent: #ffffff;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b0d12; --surface: #161a22; --text: #f3f4f6; --muted: #9ca3af; --border: #262b36; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: radial-gradient(1200px 500px at 50% -200px, color-mix(in srgb, var(--accent) 35%, transparent), transparent), var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 460px; margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 16px 48px; display: flex; flex-direction: column; gap: 14px; }
.profile { text-align: center; margin-bottom: 14px; }
.avatar { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 16px; background: var(--surface) center/cover no-repeat; border: 3px solid var(--surface); box-shadow: 0 8px 30px rgb(0 0 0 / .15); }
.card .avatar { width: 72px; height: 72px; margin: 0; flex: none; }
h1 { font-size: 26px; line-height: 1.2; margin: 0; letter-spacing: -.02em; }
.card h1 { font-size: 22px; }
.muted { color: var(--muted); margin: 4px 0 0; }
.bio { margin: 12px 0 0; color: var(--text); opacity: .85; }
.skeleton { background: var(--border); border-radius: 8px; width: 60%; margin-inline: auto; }
.links { display: flex; flex-direction: column; gap: 12px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 20px; border-radius: 16px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  text-decoration: none; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgb(0 0 0 / .08); }
.btn:active { transform: scale(.98); }
.btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); min-height: 44px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 24px; box-shadow: 0 20px 50px rgb(0 0 0 / .08); }
.card-top { display: flex; gap: 16px; align-items: center; }
.card-top .skeleton { margin: 0; width: 180px; }
.details { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; }
.details li + li { border-top: 1px solid var(--border); }
.details a { display: flex; gap: 14px; align-items: center; padding: 12px 0; color: inherit; text-decoration: none; word-break: break-word; }
.details .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
@media (prefers-color-scheme: dark) { .details .ico { color: color-mix(in srgb, var(--accent) 50%, white); } }
.details .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.details small { display: block; color: var(--muted); font-size: 12px; line-height: 1.2; }
.error { text-align: center; color: #dc2626; }