:root { color-scheme: light dark; font-family: system-ui, -apple-system, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #f7faf8; color: #20332c; overscroll-behavior: none; }
#web-status { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.status-card { width: min(100%, 430px); padding: 28px; border: 1px solid #dce8e1; border-radius: 24px; background: #fff; box-shadow: 0 18px 50px #1635271a; text-align: center; }
.status-card h1 { margin: 0 0 10px; font-size: 26px; }
.status-card p { margin: 0; line-height: 1.65; color: #52675e; }
.status-card button { margin-top: 18px; border: 0; border-radius: 14px; padding: 12px 20px; background: #178b5b; color: #fff; font: inherit; cursor: pointer; }
.loader { width: 38px; height: 38px; margin: 22px auto 0; border: 4px solid #d9eee3; border-top-color: #178b5b; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-color-scheme: dark) {
  body { background: #101915; color: #e8f2ec; }
  .status-card { background: #18241f; border-color: #30453b; }
  .status-card p { color: #b5c8be; }
}