:root {
    color-scheme: light;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #eaf0f4;
    color: #18212a;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 18px; }
.login-card { width: min(420px, 100%); background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 12px 38px rgba(16,42,67,.16); }
.brand { color: #1261a0; font-weight: 900; letter-spacing: .08em; }
h1 { margin: 6px 0 2px; font-size: 28px; }
.hint { margin: 0 0 18px; color: #5b6d7b; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 800; }
input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #b8c5cf; border-radius: 9px; font: inherit; }
button { min-height: 50px; border: 0; border-radius: 9px; background: #1261a0; color: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.message { border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; font-weight: 700; }
.message.error { background: #fee2e2; color: #991b1b; }
.api-note { margin: 16px 0 0; color: #687986; font-size: 12px; line-height: 1.45; }

.message.maintenance { background: #fff4e5; color: #7a3e00; border: 1px solid #f3c77b; }

/* METRUM one-time update notice v0.1.21 */
.update-wrap { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.update-card { width: min(760px, 100%); background: #fff; border-radius: 18px; padding: clamp(24px, 5vw, 42px); box-shadow: 0 18px 52px rgba(16,42,67,.18); }
.update-kicker { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 11px; border-radius: 999px; background: #eaf2fb; color: #173b69; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.update-card h1 { margin: 16px 0 4px; font-size: clamp(28px, 5vw, 42px); line-height: 1.08; }
.update-date { margin: 0; color: #60758c; font-weight: 700; }
.update-greeting { margin: 18px 0 0; font-size: 18px; color: #173b69; }
.update-error { margin-top: 18px; }
.update-summary { display: grid; gap: 14px; margin: 24px 0; }
.update-item { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; padding: 18px; border: 1px solid #dbe5ef; border-radius: 13px; background: #f9fbfd; }
.update-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #173b69; color: #fff; font-weight: 800; font-size: 18px; }
.update-item h2 { margin: 1px 0 7px; font-size: 19px; line-height: 1.2; }
.update-item p { margin: 0; color: #40566d; line-height: 1.55; }
.update-item strong { color: #173b69; }
.update-stat { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 10px !important; padding-top: 10px; border-top: 1px solid #dbe5ef; font-size: 14px; }
.update-stat code { padding: 2px 6px; border-radius: 5px; background: #e8eef5; color: #173b69; font: 700 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.update-form { margin: 0; }
.update-continue { width: 100%; min-height: 50px; font-size: 16px; letter-spacing: .025em; }
.update-once { margin: 13px 0 0; text-align: center; color: #6a7d90; font-size: 13px; line-height: 1.45; }
@media (max-width: 540px) {
  .update-wrap { padding: 12px; align-items: start; }
  .update-card { margin: 10px 0; padding: 22px 17px; border-radius: 14px; }
  .update-item { grid-template-columns: 34px minmax(0,1fr); gap: 11px; padding: 15px 13px; }
  .update-number { width: 34px; height: 34px; font-size: 15px; }
  .update-item h2 { font-size: 17px; }
}

/* METRUM weather update notice v0.1.22 */
.update-version { display: inline-flex; margin: 10px 0 4px; padding: 5px 9px; border-radius: 7px; background: #173b69; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.update-item-wide { grid-template-columns: 42px minmax(0,1fr); }
.update-weather-timeline { display: grid; grid-template-columns: auto minmax(150px,1fr) auto; gap: 9px; align-items: center; margin: 14px 0 2px; color: #173b69; font-weight: 800; font-size: 13px; }
.update-weather-track { position: relative; height: 5px; border-radius: 999px; background: #cbd9e6; }
.update-weather-track i { position: absolute; left: 38%; top: 50%; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #173b69; box-shadow: 0 0 0 1px #173b69; transform: translate(-50%,-50%); }
.update-weather-timeline strong { grid-column: 2; justify-self: center; margin-top: -1px; font-size: 13px; }
.update-weather-caption { margin: 8px 0 8px !important; color: #173b69 !important; font-size: 13px; letter-spacing: .02em; }
@media (max-width: 560px) {
  .update-weather-timeline { grid-template-columns: auto minmax(110px,1fr) auto; gap: 6px; }
}