html, body { height: 100%; margin: 0; }
body {
    background: linear-gradient(160deg, #cfe0f5 0%, #eef4fc 45%, #ffffff 100%);
    font-family: Georgia, "Times New Roman", serif;
    color: #4a4a46;
}
.hc-wrap { max-width: 720px; margin: 0 auto; padding: 70px 20px 40px; text-align: center; }
.hc-logo { max-width: 150px; height: auto; margin-bottom: 26px; }
.hc-title { font-size: 26px; font-weight: bold; color: #5a5a52; margin: 0 0 18px; }
.hc-sub { font-size: 15px; color: #6b6b62; margin: 0 0 34px; }
.hc-spin {
    width: 42px; height: 42px; margin: 0 auto;
    border: 5px solid #dfe6ef; border-top-color: #2b7bc4;
    border-radius: 50%;
    animation: hc-rot 0.9s linear infinite;
}
@keyframes hc-rot { to { transform: rotate(360deg); } }
.hc-note { font-size: 13px; color: #8a8a80; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .hc-spin { animation-duration: 3s; } }