/* CAO's rounded controls and hover feedback, using FIREBAL's own palette. */
[hidden] { display: none !important; }

:is(.btn, .login-btn, .header-link, .btn-xs, .btn-submit, .btn-primary,
    .btn-secondary, .nav-link, .button, .preview-plane-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  font-family: var(--sans);
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s, filter .15s, box-shadow .15s,
              background .15s, border-color .15s, color .15s;
}

:is(.btn, .nav-link, .button, .btn-secondary) {
  background: var(--bg3);
  border-color: var(--border2, var(--border));
}

:is(.btn, .nav-link, .button, .btn-secondary):not(:disabled):hover {
  background: var(--bg4, var(--bg3));
  border-color: var(--accent2);
  color: var(--fg);
}

.header-link, .login-btn {
  padding: 8px 12px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
}

.header-link:not(:disabled):hover, .login-btn:not(:disabled):hover {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--accent);
}

.btn-xs {
  padding: 5px 9px;
  background: var(--bg3);
}

.btn-xs:not(:disabled):hover, .preview-plane-button:not(:disabled):hover {
  background: var(--bg4);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-submit, .btn-primary, .btn.primary, .button.primary {
  border: 1px solid transparent;
  box-shadow: 0 4px 18px rgba(91, 233, 181, .16);
}

.btn.primary {
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  color: #07120e;
}

.button.primary, .btn-submit, .btn-primary {
  background: var(--accent);
  color: var(--bg);
}

:is(.btn-submit, .btn-primary, .btn.primary, .button.primary):not(:disabled):hover {
  filter: brightness(1.14);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(91, 233, 181, .26);
}

.btn.primary:not(:disabled):hover {
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  color: #07120e;
}
.button.primary:not(:disabled):hover, .btn-submit:not(:disabled):hover {
  background: var(--accent);
  color: var(--bg);
}

.tab { border-radius: 9px 9px 0 0; }
.tab:not(.on):hover { background: var(--bg3); }

:is(button, .btn, .login-btn, .header-link, .nav-link, .button):focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 3px;
}

button:disabled {
  transform: none;
  filter: none;
  box-shadow: none;
}

/* Auth screens use the same primary-button motion with their existing colors. */
.actions button, #signupBtn, #resendBtn {
  border-radius: 9px;
  transition: transform .15s, filter .15s, box-shadow .15s;
}
.actions button:not(:disabled):hover, #signupBtn:not(:disabled):hover {
  filter: brightness(1.14);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(91, 233, 181, .22);
}
#resendBtn:not(:disabled):hover { filter: brightness(1.14); }

/* Navigation can wrap without pushing the app's submit bar below the screen. */
.firebal-app > .layout { flex: 1; min-height: 0; height: auto; }
.firebal-app .mpanel { height: 100%; min-height: 0; }

@media (max-width: 1100px) {
  .nav { flex-wrap: wrap; height: auto; min-height: 60px; gap: 8px; padding: 10px 0; }
  .firebal-app > header { flex-wrap: wrap; height: auto; min-height: 48px; padding: 8px 12px; gap: 8px; }
}

@media (max-width: 650px) {
  .firebal-app .auth-user, .nav .auth-user { display: none; }
  .firebal-app .header-link, .firebal-app .login-btn { padding: 6px 8px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(button, .btn, .login-btn, .header-link, .nav-link, .button) { transition: none; }
  :is(.btn-submit, .btn-primary, .btn.primary, .button.primary,
      .actions button, #signupBtn):not(:disabled):hover { transform: none; }
}