:root {
  --footer-bg: rgba(255, 255, 255, 0.96);

  --footer-text: #7a8494;

  --footer-text-strong: #20242c;

  --footer-border:
    rgba(
      17,
      24,
      39,
      0.08
    );

  --footer-surface-hover:
    #f1f3f5;

  --footer-transition:
    180ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}

html[data-theme="dark"],
body[data-theme="dark"] {
  --footer-bg:
    rgba(
      10,
      10,
      11,
      0.97
    );

  --footer-text: #888e99;

  --footer-text-strong: #f4f5f7;

  --footer-border:
    rgba(
      255,
      255,
      255,
      0.07
    );

  --footer-surface-hover:
    #1c1e22;
}

.app-footer {
  min-height: 40px;

  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    0 14px;

  background:
    var(--footer-bg);

  border-top:
    1px solid
    var(--footer-border);

  color:
    var(--footer-text);

  font-size: 9px;
  font-weight: 560;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  transition:
    background-color
      var(--footer-transition),
    border-color
      var(--footer-transition),
    color
      var(--footer-transition);

  animation:
    footerEnter
    320ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}

@keyframes footerEnter {
  from {
    opacity: 0;

    transform:
      translateY(5px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

.footer-left,
.footer-right {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 6px;
}

.footer-right {
  justify-content: flex-end;
}

.footer-brand {
  color:
    var(--footer-text-strong);

  font-weight: 720;

  letter-spacing:
    -0.01em;
}

.footer-company,
.footer-year,
.footer-created {
  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}

.footer-created strong {
  color:
    var(--footer-text-strong);

  font-weight: 700;

  transition:
    color
      var(--footer-transition);
}

.footer-separator {
  color:
    var(--footer-border);

  font-size: 11px;
}

@media (
  max-width: 700px
) {
  .app-footer {
    min-height: 38px;

    gap: 8px;

    padding:
      7px 10px;

    font-size: 8px;
  }

  .footer-company {
    display: none;
  }

  .footer-left,
  .footer-right {
    gap: 4px;
  }
}

@media (
  max-width: 480px
) {
  .app-footer {
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    gap: 2px;

    min-height: 46px;

    padding:
      6px 9px;
  }

  .footer-right {
    justify-content: flex-start;
  }

  .footer-left
  .footer-separator {
    display: none;
  }

  .footer-year {
    display: none;
  }

  .footer-right
  .footer-separator {
    display: none;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  .app-footer,
  .footer-created strong {
    animation: none !important;

    transition: none !important;
  }
}