:root { color-scheme: light; }
body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    background: radial-gradient(circle at top, #e0f2fe 0%, #f8fafc 45%, #f1f5f9 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #0f172a;
}
.card {
    background: rgba(255,255,255,0.94);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 24px 60px rgba(15,23,42,0.12);
    max-width: 420px;
    width: 100%;
}
h1 { margin: 0 0 8px 0; font-size: 26px; }
p { margin: 0 0 16px 0; color: #475569; }
.notice {
    background: #fee2e2;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    display: none;
}
.notice.show { display: block; }
.widget { display: flex; justify-content: center; margin-top: 12px; }
.spinner { display: none; margin-top: 12px; text-align: center; color: #2563eb; }
.spinner.show { display: block; }