new funcionality

resources/scss/components/_app-nav.scss

@@ -18,16 +18,16 @@
     max-width: $page-max-width;
     margin: 0 auto;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: $space-4;
+    flex-direction: column;
+    gap: $space-2;
     padding: $space-3 $space-6;
 }
 
-.app-nav__section {
+.app-nav__top {
     display: flex;
     align-items: center;
-    gap: $space-6;
+    justify-content: space-between;
+    gap: $space-4;
 }
 
 .app-nav__brand {
@@ -37,15 +37,9 @@
 }
 
 .app-nav__logo {
-    display: grid;
-    place-items: center;
     height: 1.75rem;
-    width: 1.75rem;
-    border-radius: $radius-md;
-    background: var(--gradient-accent);
-    color: #fff;
-    font-size: 0.7rem;
-    font-weight: 700;
+    width: auto;
+    object-fit: contain;
 }
 
 .app-nav__brand-name {
@@ -57,6 +51,7 @@
 .app-nav__links {
     display: none;
     align-items: center;
+    flex-wrap: wrap;
     gap: $space-1;
 
     @include respond-up($breakpoint-md) {
@@ -70,6 +65,7 @@
     font-size: $font-sm;
     font-weight: 500;
     color: var(--color-text-secondary);
+    white-space: nowrap;
     transition: $transition-fast;
 
     &:hover {

resources/scss/components/_auth-card.scss

@@ -40,16 +40,9 @@
 }
 
 .auth-card__logo {
-    display: grid;
-    place-items: center;
     height: 2.25rem;
-    width: 2.25rem;
-    border-radius: $radius-lg;
-    background: var(--gradient-accent);
-    color: #fff;
-    font-size: $font-xs;
-    font-weight: 700;
-    box-shadow: 0 1px 2px 0 rgb(79 70 229 / 20%);
+    width: auto;
+    object-fit: contain;
 }
 
 .auth-card__title {

resources/scss/components/_badge.scss

@@ -22,3 +22,7 @@
 .badge--inactive {
     color: var(--color-text-muted);
 }
+
+.badge--danger {
+    color: var(--color-danger);
+}

resources/scss/components/_field.scss

@@ -14,6 +14,7 @@
 }
 
 .field__hint {
+    display: block;
     margin-top: $space-1;
     font-size: $font-xs;
     color: var(--color-text-muted);