/* mybadge.page */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #ffffff; color: #1a1a1a; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.7; }
.profile { text-align: center; padding: 4rem 2rem 2rem; }
.owner-name { font-weight: 600; font-size: 1.5rem; }
.owner-sub { font-size: 0.75rem; color: #737373; margin-top: 0.2rem; }
.badge-row { display: flex; gap: 16px; justify-content: center; margin-top: 1.5rem; }
.badge-icon { width: 48px; height: 48px; border-radius: 50%; background: #f9fafb; border: 1px solid #e5e5e5; }
.details { max-width: 560px; margin: 0 auto; padding: 1rem 2rem 2rem; }
.category-header { font-weight: 600; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: #737373; margin: 1.5rem 0 0.75rem; }
.badge-detail { display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e5e5; background: #f9fafb; padding: 1rem 1.25rem; margin-bottom: 0.5rem; }
.badge-info { display: flex; flex-direction: column; }
.badge-name { font-weight: 600; font-size: 0.85rem; }
.badge-issuer { font-size: 0.7rem; color: #737373; }
.badge-date { font-family: 'Fira Code', monospace; font-size: 0.6rem; color: #737373; margin-top: 0.2rem; }
.verified-mark { color: #059669; font-size: 1rem; }
.verification { text-align: center; padding: 2rem; }
.verify-text { font-size: 0.75rem; color: #737373; margin-bottom: 0.5rem; }
.verify-link { font-size: 0.75rem; color: #2563eb; text-decoration: underline; }
.footer { text-align: center; padding: 3rem 2rem; }
.footer-brand { font-weight: 600; font-size: 0.65rem; color: #e5e5e5; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }