:root { --bg: #f5f7f6; --panel: #fff; --text: #14201b; --muted: #5c6863; --green: #15803d; --green-2: #16a34a; --line: #e3e9e6; }
@media (prefers-color-scheme: dark) { :root { --bg: #0d1412; --panel: #141d1a; --text: #e8efec; --muted: #a3b1ab; --line: #25312d; } }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 32px 20px 120px; text-align: center; }
.avatar { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 42px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--green), #0f766e); box-shadow: 0 10px 30px -10px rgb(21 128 61 / .6); }
h1 { margin: 8px 0 0; font-size: 30px; }
.lead { margin: 0 0 14px; color: var(--muted); max-width: 26em; }
.call { display: inline-flex; align-items: center; gap: 12px; border: 0; border-radius: 999px; padding: 18px 34px; font: inherit; font-size: 20px; font-weight: 700; color: #fff; background: var(--green); cursor: pointer; box-shadow: 0 0 0 0 rgb(22 163 74 / .55); animation: pulse 2s infinite; }
.call:hover:not(:disabled) { background: var(--green-2); }
.call:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.call:disabled { background: var(--muted); cursor: default; animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(22 163 74 / .55); } 70% { box-shadow: 0 0 0 18px rgb(22 163 74 / 0); } 100% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0); } }
@media (prefers-reduced-motion: reduce) { .call { animation: none; } }
.status { min-height: 1.5em; margin: 6px 0 0; color: var(--muted); }
.link { border: 0; background: none; color: var(--green-2); font: inherit; text-decoration: underline; cursor: pointer; padding: 6px; }
.small { font-size: 13px; color: var(--muted); max-width: 30em; margin-top: 18px; }