:root {
  color: #0f1419;
  background: #f2f6fa;
}

body {
  margin: 0;
  background: #f2f6fa;
  /* Prevent pull-to-refresh and bounce-scroll on mobile browsers from
     interfering with SPA navigation; individual scroll areas opt in
     via overscroll-behavior: contain. */
  overscroll-behavior: none;
}

#boot-shell {
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 14px 14px max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  background: linear-gradient(180deg, #f2f6fa 0%, #edf3f8 100%);
}

.boot-shell-topbar {
  height: 56px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2eaf0;
  box-shadow: 0 1px 0 rgba(15, 20, 25, 0.03);
}

.boot-shell-feed {
  display: grid;
  gap: 10px;
}

.boot-shell-card {
  height: 76px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2eaf0;
  box-shadow: 0 1px 0 rgba(15, 20, 25, 0.03);
}

@media (min-width: 900px) {
  #boot-shell {
    padding: 20px;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 280px);
    grid-template-rows: 1fr;
    gap: 16px;
  }

  .boot-shell-topbar {
    height: auto;
    min-height: 380px;
  }

  .boot-shell-main {
    display: grid;
    gap: 12px;
  }
}