/* DM Sans — self-hosted (no CDN), per Meelio DESIGN.md */
@font-face {
    font-family: 'DM Sans'; font-style: normal; font-weight: 400;
    font-display: swap; src: url('./fonts/dm-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans'; font-style: normal; font-weight: 500;
    font-display: swap; src: url('./fonts/dm-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans'; font-style: normal; font-weight: 600;
    font-display: swap; src: url('./fonts/dm-sans-latin-600-normal.woff2') format('woff2');
}

:root {
    --purple: #794CE6;
    --fg: #171717;        /* foreground / near-black */
    --muted: #737373;     /* muted-foreground */
    --bg: #faf9f7;        /* warm gray-50 */
    --card: #ffffff;
    --border: #e7e5e2;    /* warm gray-200 */
    --green: #16a34a;
    --red: #dc2626;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--fg); padding: 24px;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(26,20,15,0.04), 0 16px 48px rgba(26,20,15,0.06);
    padding: 40px 32px;
    width: 100%; max-width: 380px;
    text-align: center;
}

.logo { height: 24px; width: auto; margin-bottom: 28px; }

.icon { height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }

/* Loading — brand purple spinner */
.spinner {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2.5px solid #ece5fb;         /* light purple track */
    border-top-color: var(--purple);
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.badge {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.badge.ok  { background: #eafaf0; color: var(--green); }
.badge.err { background: #fdecec; color: var(--red); }
.badge svg { width: 22px; height: 22px; }

.msg { font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--fg); }
.msg .sub { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.msg.muted { font-weight: 400; color: var(--muted); }
.msg.err { color: var(--red); }
.msg b { color: var(--purple); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; border-top-color: var(--purple); }
}