:root { color-scheme: light; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #e5e3e9; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; color: #121d36; }
.scene,.veil { position: fixed; inset: -24px; pointer-events: none; }
.scene { background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -2; }
.veil { z-index: -1; }
.social-page { min-height: 100vh; min-height: 100dvh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 42px 20px 47px; }
.social-list { width: min(100%, 360px); display: flex; flex-direction: column; gap: 10px; }
.social-button { display: flex; align-items: center; min-height: 68px; padding: 9px 15px; gap: 15px; border-radius: 17px; color: #14203c; text-decoration: none; box-shadow: 0 7px 22px rgba(25,31,60,.065), 0 1px 3px rgba(25,31,60,.035); transition: transform .18s, box-shadow .18s, background .18s; border: 1px solid rgba(255,255,255,.58); }
.style-glass .social-button { background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.style-white .social-button { background: #fff; border-color: #fff; box-shadow: 0 4px 18px rgba(24,29,50,.055); }
.style-outline .social-button { background: rgba(255,255,255,.55); border-color: rgba(65,74,101,.24); box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.social-button:hover { transform: translateY(-2px); box-shadow: 0 11px 28px rgba(18,25,48,.13); background: rgba(255,255,255,.97); }
.social-button:focus-visible { outline: 3px solid #487ce0; outline-offset: 4px; }
.social-button:active { transform: translateY(0); }
.social-icon { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; border-radius: 13px; }
.social-copy { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; text-align: left; }
.social-title { font-size: 15px; font-weight: 650; line-height: 1.15; letter-spacing: -.2px; overflow-wrap: anywhere; }
.social-subtitle { font-size: 12.5px; line-height: 1.25; color: #738099; overflow-wrap: anywhere; }
.arrow { width: 19px; height: 19px; flex: 0 0 19px; color: #65728d; }
.qr-section { margin: 31px auto 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.qr-image { display: block; width: 250px; height: 250px; object-fit: contain; background: #fff; border-radius: 7px; padding: 9px; box-shadow: 0 5px 20px rgba(18,25,45,.06); }
.qr-caption { margin: 0; color: #33435f; font-weight: 500; font-size: 13px; text-align: center; text-shadow: 0 1px 3px #fff8; }
.error-content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 24px; }
.error-content h1 { font-size: 84px; font-weight: 760; margin: 0; }
.error-content p { color: #5d6778; }
.error-content a { color: #3353bb; }
@media (max-width: 480px) {
 .social-page { padding: 25px 20px 38px; justify-content: flex-start; }
 .social-list { max-width: 390px; gap: 10px; }
 .social-button { min-height: 71px; padding: 10px 15px; border-radius: 16px; }
 .social-icon { width: 40px; height: 40px; }
 .qr-section { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .social-button { transition: none; } }