body.router-page {
  overflow: hidden;
  background: transparent !important;
  font-family: Geist, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.router-page::before,
body.router-page::after {
  content: none !important;
}

.router-page-surface {
  height: calc(100dvh - 68px);
  min-height: calc(100dvh - 68px);
}

.router-page .app {
  height: 100%;
  min-height: 0;
  transform: none;
  transition: opacity 320ms ease;
}

.router-page .hero {
  height: 100%;
}

/* Canonical terminal glass: 90% opaque / 10% transparent. */
.router-page .terminal {
  border-radius: 14px;
  background: rgba(3, 10, 12, 0.9);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(3px) saturate(108%);
  -webkit-backdrop-filter: blur(3px) saturate(108%);
}

.router-page .term-top,
.router-page .history,
.router-page .composer {
  background: transparent;
}

.router-page .composer:focus-within {
  background: rgba(113, 221, 201, 0.022);
  box-shadow: inset 2px 0 0 rgba(113, 221, 201, 0.72);
}

.router-page .composer:focus-within .composer-meta strong,
.router-page .composer:focus-within .input-prefix {
  color: #9aeadc;
}

/* The whole composer communicates focus; the text field should not become a box. */
.router-page #command:focus,
.router-page #command:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

@media (max-width: 880px) {
  .router-page-surface {
    height: calc(100dvh - 62px);
    min-height: calc(100dvh - 62px);
  }
}

@media (max-width: 680px) {
  body.router-page {
    overflow: auto;
  }

  .router-page-surface {
    height: auto;
    min-height: calc(100dvh - 62px);
  }

  .router-page .app {
    height: auto;
    min-height: calc(100dvh - 62px);
  }

  .router-page .hero {
    height: auto;
    min-height: calc(100dvh - 62px);
  }

  .router-page .terminal {
    border-radius: 12px;
  }
}