* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-family);
  color: var(--color-text-main);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
}
body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 12px;
}
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Device frame (desktop preview) ---------- */
.device {
  position: relative;
  width: var(--device-width);
  height: var(--device-height);
  max-height: calc(100vh - 48px);
  background: var(--color-bg);
  border-radius: 40px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25), 0 0 0 10px #111, 0 0 0 12px #333;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.device-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 30px;
  background: #111;
  border-radius: 0 0 16px 16px;
  z-index: 100;
}

@media (max-width: 480px) {
  body { padding: 0; }
  .device {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
  .device-notch { display: none; }
}

/* ---------- Screen stack ---------- */
.screen-viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.screen {
  position: absolute;
  inset: 0;
  padding-top: var(--statusbar-h);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-page-bg);
  display: none;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.screen.active { display: flex; }

/* Every scrolling element in the app hides its scrollbar — the shell is a
   phone, and a desktop scrollbar drawn down the inside of the bezel breaks
   that read immediately.
   Kept as ONE list rather than a rule next to each container: the Loan screens
   hand their scrolling to an inner pane (.loan-scroll) and picked up a visible
   bar precisely because they were a new scroll container and this was declared
   somewhere else. Add any new scroller here.
   Both properties are needed: scrollbar-width is the standard one (Firefox,
   and Chrome 121+), ::-webkit-scrollbar covers older Chrome and Safari. */
.screen,
.loan-scroll,
.loan-filter-body,
.sheet,
.chip-row {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.screen::-webkit-scrollbar,
.loan-scroll::-webkit-scrollbar,
.loan-filter-body::-webkit-scrollbar,
.sheet::-webkit-scrollbar,
.chip-row::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- Shared header (olive gradient) ---------- */
.app-header {
  position: relative;
  background: linear-gradient(135deg, var(--color-header-bg) 0%, var(--color-header-bg-dark) 100%);
  padding: 18px 20px 40px;
  /* Same trick as .home-hero: run the gradient up behind the status bar so the
     bar has nothing to match — it is transparent until the screen scrolls. */
  margin-top: calc(-1 * var(--statusbar-h));
  padding-top: calc(18px + var(--statusbar-h));
  color: var(--color-text-on-dark);
  flex-shrink: 0;
}
.app-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(120deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 40px);
  pointer-events: none;
}
.app-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.app-header-title {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  flex: 1;
}

/* ---------- Shell status bar ---------- */
/* Part of the device shell, like the notch — not part of any one screen. It
   used to be re-emitted inside five screens, which meant it scrolled away with
   the content and survived on real phones that already have a status bar. */
.device-statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--statusbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-general);
  z-index: 99;            /* below the notch (100), above every screen */
  pointer-events: none;
  overflow: hidden;
  /* Transparent while the screen is at rest: every header reaches up behind
     this bar (see the negative margins on .home-hero / .app-header /
     .loan-header), so there is no seam to match in the first place. */
  background: transparent;
  transition: background-color 0.18s ease;
}
.device[data-statusbar="header"] .device-statusbar,
.device[data-statusbar="loan"] .device-statusbar {
  color: var(--color-text-on-dark);
}
/* Scrolled: the header has moved out from under the bar and the content sheet
   is passing behind the text instead, so the backing has to come back — a
   white promo card under white status text would erase it. */
.device.statusbar-solid .device-statusbar {
  background: var(--color-page-bg);
}
.device.statusbar-solid[data-statusbar="header"] .device-statusbar {
  background: var(--color-header-bg);
}
.device.statusbar-solid[data-statusbar="loan"] .device-statusbar {
  background: var(--brand-green-700);
}
.device.statusbar-solid[data-statusbar="hero"] .device-statusbar {
  background: var(--color-hero-top);
}
/* Must come *after* the rules above, not up in the .device breakpoint block:
   same specificity, so whichever is written last wins. --statusbar-h already
   collapses the bar to 0 there; this also takes it out of the a11y tree, so a
   screen reader doesn't announce a fake 9:41. */
@media (max-width: 480px) {
  .device-statusbar { display: none; }
}

/* ---------- Content sheet that overlaps the header ---------- */
.content-sheet {
  background: var(--color-page-bg);
  border-radius: 24px 24px 0 0;
  margin-top: -22px;
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 18px 16px calc(var(--nav-height) + 24px);
}
.content-sheet.no-overlap { margin-top: 0; border-radius: 0; }

/* ---------- Generic layout helpers ---------- */
.stack { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.center { display: flex; align-items: center; justify-content: center; }
.muted { color: var(--color-text-secondary); }
.text-sm { font-size: 12px; }
.text-md { font-size: 14px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 22px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }