@import url('../branding.css.php');
:root { --app-navy: #082f55; --app-navy-soft: #124b78; --app-amber: #f5a21a; --app-bg: #f3f6f8; }
body { background: var(--app-bg); min-height: 100vh; }
.app-navbar { background: linear-gradient(100deg, var(--app-navy), var(--app-navy-soft)); }
.app-brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 700; }
.app-brand img { width: 38px; height: 38px; border-radius: .55rem; }
.navbar-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.install-button { border-color: var(--app-amber); color: #fff; }
.install-button:hover, .install-button:focus { background: var(--app-amber); border-color: var(--app-amber); color: #082f55; }
.pwa-status { border-left: .3rem solid var(--app-amber); }
.environment-banner { background: #f5a21a; color: #082f55; text-align: center; font-size: .78rem; font-weight: 800; letter-spacing: .06em; padding: .28rem .75rem; text-transform: uppercase; }
.auth-shell { max-width: 460px; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.action-grid .btn { min-height: 3.25rem; font-weight: 600; }
.action-grid .btn:last-child { grid-column: 1 / -1; }
.history-meta { font-size: .82rem; color: #64748b; }
@media (max-width: 575.98px) {
  .app-navbar .container { align-items: flex-start; }
  .app-brand-label small { display: block; font-size: .68rem; opacity: .78; font-weight: 500; }
  .navbar-actions .btn { min-height: 2.4rem; }
  main.container { padding-left: .85rem; padding-right: .85rem; }
  .action-grid .btn { min-height: 3.75rem; }
}
@media (min-width: 768px) { .action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .action-grid .btn:last-child { grid-column: auto; } }