.portal-open {
  padding: 0;
  background: var(--background);
}

.rental-portal {
  --portal-edge: max(18px, env(safe-area-inset-left), env(safe-area-inset-right));
  padding: max(14px, env(safe-area-inset-top)) var(--portal-edge)
    calc(105px + env(safe-area-inset-bottom));
}

.portal-header,
.portal-main {
  width: min(100%, 780px);
  margin-inline: auto;
}

.portal-header {
  min-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
}

.portal-brand { flex: 0 0 auto; color: var(--ink); text-decoration: none; }
.portal-brand .brand-logo { width: 42px; height: 42px; background: white; }
.portal-account { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.portal-account span {
  max-width: min(36vw, 210px);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-account button { min-height: 44px; white-space: nowrap; }
#account-status:empty { display: none; }
.portal-main { padding-top: clamp(12px, 4vw, 30px); }

.portal-nav {
  position: fixed;
  inset: auto 0 max(12px, env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 2 * var(--portal-edge)));
  min-height: 65px;
  margin-inline: auto;
  padding: 5px 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  background: #fff;
  border: 1px solid #d5dfe6;
  border-radius: 22px;
  box-shadow: 0 10px 26px #234c6824;
  z-index: 5;
}

.portal-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 4px 0;
  border-radius: 15px;
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease, transform 150ms ease;
}

.portal-nav a[aria-current="page"] { background: #eaf2f8; color: var(--deep-blue); }
.portal-nav a:active { transform: scale(.95); }
.portal-nav-book svg {
  box-sizing: content-box;
  padding: 3px;
  border-radius: 50%;
  background: #fbe9d8;
  color: #8b4918;
}
.portal-nav-book[aria-current="page"] svg { background: var(--orange); color: #3f280f; }
.portal-nav a:focus-visible,
.portal-link:focus-visible,
.portal-brand:focus-visible { outline: 3px solid #65a0d0; outline-offset: 2px; }
.portal-link { display: inline-block; padding-block: 8px; color: var(--deep-blue); font-weight: 650; }

@media (max-width: 420px) {
  .portal-brand { font-size: 18px; }
  .portal-account { gap: 8px; }
  .portal-account span { max-width: 18vw; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-nav a { transition: none; }
  .portal-nav a:active { transform: none; }
}