:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #061427; }
body { min-height: 100vh; margin: 0; color: #eaf3ff; background: radial-gradient(ellipse at 50% 35%, #16365c 0%, #071a30 60%, #04101f 100%); }
.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 36px); gap: 18px; }
.announcement { width: min(100%, 1500px); overflow: hidden; border-radius: clamp(8px, 1.3vw, 18px); box-shadow: 0 20px 65px rgba(0,0,0,.38); }
.banner { display: block; width: 100%; height: auto; }
.footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; color: #bfd0e4; text-align: center; font-size: clamp(12px, 1.3vw, 15px); line-height: 1.5; }
.footer a { color: #79d6ff; text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover, .footer a:focus-visible { color: white; }
@media (max-width: 600px) { .page { justify-content: flex-start; padding: 10px 8px 24px; gap: 16px; } .announcement { border-radius: 7px; } .footer { flex-direction: column; gap: 5px; } }