:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #101820;
  background: #eef3f5;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button { font: inherit; }

.shell {
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  background: #f9fbfc;
  box-shadow: 0 0 40px rgb(8 34 48 / 12%);
}

.topbar {
  min-height: 88px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  color: white;
  background: #123f5a;
}

.menu {
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 12px;
  color: inherit;
  background: transparent;
  font-size: 1.35rem;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 1.3rem; }
.eyebrow { margin-bottom: 3px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.environment { padding: 6px 9px; border-radius: 999px; background: #f2b544; color: #17202a; font-size: .72rem; font-weight: 900; }

.empty-state { padding: 64px 28px 32px; }
.empty-state h2 { max-width: 360px; font-size: 2rem; line-height: 1.08; }
.empty-state > p:not(.eyebrow) { max-width: 380px; color: #52616b; line-height: 1.55; }
.water-mark { margin-bottom: 38px; font-size: clamp(5rem, 25vw, 8rem); line-height: .8; font-weight: 900; letter-spacing: -.08em; color: #c9dce4; }

.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 36px 0 0; }
.status-grid div { padding: 16px; border: 1px solid #d5e0e5; border-radius: 14px; background: white; }
.status-grid dt { color: #65737c; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.status-grid dd { margin: 7px 0 0; font-weight: 800; overflow-wrap: anywhere; }

@media (prefers-color-scheme: dark) {
  :root { color: #ecf4f7; background: #07141b; }
  .shell { background: #0d202a; }
  .topbar { background: #0b3449; }
  .empty-state > p:not(.eyebrow) { color: #b4c4cc; }
  .water-mark { color: #21485a; }
  .status-grid div { border-color: #285064; background: #123040; }
  .status-grid dt { color: #9bb5c1; }
}