/* Page layout only. Everything visual comes from the App8 design system (static/ds). */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: Comfortaa, system-ui, sans-serif; font-weight: 500; }

.a8-logo-link { text-decoration: none; display: inline-flex; }
.a8d-spacer { flex: 1 1 auto; }
.a8d-nav-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.a8d-nav-end form { margin: 0; }
.a8d-person { font-size: 14px; font-weight: 700; }

.a8d-shell { display: flex; flex-wrap: wrap; align-items: flex-start; max-width: 1440px; margin: 0 auto; }
.a8d-sidenav { flex: 1 1 220px; max-width: 280px; padding: var(--space-6) var(--space-4); box-sizing: border-box; }
.a8d-sidenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.a8d-disabled { color: var(--ink-disabled); cursor: default; }
.a8d-disabled svg { color: var(--ink-disabled); }
.a8d-disabled:hover { background: none; }
.a8d-main { flex: 999 1 560px; min-width: 0; padding: var(--space-6) var(--space-8) var(--space-12); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-6); }
.a8d-title { margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; }
.a8d-lead { margin: calc(-1 * var(--space-4)) 0 0; color: var(--ink-muted); font-size: 16px; line-height: 26px; }
.a8d-footer { max-width: 1440px; margin: 0 auto; padding: var(--space-6) var(--space-8); font-size: 13px; color: var(--ink-muted); }

.a8d-center { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-6) var(--space-4); box-sizing: border-box; }
.a8d-login-lang { display: flex; justify-content: center; }
.a8-signin-title { margin: 0; text-align: center; }
.a8-signin-foot { text-align: center; font-size: 14px; }
.a8-signin-foot .a8-link { display: inline-flex; align-items: center; gap: 6px; }
.a8d-message { width: min(520px, 100%); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) var(--space-6); }
.a8d-message-logo { display: flex; justify-content: center; }

@media (max-width: 720px) {
  .a8d-sidenav { max-width: none; padding-bottom: 0; }
  .a8d-main { padding: var(--space-5) var(--space-4) var(--space-8); }
  .a8d-person { display: none; }
}