:root { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #17221b; background: #f3fbf6; }
* { box-sizing: border-box; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 380px); padding: 48px 28px; border-radius: 24px; background: #fff; box-shadow: 0 12px 40px rgba(20, 60, 35, .09); text-align: center; }
h1 { margin: 20px 0 10px; font-size: 23px; }
p { margin: 0; color: #6b756e; line-height: 1.65; }
.spinner, .icon { width: 64px; height: 64px; margin: auto; }
.spinner { border: 5px solid #dcf6e6; border-top-color: #06c755; border-radius: 50%; animation: spin .75s linear infinite; }
.icon { display: grid; place-items: center; border-radius: 50%; background: #06c755; color: #fff; font-size: 34px; font-weight: 700; }
.icon[hidden] { display: none; }
button { margin-top: 24px; padding: 13px 28px; border: 0; border-radius: 12px; background: #06c755; color: #fff; font-size: 16px; font-weight: 650; cursor: pointer; }
button[hidden] { display: none; }
#login-btn { display: inline-block; margin-top: 24px; padding: 13px 28px; border-radius: 12px; background: #06c755; color: #fff; font-size: 16px; font-weight: 650; text-decoration: none; cursor: pointer; }
#login-btn[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }