:root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); }
html, body { min-height: 100%; }
.app, .login-body { min-height: 100vh; min-height: 100dvh; }
.topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right, .phase-label { display: inline-flex; align-items: center; }
.topbar-right { flex: 0 0 auto; gap: 14px; }
.phase-label { gap: 9px; white-space: nowrap; }
.refresh-link { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #365066; border-radius: 8px; padding: 8px 10px; color: var(--accent); font-size: 11px; line-height: 1; letter-spacing: .03em; white-space: nowrap; }
.refresh-link:hover { background: #16303e; }
.login-body { display: flex; align-items: center; justify-content: center; padding: calc(22px + var(--safe-top)) calc(22px + var(--safe-right)) calc(22px + var(--safe-bottom)) calc(22px + var(--safe-left)); }
.login-panel { margin: auto; }
.badge.live { border-color: #388773; color: var(--accent); background: #183c35; }
.critical-notice { border-color: #87464b; background: #351d25; color: var(--red); }

@media (max-width: 900px) {
  .app { display: block; }
  .sidebar { position: relative; top: auto; height: auto; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: calc(15px + var(--safe-top)) calc(15px + var(--safe-right)) 8px calc(15px + var(--safe-left)); }
  .sidebar .brand { grid-column: 1; grid-row: 1; min-width: 0; padding: 0; }
  .sidebar form { position: static; grid-column: 2; grid-row: 1; margin: 0; }
  .signout { width: auto; padding: 8px; }
  .private-label { display: none; }
  .sidebar nav { grid-column: 1 / -1; display: flex; min-width: 0; overflow-x: auto; gap: 7px; margin: 0 calc(-15px - var(--safe-right)) 0 calc(-15px - var(--safe-left)); padding: 5px calc(15px + var(--safe-right)) 10px calc(15px + var(--safe-left)); scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-group { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; margin: 0; }
  .nav-group p { padding: 0 8px 0 0; margin: 0; white-space: nowrap; }
  .nav-group a { white-space: nowrap; padding: 7px 9px; font-size: 11px; }
  .topbar { min-height: 46px; height: auto; padding: 0 calc(16px + var(--safe-right)) 0 calc(16px + var(--safe-left)); font-size: 9px; }
  .content { padding: 17px calc(14px + var(--safe-right)) calc(22px + var(--safe-bottom)) calc(14px + var(--safe-left)); }
  .hero { padding: 25px 22px; min-height: 0; }
  .hero-state { display: none; }
  .hero p, .page-heading p { font-size: 12px; }
  .section-title { margin: 23px 0 12px; }
  .card-grid { grid-template-columns: 1fr; gap: 13px; }
  .card { padding: 18px; }
  .metric { padding: 12px 8px 12px 0; }
  .metric:nth-child(even) { padding-left: 10px; }
  .metric strong { font-size: 13px; }
  .page-heading { margin-top: 13px; }
  .page-heading h1 { font-size: 30px; }
  .settings-card input, .login-panel input { font-size: 16px; }
}

@media (max-width: 430px) {
  .phase-label { display: none; }
  .refresh-label { display: none; }
  .refresh-link { font-size: 18px; padding: 5px 10px; }
}