@rhavenside/baseline-ui 1.0.22 → 1.0.24

package/dist/baseline.css

@@ -96,15 +96,15 @@
 
 :root {
   --border-width-none: 0;
-  --border-width-thin: 1px;
-  --border-width-base: 2px;
-  --border-width-thick: 4px;
+  --border-width-thin: 0.0625rem;
+  --border-width-base: 0.125rem;
+  --border-width-thick: 0.25rem;
   --border-radius-none: 0;
-  --border-radius-sm: 2px;
-  --border-radius-md: 4px;
-  --border-radius-lg: 4px;
-  --border-radius-xl: 4px;
-  --border-radius-2xl: 4px;
+  --border-radius-sm: 0.125rem;
+  --border-radius-md: 0.25rem;
+  --border-radius-lg: 0.25rem;
+  --border-radius-xl: 0.25rem;
+  --border-radius-2xl: 0.25rem;
   --border-radius-full: 9999px;
 }
 
@@ -154,8 +154,8 @@
   --form-input-padding-y-sm: 0.25rem;
   --form-input-padding-x-lg: 1.5rem;
   --form-input-padding-y-lg: 1rem;
-  --form-input-border-width: 1px;
-  --form-input-border-radius: 4px;
+  --form-input-border-width: 0.0625rem;
+  --form-input-border-radius: 0.25rem;
   --form-input-font-size: 1rem;
   --form-input-font-size-sm: 0.875rem;
   --form-input-font-size-lg: 1.125rem;
@@ -212,19 +212,19 @@
   --glass-bg-medium: rgba(255, 255, 255, 0.08);
   --glass-bg-heavy: rgba(255, 255, 255, 0.12);
   --glass-bg-etched: rgba(255, 255, 255, 0.15);
-  --glass-blur-sm: 2px;
-  --glass-blur-md: 4px;
-  --glass-blur-lg: 6px;
-  --glass-blur-xl: 8px;
+  --glass-blur-sm: 0.125rem;
+  --glass-blur-md: 0.25rem;
+  --glass-blur-lg: 0.375rem;
+  --glass-blur-xl: 0.5rem;
   --glass-border-light: rgba(255, 255, 255, 0.1);
   --glass-border-medium: rgba(255, 255, 255, 0.15);
   --glass-border-heavy: rgba(255, 255, 255, 0.2);
-  --glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
-  --glass-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
-  --glass-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);
+  --glass-shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
+  --glass-shadow-md: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
+  --glass-shadow-lg: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
   --tech-border-radius-none: 0;
-  --tech-border-radius-sm: 2px;
-  --tech-border-radius-md: 4px;
+  --tech-border-radius-sm: 0.125rem;
+  --tech-border-radius-md: 0.25rem;
 }
 
 *,
@@ -482,8 +482,8 @@ a:hover {
   color: var(--color-accent-light);
 }
 a:focus {
-  outline: 1px solid var(--color-border-focus);
-  outline-offset: 2px;
+  outline: 0.0625rem solid var(--color-border-focus);
+  outline-offset: 0.125rem;
 }
 
 ul, ol {
@@ -500,7 +500,7 @@ img {
 
 hr {
   border: 0;
-  border-top: 1px solid var(--color-border);
+  border-top: 0.0625rem solid var(--color-border);
   margin: var(--spacing-lg) 0;
 }
 
@@ -510,7 +510,7 @@ code {
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
-  border: 1px solid var(--glass-border-light);
+  border: 0.0625rem solid var(--glass-border-light);
   padding: 0.125em 0.25em;
   border-radius: var(--tech-border-radius-sm);
   color: var(--color-text);
@@ -522,7 +522,7 @@ pre {
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   padding: var(--spacing-md);
   border-radius: var(--tech-border-radius-md);
   overflow-x: auto;
@@ -590,27 +590,27 @@ textarea {
 }
 @media (min-width: 640px) {
   .bl-container {
-    max-width: 640px;
+    max-width: 40rem;
   }
 }
 @media (min-width: 768px) {
   .bl-container {
-    max-width: 768px;
+    max-width: 48rem;
   }
 }
 @media (min-width: 1024px) {
   .bl-container {
-    max-width: 1024px;
+    max-width: 64rem;
   }
 }
 @media (min-width: 1280px) {
   .bl-container {
-    max-width: 1280px;
+    max-width: 80rem;
   }
 }
 @media (min-width: 1536px) {
   .bl-container {
-    max-width: 1536px;
+    max-width: 96rem;
   }
 }
 
@@ -2761,10 +2761,10 @@ textarea {
 
 .bl-sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  width: 0.0625rem;
+  height: 0.0625rem;
   padding: 0;
-  margin: -1px;
+  margin: -0.0625rem;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -2784,7 +2784,7 @@ textarea {
 
 .bl-skip-link {
   position: absolute;
-  top: -40px;
+  top: -2.5rem;
   left: 0;
   z-index: var(--z-index-tooltip);
   padding: var(--spacing-sm) var(--spacing-md);
@@ -2795,8 +2795,8 @@ textarea {
 }
 .bl-skip-link:focus {
   top: var(--spacing-sm);
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
+  outline: 0.125rem solid var(--color-border-focus);
+  outline-offset: 0.125rem;
 }
 
 .bl-focus-visible:focus-visible {
@@ -2809,7 +2809,7 @@ textarea {
     border-color: currentColor !important;
   }
   .bl-skip-link {
-    border: 2px solid currentColor;
+    border: 0.125rem solid currentColor;
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2837,7 +2837,7 @@ textarea {
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-sm);
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
@@ -2846,8 +2846,8 @@ textarea {
   color: var(--color-text);
 }
 .bl-btn:focus {
-  outline: 1px solid var(--color-border-focus);
-  outline-offset: 2px;
+  outline: 0.0625rem solid var(--color-border-focus);
+  outline-offset: 0.125rem;
 }
 .bl-btn:disabled, .bl-btn.bl-disabled {
   opacity: 0.6;
@@ -2875,8 +2875,8 @@ textarea {
   border-color: var(--color-accent-dark);
 }
 .bl-btn-primary:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-secondary {
@@ -2889,8 +2889,8 @@ textarea {
   border-color: var(--glass-border-heavy);
 }
 .bl-btn-secondary:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-outline {
@@ -2903,8 +2903,8 @@ textarea {
   border-color: var(--color-accent-light);
 }
 .bl-btn-outline:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-ghost {
@@ -2942,8 +2942,8 @@ textarea {
   border-color: var(--color-success-dark);
 }
 .bl-btn-success:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-warning {
@@ -2956,8 +2956,8 @@ textarea {
   border-color: var(--color-warning-dark);
 }
 .bl-btn-warning:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-error {
@@ -2970,8 +2970,8 @@ textarea {
   border-color: var(--color-error-dark);
 }
 .bl-btn-error:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-info {
@@ -2984,8 +2984,8 @@ textarea {
   border-color: var(--color-info-dark);
 }
 .bl-btn-info:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-block {
@@ -2993,6 +2993,60 @@ textarea {
   width: 100%;
 }
 
+@media (max-width: 575.98px) {
+  .bl-btn {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--font-size-base);
+  }
+  .bl-btn-sm {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-sm);
+  }
+  .bl-btn-lg {
+    min-height: 3rem;
+    padding: var(--spacing-lg) var(--spacing-xl);
+    font-size: var(--font-size-lg);
+  }
+  .bl-btn-group {
+    flex-direction: column;
+    width: 100%;
+  }
+  .bl-btn-group .bl-btn {
+    width: 100%;
+    border-radius: var(--tech-border-radius-sm);
+    margin-bottom: var(--spacing-xs);
+  }
+  .bl-btn-group .bl-btn:first-child {
+    border-top-left-radius: var(--tech-border-radius-sm);
+    border-top-right-radius: var(--tech-border-radius-sm);
+    border-bottom-left-radius: var(--tech-border-radius-sm);
+  }
+  .bl-btn-group .bl-btn:last-child {
+    border-bottom-left-radius: var(--tech-border-radius-sm);
+    border-bottom-right-radius: var(--tech-border-radius-sm);
+    border-top-right-radius: var(--tech-border-radius-sm);
+    margin-bottom: 0;
+  }
+  .bl-btn-group .bl-btn:not(:first-child):not(:last-child) {
+    border-radius: var(--tech-border-radius-sm);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-btn {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+  .bl-btn-sm {
+    min-height: 2.25rem;
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+  .bl-btn-lg {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+}
 .bl-form-group {
   margin-bottom: var(--form-group-margin-bottom);
 }
@@ -3034,7 +3088,7 @@ textarea {
   line-height: var(--form-input-line-height);
   color: var(--color-text);
   background: var(--glass-bg-light);
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-sm);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
@@ -3049,7 +3103,7 @@ textarea {
 .bl-input:focus,
 .bl-textarea:focus {
   outline: none;
-  border-width: 2px;
+  border-width: 0.125rem;
   border-color: var(--color-accent);
   background: var(--glass-bg-medium);
 }
@@ -3070,7 +3124,7 @@ textarea {
   line-height: var(--form-input-line-height);
   color: var(--color-text);
   background: var(--glass-bg-medium);
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-md);
   backdrop-filter: blur(var(--glass-blur-lg));
   -webkit-backdrop-filter: blur(var(--glass-blur-lg));
@@ -3087,10 +3141,10 @@ textarea {
 }
 .bl-select:focus {
   outline: none;
-  border-width: 2px;
+  border-width: 0.125rem;
   border-color: var(--color-accent);
   background-color: var(--glass-bg-medium);
-  box-shadow: var(--glass-shadow-md), 0 0 0 1px var(--color-accent);
+  box-shadow: var(--glass-shadow-md), 0 0 0 0.0625rem var(--color-accent);
 }
 .bl-select:hover {
   background-color: var(--glass-bg-heavy);
@@ -3122,7 +3176,7 @@ textarea {
   line-height: var(--form-input-line-height);
   color: var(--color-text);
   background: var(--glass-bg-medium);
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-md);
   backdrop-filter: blur(var(--glass-blur-lg));
   -webkit-backdrop-filter: blur(var(--glass-blur-lg));
@@ -3145,9 +3199,9 @@ textarea {
 }
 .bl-select-dropdown .bl-select-toggle:focus {
   outline: none;
-  border-width: 2px;
+  border-width: 0.125rem;
   border-color: var(--color-accent);
-  box-shadow: var(--glass-shadow-md), 0 0 0 1px var(--color-accent);
+  box-shadow: var(--glass-shadow-md), 0 0 0 0.0625rem var(--color-accent);
 }
 .bl-select-dropdown .bl-select-toggle:hover {
   background-color: var(--glass-bg-heavy);
@@ -3175,11 +3229,11 @@ textarea {
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-lg));
   -webkit-backdrop-filter: blur(var(--glass-blur-lg));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-md);
   overflow: hidden;
   overflow-y: auto;
-  max-height: 300px;
+  max-height: 18.75rem;
   box-shadow: var(--glass-shadow-lg);
 }
 .bl-select-dropdown .bl-select-menu.bl-show {
@@ -3227,27 +3281,27 @@ textarea {
 .bl-input-error,
 .bl-select-error,
 .bl-textarea-error {
-  border-bottom: 2px solid var(--color-error);
+  border-bottom: 0.125rem solid var(--color-error);
 }
 .bl-input-error:focus,
 .bl-select-error:focus,
 .bl-textarea-error:focus {
-  border-width: 2px;
+  border-width: 0.125rem;
   border-color: var(--color-error);
-  border-bottom-width: 2px;
+  border-bottom-width: 0.125rem;
 }
 
 .bl-input-success,
 .bl-select-success,
 .bl-textarea-success {
-  border-bottom: 2px solid var(--color-success);
+  border-bottom: 0.125rem solid var(--color-success);
 }
 .bl-input-success:focus,
 .bl-select-success:focus,
 .bl-textarea-success:focus {
-  border-width: 2px;
+  border-width: 0.125rem;
   border-color: var(--color-success);
-  border-bottom-width: 2px;
+  border-bottom-width: 0.125rem;
 }
 
 .bl-input-sm,
@@ -3330,7 +3384,7 @@ textarea {
   right: 0;
   bottom: 0;
   background: var(--glass-bg-medium);
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--border-radius-full);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -3345,7 +3399,7 @@ textarea {
   left: var(--form-switch-slider-offset);
   bottom: var(--form-switch-slider-offset);
   background: var(--glass-bg-heavy);
-  border: 1px solid var(--glass-border-light);
+  border: 0.0625rem solid var(--glass-border-light);
   border-radius: var(--border-radius-full);
   transition: var(--transition-base);
 }
@@ -3356,7 +3410,7 @@ textarea {
   padding: var(--form-file-input-padding);
   font-size: var(--form-file-input-font-size);
   color: var(--color-text);
-  border: 1px dashed var(--glass-border-medium);
+  border: 0.0625rem dashed var(--glass-border-medium);
   border-radius: var(--tech-border-radius-sm);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-md));
@@ -3387,7 +3441,7 @@ textarea {
   height: var(--form-range-thumb-size);
   border-radius: var(--tech-border-radius-sm);
   background: var(--form-range-thumb-bg);
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   cursor: pointer;
 }
 .bl-range::-moz-range-thumb {
@@ -3395,7 +3449,7 @@ textarea {
   height: var(--form-range-thumb-size);
   border-radius: var(--tech-border-radius-sm);
   background: var(--form-range-thumb-bg);
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   cursor: pointer;
 }
 
@@ -3413,7 +3467,7 @@ textarea {
 .bl-input-group .bl-select:not(:first-child) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  margin-left: -1px;
+  margin-left: -0.0625rem;
 }
 .bl-input-group .bl-input:not(:last-child),
 .bl-input-group .bl-select:not(:last-child) {
@@ -3421,28 +3475,109 @@ textarea {
   border-bottom-right-radius: 0;
 }
 
+@media (max-width: 575.98px) {
+  .bl-input,
+  .bl-select,
+  .bl-textarea {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-md);
+    font-size: 1rem;
+  }
+  .bl-form-label {
+    font-size: var(--font-size-base);
+    margin-bottom: var(--spacing-sm);
+  }
+  .bl-checkbox,
+  .bl-radio {
+    min-height: 2.75rem;
+    padding: var(--spacing-sm) 0;
+  }
+  .bl-checkbox input[type=checkbox],
+  .bl-checkbox input[type=radio],
+  .bl-radio input[type=checkbox],
+  .bl-radio input[type=radio] {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: var(--spacing-sm);
+  }
+  .bl-switch {
+    min-width: 3.5rem;
+    min-height: 2.25rem;
+  }
+  .bl-file-input {
+    min-height: 2.75rem;
+    padding: var(--spacing-md);
+  }
+  .bl-range {
+    height: 0.5rem;
+  }
+  .bl-range::-webkit-slider-thumb {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .bl-range::-moz-range-thumb {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .bl-input-sm,
+  .bl-select-sm {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+  .bl-input-lg,
+  .bl-select-lg {
+    min-height: 3rem;
+    padding: var(--spacing-lg) var(--spacing-lg);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-input,
+  .bl-select,
+  .bl-textarea {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+  .bl-checkbox,
+  .bl-radio {
+    min-height: 2.5rem;
+  }
+  .bl-checkbox input[type=checkbox],
+  .bl-checkbox input[type=radio],
+  .bl-radio input[type=checkbox],
+  .bl-radio input[type=radio] {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .bl-switch {
+    min-width: 3rem;
+    min-height: 2rem;
+  }
+  .bl-file-input {
+    min-height: 2.5rem;
+  }
+}
 .bl-card {
   display: flex;
   flex-direction: column;
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-md);
   overflow: hidden;
   transition: var(--transition-base);
   position: relative;
 }
 .bl-card.bl-card-accent-left {
-  border-left: 4px solid var(--color-accent);
+  border-left: 0.25rem solid var(--color-accent);
 }
 .bl-card.bl-card-accent-right {
-  border-right: 4px solid var(--color-accent);
+  border-right: 0.25rem solid var(--color-accent);
 }
 
 .bl-card-header {
   padding: var(--spacing-md);
-  border-bottom: 1px solid var(--glass-border-light);
+  border-bottom: 0.0625rem solid var(--glass-border-light);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -3469,7 +3604,7 @@ textarea {
 
 .bl-card-footer {
   padding: var(--spacing-md);
-  border-top: 1px solid var(--glass-border-light);
+  border-top: 0.0625rem solid var(--glass-border-light);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -3499,12 +3634,40 @@ textarea {
   border-color: var(--glass-border-heavy);
 }
 
+@media (max-width: 575.98px) {
+  .bl-card {
+    border-radius: var(--tech-border-radius-sm);
+  }
+  .bl-card-header {
+    padding: var(--spacing-lg);
+  }
+  .bl-card-body {
+    padding: var(--spacing-lg);
+  }
+  .bl-card-footer {
+    padding: var(--spacing-lg);
+  }
+  .bl-card-title {
+    font-size: var(--font-size-xl);
+  }
+  .bl-card-subtitle {
+    font-size: var(--font-size-base);
+    margin-top: var(--spacing-sm);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-card-header,
+  .bl-card-body,
+  .bl-card-footer {
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+}
 .bl-alert {
   position: relative;
   padding: var(--spacing-md);
   margin-bottom: var(--spacing-md);
-  border: 1px solid var(--glass-border-medium);
-  border-left-width: 2px;
+  border: 0.0625rem solid var(--glass-border-medium);
+  border-left-width: 0.125rem;
   border-radius: var(--tech-border-radius-md);
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
@@ -3583,6 +3746,37 @@ textarea {
   line-height: 1;
 }
 
+@media (max-width: 575.98px) {
+  .bl-alert {
+    padding: var(--spacing-lg);
+  }
+  .bl-alert-close {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    padding: var(--spacing-sm);
+    top: var(--spacing-sm);
+    right: var(--spacing-sm);
+  }
+  .bl-alert-close::before {
+    font-size: var(--font-size-2xl);
+  }
+  .bl-alert-title {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-sm);
+  }
+  .bl-alert-message {
+    font-size: var(--font-size-base);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-alert {
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+  .bl-alert-close {
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+  }
+}
 .bl-badge {
   display: inline-flex;
   align-items: stretch;
@@ -3593,7 +3787,7 @@ textarea {
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: var(--tech-border-radius-sm);
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
 }
 
 .bl-badge-label {
@@ -3604,7 +3798,7 @@ textarea {
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
   color: var(--color-text-muted);
-  border-right: 1px solid var(--glass-border-medium);
+  border-right: 0.0625rem solid var(--glass-border-medium);
   flex-shrink: 0;
 }
 
@@ -3665,6 +3859,41 @@ textarea {
   padding: var(--spacing-sm) var(--spacing-md);
 }
 
+@media (max-width: 575.98px) {
+  .bl-badge {
+    font-size: var(--font-size-sm);
+  }
+  .bl-badge-label,
+  .bl-badge-value {
+    padding: var(--spacing-sm) var(--spacing-md);
+    min-height: 2rem;
+  }
+  .bl-badge-sm {
+    font-size: var(--font-size-xs);
+  }
+  .bl-badge-sm .bl-badge-label,
+  .bl-badge-sm .bl-badge-value {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    min-height: 1.75rem;
+  }
+  .bl-badge-lg {
+    font-size: var(--font-size-base);
+  }
+  .bl-badge-lg .bl-badge-label,
+  .bl-badge-lg .bl-badge-value {
+    padding: var(--spacing-md) var(--spacing-lg);
+    min-height: 2.5rem;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-badge {
+    font-size: var(--font-size-xs);
+  }
+  .bl-badge-label,
+  .bl-badge-value {
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+}
 .bl-modal {
   position: fixed;
   top: 0;
@@ -3683,6 +3912,12 @@ textarea {
 .bl-modal.bl-modal-open {
   display: flex;
 }
+@media (max-width: 575.98px) {
+  .bl-modal {
+    padding: var(--spacing-sm);
+    align-items: flex-end;
+  }
+}
 
 .bl-modal-backdrop {
   position: absolute;
@@ -3706,24 +3941,31 @@ textarea {
 .bl-modal-dialog {
   position: relative;
   width: 100%;
-  max-width: 500px;
+  max-width: 31.25rem;
   margin: 0;
   pointer-events: none;
   z-index: 10;
 }
+@media (max-width: 575.98px) {
+  .bl-modal-dialog {
+    max-width: 100%;
+    width: calc(100% - var(--spacing-md) * 2);
+    margin: var(--spacing-sm);
+  }
+}
 @media (min-width: 576px) {
   .bl-modal-dialog {
-    max-width: 500px;
+    max-width: 31.25rem;
   }
 }
 @media (min-width: 768px) {
   .bl-modal-dialog {
-    max-width: 600px;
+    max-width: 37.5rem;
   }
 }
 @media (min-width: 1024px) {
   .bl-modal-dialog {
-    max-width: 800px;
+    max-width: 50rem;
   }
 }
 .bl-modal.bl-modal-open.bl-modal-top-left .bl-modal-dialog {
@@ -3790,7 +4032,7 @@ textarea {
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-xl));
   -webkit-backdrop-filter: blur(var(--glass-blur-xl));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-md);
   outline: 0;
 }
@@ -3800,11 +4042,16 @@ textarea {
   align-items: flex-start;
   justify-content: space-between;
   padding: var(--spacing-md);
-  border-bottom: 1px solid var(--glass-border-light);
+  border-bottom: 0.0625rem solid var(--glass-border-light);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
 }
+@media (max-width: 575.98px) {
+  .bl-modal-header {
+    padding: var(--spacing-lg);
+  }
+}
 
 .bl-modal-title {
   margin: 0;
@@ -3835,6 +4082,17 @@ textarea {
   font-weight: var(--font-weight-bold);
   line-height: 1;
 }
+@media (max-width: 575.98px) {
+  .bl-modal-close {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    padding: var(--spacing-sm);
+    margin: calc(var(--spacing-sm) * -1) calc(var(--spacing-sm) * -1) calc(var(--spacing-sm) * -1) auto;
+  }
+  .bl-modal-close::before {
+    font-size: var(--font-size-3xl);
+  }
+}
 
 .bl-modal-body {
   position: relative;
@@ -3842,6 +4100,11 @@ textarea {
   padding: var(--spacing-md);
   color: var(--color-text);
 }
+@media (max-width: 575.98px) {
+  .bl-modal-body {
+    padding: var(--spacing-lg);
+  }
+}
 
 .bl-modal-footer {
   display: flex;
@@ -3849,7 +4112,7 @@ textarea {
   align-items: center;
   justify-content: flex-end;
   padding: var(--spacing-md);
-  border-top: 1px solid var(--glass-border-light);
+  border-top: 0.0625rem solid var(--glass-border-light);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -3857,22 +4120,33 @@ textarea {
 .bl-modal-footer > * {
   margin: var(--spacing-xs);
 }
+@media (max-width: 575.98px) {
+  .bl-modal-footer {
+    padding: var(--spacing-lg);
+    flex-direction: column;
+    gap: var(--spacing-sm);
+  }
+  .bl-modal-footer > * {
+    width: 100%;
+    margin: 0;
+  }
+}
 
 @media (min-width: 576px) {
   .bl-modal-sm .bl-modal-dialog {
-    max-width: 300px;
+    max-width: 18.75rem;
   }
 }
 
 @media (min-width: 1024px) {
   .bl-modal-lg .bl-modal-dialog {
-    max-width: 1000px;
+    max-width: 62.5rem;
   }
 }
 
 @media (min-width: 1024px) {
   .bl-modal-xl .bl-modal-dialog {
-    max-width: 1200px;
+    max-width: 75rem;
   }
 }
 
@@ -4159,11 +4433,11 @@ textarea {
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-lg));
   -webkit-backdrop-filter: blur(var(--glass-blur-lg));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-md);
   overflow: hidden;
   overflow-y: auto;
-  max-height: 300px;
+  max-height: 18.75rem;
   box-shadow: var(--glass-shadow-lg);
 }
 .bl-dropdown-menu.bl-show {
@@ -4214,7 +4488,7 @@ textarea {
   height: 0;
   margin: var(--spacing-xs) 0;
   overflow: hidden;
-  border-top: 1px solid var(--glass-border-light);
+  border-top: 0.0625rem solid var(--glass-border-light);
 }
 
 .bl-dropdown-header {
@@ -4227,6 +4501,36 @@ textarea {
   white-space: nowrap;
 }
 
+@media (max-width: 575.98px) {
+  .bl-dropdown-menu {
+    min-width: 100%;
+    max-width: 100vw;
+    margin: var(--spacing-xs) 0;
+    max-height: 50vh;
+  }
+  .bl-dropdown-item {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--font-size-base);
+  }
+  .bl-dropdown-header {
+    min-height: 2.5rem;
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--font-size-sm);
+  }
+  .bl-dropdown-divider {
+    margin: var(--spacing-sm) 0;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-dropdown-menu {
+    min-width: 12rem;
+  }
+  .bl-dropdown-item {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+}
 .bl-nav {
   display: flex;
   flex-wrap: wrap;
@@ -4259,14 +4563,14 @@ textarea {
   background: var(--glass-bg-medium);
 }
 .bl-nav-link:focus {
-  outline: 1px solid var(--color-border-focus);
-  outline-offset: -2px;
+  outline: 0.0625rem solid var(--color-border-focus);
+  outline-offset: -0.125rem;
 }
 .bl-nav-link.bl-active {
   color: var(--color-text);
   font-weight: var(--font-weight-semibold);
   background: var(--glass-bg-heavy);
-  border-bottom: 2px solid var(--color-accent);
+  border-bottom: 0.125rem solid var(--color-accent);
 }
 .bl-nav-link.bl-disabled {
   color: var(--color-text-muted);
@@ -4289,13 +4593,13 @@ textarea {
 }
 
 .bl-nav-tabs {
-  border-bottom: 1px solid var(--glass-border-light);
+  border-bottom: 0.0625rem solid var(--glass-border-light);
   background: transparent;
   padding: 0;
 }
 .bl-nav-tabs .bl-nav-link {
-  margin-bottom: -1px;
-  border: 1px solid transparent;
+  margin-bottom: -0.0625rem;
+  border: 0.0625rem solid transparent;
   border-top-left-radius: var(--tech-border-radius-sm);
   border-top-right-radius: var(--tech-border-radius-sm);
   background: transparent;
@@ -4309,7 +4613,7 @@ textarea {
   color: var(--color-text);
   background: var(--glass-bg-medium);
   border-color: var(--glass-border-medium) var(--glass-border-medium) transparent;
-  border-bottom: 2px solid var(--color-accent);
+  border-bottom: 0.125rem solid var(--color-accent);
 }
 
 .bl-nav-pills .bl-nav-link {
@@ -4318,7 +4622,7 @@ textarea {
 .bl-nav-pills .bl-nav-link.bl-active {
   color: var(--color-text);
   background: var(--glass-bg-heavy);
-  border-bottom: 2px solid var(--color-accent);
+  border-bottom: 0.125rem solid var(--color-accent);
 }
 
 .bl-breadcrumb {
@@ -4382,12 +4686,12 @@ textarea {
   position: relative;
   display: block;
   padding: var(--spacing-sm) var(--spacing-md);
-  margin-left: -1px;
+  margin-left: -0.0625rem;
   line-height: var(--line-height-base);
   color: var(--color-text);
   text-decoration: none;
   background: var(--glass-bg-light);
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
   transition: var(--transition-base);
@@ -4401,10 +4705,46 @@ textarea {
 }
 .bl-page-link:focus {
   z-index: 2;
-  outline: 1px solid var(--color-border-focus);
-  outline-offset: -2px;
+  outline: 0.0625rem solid var(--color-border-focus);
+  outline-offset: -0.125rem;
 }
 
+@media (max-width: 575.98px) {
+  .bl-nav-horizontal {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    flex-wrap: nowrap;
+    scrollbar-width: thin;
+  }
+  .bl-nav-horizontal::-webkit-scrollbar {
+    height: 0.25rem;
+  }
+  .bl-nav-link {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-sm);
+    white-space: nowrap;
+  }
+  .bl-nav-tabs .bl-nav-link {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+  .bl-page-link {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-nav-link {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+  .bl-nav-tabs .bl-nav-link {
+    min-height: 2.5rem;
+  }
+  .bl-page-link {
+    min-height: 2.5rem;
+  }
+}
 .bl-table {
   width: 100%;
   margin-bottom: var(--spacing-md);
@@ -4414,16 +4754,16 @@ textarea {
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-md);
   overflow: hidden;
 }
 .bl-table > :not(caption) > * > * {
   padding: var(--spacing-sm) var(--spacing-md);
   background-color: transparent;
-  border-bottom-width: 1px;
+  border-bottom-width: 0.0625rem;
   border-bottom-color: var(--glass-border-light);
-  border-right-width: 1px;
+  border-right-width: 0.0625rem;
   border-right-color: var(--glass-border-light);
   box-shadow: inset 0 0 0 9999px transparent;
 }
@@ -4437,7 +4777,7 @@ textarea {
   vertical-align: bottom;
 }
 .bl-table > :not(:first-child) {
-  border-top: 1px solid var(--glass-border-light);
+  border-top: 0.0625rem solid var(--glass-border-light);
 }
 
 .bl-table-caption {
@@ -4465,13 +4805,13 @@ textarea {
 }
 
 .bl-table-bordered {
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
 }
 .bl-table-bordered > :not(caption) > * {
-  border-width: 1px 0;
+  border-width: 0.0625rem 0;
 }
 .bl-table-bordered > :not(caption) > * > * {
-  border-width: 0 1px;
+  border-width: 0 0.0625rem;
   border-color: var(--glass-border-light);
 }
 
@@ -4552,6 +4892,39 @@ textarea {
     margin-bottom: 0;
   }
 }
+@media (max-width: 575.98px) {
+  .bl-table {
+    font-size: var(--font-size-sm);
+  }
+  .bl-table > :not(caption) > * > * {
+    padding: var(--spacing-sm) var(--spacing-xs);
+    font-size: var(--font-size-xs);
+  }
+  .bl-table-head {
+    font-size: var(--font-size-sm);
+  }
+  .bl-table-sm > :not(caption) > * > * {
+    padding: var(--spacing-xs);
+    font-size: 0.625rem;
+  }
+  .bl-table-lg > :not(caption) > * > * {
+    padding: var(--spacing-md) var(--spacing-sm);
+    font-size: var(--font-size-sm);
+  }
+  .bl-table-caption {
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-xs) 0;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-table > :not(caption) > * > * {
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-sm);
+  }
+  .bl-table-head {
+    font-size: var(--font-size-base);
+  }
+}
 .bl-tooltip {
   position: relative;
   display: inline-block;
@@ -4565,7 +4938,7 @@ textarea {
   position: absolute;
   z-index: var(--z-index-tooltip);
   display: none;
-  max-width: 200px;
+  max-width: 12.5rem;
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--font-size-xs);
   font-family: var(--font-family-mono);
@@ -4577,7 +4950,7 @@ textarea {
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-sm);
   opacity: 0;
   transition: var(--transition-opacity);
@@ -4599,9 +4972,9 @@ textarea {
   left: 50%;
   width: 0;
   height: 0;
-  margin-left: -6px;
+  margin-left: -0.375rem;
   content: "";
-  border-width: 6px 6px 0 6px;
+  border-width: 0.375rem 0.375rem 0 0.375rem;
   border-style: solid;
   border-color: var(--glass-bg-medium) transparent transparent transparent;
   clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
@@ -4619,9 +4992,9 @@ textarea {
   left: 50%;
   width: 0;
   height: 0;
-  margin-left: -6px;
+  margin-left: -0.375rem;
   content: "";
-  border-width: 0 6px 6px 6px;
+  border-width: 0 0.375rem 0.375rem 0.375rem;
   border-style: solid;
   border-color: transparent transparent var(--glass-bg-medium) transparent;
   clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
@@ -4639,9 +5012,9 @@ textarea {
   left: 100%;
   width: 0;
   height: 0;
-  margin-top: -6px;
+  margin-top: -0.375rem;
   content: "";
-  border-width: 6px 0 6px 6px;
+  border-width: 0.375rem 0 0.375rem 0.375rem;
   border-style: solid;
   border-color: transparent transparent transparent var(--glass-bg-medium);
   clip-path: polygon(0 20%, 0 80%, 100% 100%, 100% 0);
@@ -4659,14 +5032,34 @@ textarea {
   right: 100%;
   width: 0;
   height: 0;
-  margin-top: -6px;
+  margin-top: -0.375rem;
   content: "";
-  border-width: 6px 6px 6px 0;
+  border-width: 0.375rem 0.375rem 0.375rem 0;
   border-style: solid;
   border-color: transparent var(--glass-bg-medium) transparent transparent;
   clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 20%);
 }
 
+@media (max-width: 575.98px) {
+  .bl-tooltip-content {
+    max-width: 90vw;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-sm);
+  }
+  .bl-tooltip-trigger {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-tooltip-content {
+    max-width: 15rem;
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+}
 .bl-progress {
   display: flex;
   height: 1rem;
@@ -4674,7 +5067,7 @@ textarea {
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-sm);
 }
 
@@ -4722,6 +5115,28 @@ textarea {
   height: 1.5rem;
 }
 
+@media (max-width: 575.98px) {
+  .bl-progress {
+    height: 0.75rem;
+  }
+  .bl-progress-sm {
+    height: 0.625rem;
+  }
+  .bl-progress-lg {
+    height: 1.25rem;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-progress {
+    height: 0.875rem;
+  }
+  .bl-progress-sm {
+    height: 0.625rem;
+  }
+  .bl-progress-lg {
+    height: 1.375rem;
+  }
+}
 .bl-spinner {
   display: inline-block;
   width: 2rem;
@@ -4739,10 +5154,10 @@ textarea {
 .bl-spinner::before {
   content: "";
   position: absolute;
-  top: 2px;
-  left: 2px;
-  right: 2px;
-  bottom: 2px;
+  top: 0.125rem;
+  left: 0.125rem;
+  right: 0.125rem;
+  bottom: 0.125rem;
   background: var(--color-accent);
   opacity: 0.3;
   border-radius: var(--tech-border-radius-sm);
@@ -4827,6 +5242,42 @@ textarea {
   border-width: var(--border-width-base);
 }
 
+@media (max-width: 575.98px) {
+  .bl-spinner {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .bl-spinner-sm {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .bl-spinner-lg {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+  .bl-spinner-xl {
+    width: 5rem;
+    height: 5rem;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-spinner {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+  .bl-spinner-sm {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .bl-spinner-lg {
+    width: 3.25rem;
+    height: 3.25rem;
+  }
+  .bl-spinner-xl {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+}
 .bl-sidebar-toggle {
   display: inline-flex;
   align-items: center;
@@ -4835,7 +5286,7 @@ textarea {
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-sm);
   color: var(--color-text);
   cursor: pointer;
@@ -4846,8 +5297,8 @@ textarea {
   border-color: var(--glass-border-heavy);
 }
 .bl-sidebar-toggle:focus {
-  outline: 1px solid var(--color-border-focus);
-  outline-offset: 2px;
+  outline: 0.0625rem solid var(--color-border-focus);
+  outline-offset: 0.125rem;
 }
 @media (min-width: 768px) {
   .bl-sidebar-toggle {
@@ -4860,14 +5311,14 @@ textarea {
   top: 0;
   left: 0;
   z-index: var(--z-index-sidebar);
-  width: 280px;
+  width: 17.5rem;
   height: 100vh;
   display: flex;
   flex-direction: column;
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-lg));
   -webkit-backdrop-filter: blur(var(--glass-blur-lg));
-  border-right: 1px solid var(--glass-border-medium);
+  border-right: 0.0625rem solid var(--glass-border-medium);
   box-shadow: var(--glass-shadow-lg);
   transform: translateX(-100%);
   transition: transform var(--transition-duration-slow) var(--transition-ease-out);
@@ -4875,20 +5326,20 @@ textarea {
 }
 @media (max-width: 767.98px) {
   .bl-sidebar {
-    width: min(85%, 320px);
+    width: min(85%, 20rem);
     max-width: 90vw;
   }
 }
 .bl-sidebar::-webkit-scrollbar {
-  width: 6px;
+  width: 0.375rem;
 }
 .bl-sidebar::-webkit-scrollbar-track {
   background: transparent;
 }
 .bl-sidebar::-webkit-scrollbar-thumb {
   background: var(--glass-bg-medium);
-  border-radius: 3px;
-  border: 1px solid var(--glass-border-light);
+  border-radius: 0.1875rem;
+  border: 0.0625rem solid var(--glass-border-light);
 }
 .bl-sidebar::-webkit-scrollbar-thumb:hover {
   background: var(--glass-bg-heavy);
@@ -4905,8 +5356,8 @@ textarea {
     height: auto;
     min-height: 100vh;
     box-shadow: none;
-    border-right: 1px solid var(--glass-border-medium);
-    width: 280px;
+    border-right: 0.0625rem solid var(--glass-border-medium);
+    width: 17.5rem;
   }
 }
 .bl-sidebar.bl-sidebar-open {
@@ -4914,7 +5365,7 @@ textarea {
 }
 @media (min-width: 768px) {
   .bl-sidebar.bl-sidebar-collapsed {
-    width: 64px;
+    width: 4rem;
   }
   .bl-sidebar.bl-sidebar-collapsed .bl-sidebar-header h3,
   .bl-sidebar.bl-sidebar-collapsed .bl-sidebar-nav .bl-nav-link span:not(.bl-icon),
@@ -4935,7 +5386,7 @@ textarea {
   left: auto;
   right: 0;
   border-right: none;
-  border-left: 1px solid var(--glass-border-medium);
+  border-left: 0.0625rem solid var(--glass-border-medium);
   transform: translateX(100%);
 }
 .bl-sidebar.bl-sidebar-right.bl-sidebar-open {
@@ -4997,7 +5448,7 @@ textarea {
   align-items: center;
   justify-content: space-between;
   padding: var(--spacing-lg) var(--spacing-md);
-  border-bottom: 1px solid var(--glass-border-medium);
+  border-bottom: 0.0625rem solid var(--glass-border-medium);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -5022,11 +5473,11 @@ textarea {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 2rem;
+  height: 2rem;
   padding: 0;
   background: transparent;
-  border: 1px solid transparent;
+  border: 0.0625rem solid transparent;
   border-radius: var(--tech-border-radius-sm);
   color: var(--color-text);
   cursor: pointer;
@@ -5039,8 +5490,8 @@ textarea {
   border-color: var(--glass-border-medium);
 }
 .bl-sidebar-close:focus {
-  outline: 1px solid var(--color-border-focus);
-  outline-offset: 2px;
+  outline: 0.0625rem solid var(--color-border-focus);
+  outline-offset: 0.125rem;
 }
 @media (min-width: 768px) {
   .bl-sidebar-close {
@@ -5063,15 +5514,15 @@ textarea {
   }
 }
 .bl-sidebar-nav::-webkit-scrollbar {
-  width: 6px;
+  width: 0.375rem;
 }
 .bl-sidebar-nav::-webkit-scrollbar-track {
   background: transparent;
 }
 .bl-sidebar-nav::-webkit-scrollbar-thumb {
   background: var(--glass-bg-medium);
-  border-radius: 3px;
-  border: 1px solid var(--glass-border-light);
+  border-radius: 0.1875rem;
+  border: 0.0625rem solid var(--glass-border-light);
 }
 .bl-sidebar-nav::-webkit-scrollbar-thumb:hover {
   background: var(--glass-bg-heavy);
@@ -5099,12 +5550,12 @@ textarea {
   line-height: var(--line-height-base);
   color: var(--color-text);
   text-decoration: none;
-  min-height: 40px;
+  min-height: 2.5rem;
 }
 @media (max-width: 767.98px) {
   .bl-sidebar-nav .bl-nav-link {
     padding: var(--spacing-md);
-    min-height: 44px;
+    min-height: 2.75rem;
   }
 }
 .bl-sidebar-nav .bl-nav-link span:not(.bl-icon) {
@@ -5113,27 +5564,27 @@ textarea {
 }
 .bl-sidebar-nav .bl-nav-link .bl-icon {
   flex-shrink: 0;
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   color: var(--color-text-muted);
   transition: var(--transition-base);
 }
 .bl-sidebar-nav .bl-nav-link:hover {
   background: var(--glass-bg-light);
   color: var(--color-text);
-  transform: translateX(2px);
+  transform: translateX(0.125rem);
 }
 .bl-sidebar-nav .bl-nav-link:hover .bl-icon {
   color: var(--color-text);
 }
 .bl-sidebar-nav .bl-nav-link:active {
-  transform: translateX(1px);
+  transform: translateX(0.0625rem);
 }
 .bl-sidebar-nav .bl-nav-link.bl-active {
   background: var(--glass-bg-medium);
   color: var(--color-text);
   font-weight: var(--font-weight-medium);
-  padding-left: calc(var(--spacing-md) - 3px);
+  padding-left: calc(var(--spacing-md) - 0.1875rem);
   transform: translateX(0);
 }
 .bl-sidebar-nav .bl-nav-link.bl-active::before {
@@ -5142,7 +5593,7 @@ textarea {
   left: 0;
   top: 0;
   bottom: 0;
-  width: 3px;
+  width: 0.1875rem;
   background: var(--color-accent);
   border-radius: 0 var(--tech-border-radius-sm) var(--tech-border-radius-sm) 0;
 }
@@ -5154,8 +5605,8 @@ textarea {
   transform: translateX(0);
 }
 .bl-sidebar-nav .bl-nav-link:focus {
-  outline: 1px solid var(--color-border-focus);
-  outline-offset: -2px;
+  outline: 0.0625rem solid var(--color-border-focus);
+  outline-offset: -0.125rem;
 }
 
 .bl-nav-group {
@@ -5169,7 +5620,7 @@ textarea {
 }
 .bl-nav-group + .bl-nav-group {
   padding-top: var(--spacing-md);
-  border-top: 1px solid var(--glass-border-light);
+  border-top: 0.0625rem solid var(--glass-border-light);
   margin-top: var(--spacing-lg);
 }
 
@@ -5188,7 +5639,7 @@ textarea {
 
 .bl-sidebar-footer {
   padding: var(--spacing-md);
-  border-top: 1px solid var(--glass-border-medium);
+  border-top: 0.0625rem solid var(--glass-border-medium);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -5244,7 +5695,7 @@ textarea {
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-sm);
   overflow: hidden;
   transition: var(--transition-base);
@@ -5273,8 +5724,8 @@ textarea {
   background: var(--glass-bg-light);
 }
 .bl-accordion-header:focus {
-  outline: 1px solid var(--color-border-focus);
-  outline-offset: -2px;
+  outline: 0.0625rem solid var(--color-border-focus);
+  outline-offset: -0.125rem;
 }
 .bl-accordion-header span:first-child {
   flex: 1;
@@ -5284,8 +5735,8 @@ textarea {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
   margin-left: var(--spacing-sm);
   transition: transform var(--transition-duration-base) var(--transition-ease-in-out);
   flex-shrink: 0;
@@ -5308,7 +5759,7 @@ textarea {
 .bl-accordion-item.bl-accordion-open .bl-accordion-body {
   max-height: 2000px;
   padding: var(--spacing-md);
-  border-top: 1px solid var(--glass-border-light);
+  border-top: 0.0625rem solid var(--glass-border-light);
 }
 
 .bl-accordion-flush .bl-accordion-item {
@@ -5334,6 +5785,46 @@ textarea {
   border-color: var(--glass-border-medium);
 }
 
+@media (max-width: 575.98px) {
+  .bl-accordion-header {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--font-size-base);
+  }
+  .bl-accordion-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-left: var(--spacing-md);
+  }
+  .bl-accordion-body {
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+  .bl-accordion-body.bl-show {
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+  .bl-accordion-item.bl-accordion-open .bl-accordion-body {
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-accordion-header {
+    min-height: 2.5rem;
+    padding: var(--spacing-md) var(--spacing-md);
+  }
+  .bl-accordion-icon {
+    width: 1.375rem;
+    height: 1.375rem;
+  }
+  .bl-accordion-body {
+    padding: var(--spacing-md);
+  }
+  .bl-accordion-body.bl-show {
+    padding: var(--spacing-md);
+  }
+  .bl-accordion-item.bl-accordion-open .bl-accordion-body {
+    padding: var(--spacing-md);
+  }
+}
 .bl-toast-container {
   position: fixed;
   z-index: var(--z-index-toast);
@@ -5370,7 +5861,7 @@ textarea {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
-  max-width: 400px;
+  max-width: 25rem;
   width: 100%;
 }
 @media (max-width: 575.98px) {
@@ -5388,12 +5879,12 @@ textarea {
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-lg));
   -webkit-backdrop-filter: blur(var(--glass-blur-lg));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-md);
   box-shadow: var(--glass-shadow-lg);
   color: var(--color-text);
   pointer-events: all;
-  min-width: 300px;
+  min-width: 18.75rem;
   max-width: 100%;
   animation: bl-toast-slide-in var(--transition-duration-base) var(--transition-ease-out);
 }
@@ -5432,8 +5923,8 @@ textarea {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 1.5rem;
+  height: 1.5rem;
   padding: 0;
   background: transparent;
   border: none;
@@ -5450,33 +5941,33 @@ textarea {
   color: var(--color-text);
 }
 .bl-toast-close:focus {
-  outline: 1px solid var(--color-border-focus);
-  outline-offset: 2px;
+  outline: 0.0625rem solid var(--color-border-focus);
+  outline-offset: 0.125rem;
 }
 
 .bl-toast-success {
-  border-left: 4px solid var(--color-success);
+  border-left: 0.25rem solid var(--color-success);
 }
 .bl-toast-success .bl-toast-title {
   color: var(--color-success);
 }
 
 .bl-toast-error {
-  border-left: 4px solid var(--color-error);
+  border-left: 0.25rem solid var(--color-error);
 }
 .bl-toast-error .bl-toast-title {
   color: var(--color-error);
 }
 
 .bl-toast-warning {
-  border-left: 4px solid var(--color-warning);
+  border-left: 0.25rem solid var(--color-warning);
 }
 .bl-toast-warning .bl-toast-title {
   color: var(--color-warning);
 }
 
 .bl-toast-info {
-  border-left: 4px solid var(--color-info);
+  border-left: 0.25rem solid var(--color-info);
 }
 .bl-toast-info .bl-toast-title {
   color: var(--color-info);
@@ -5486,8 +5977,8 @@ textarea {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 1.5rem;
+  height: 1.5rem;
   flex-shrink: 0;
   font-size: 1.25rem;
 }
@@ -5495,7 +5986,7 @@ textarea {
 @keyframes bl-toast-slide-in {
   from {
     opacity: 0;
-    transform: translateY(-20px);
+    transform: translateY(-1.25rem);
   }
   to {
     opacity: 1;
@@ -5509,7 +6000,7 @@ textarea {
   }
   to {
     opacity: 0;
-    transform: translateY(-20px);
+    transform: translateY(-1.25rem);
   }
 }
 .bl-toast-container.bl-toast-bottom-left .bl-toast,
@@ -5526,7 +6017,7 @@ textarea {
 @keyframes bl-toast-slide-in-bottom {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(1.25rem);
   }
   to {
     opacity: 1;
@@ -5540,13 +6031,13 @@ textarea {
   }
   to {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(1.25rem);
   }
 }
 .bl-divider {
   display: block;
   width: 100%;
-  height: 1px;
+  height: 0.0625rem;
   margin: var(--spacing-md) 0;
   background: var(--glass-border-medium);
   border: none;
@@ -5565,7 +6056,7 @@ textarea {
 .bl-divider-text::before, .bl-divider-text::after {
   content: "";
   flex: 1;
-  height: 1px;
+  height: 0.0625rem;
   background: var(--glass-border-medium);
   opacity: 0.5;
 }
@@ -5578,7 +6069,7 @@ textarea {
 
 .bl-divider-vertical {
   display: inline-block;
-  width: 1px;
+  width: 0.0625rem;
   height: 100%;
   min-height: 1rem;
   margin: 0 var(--spacing-md);
@@ -5601,34 +6092,61 @@ textarea {
 }
 
 .bl-divider-thick {
-  height: 2px;
+  height: 0.125rem;
 }
 .bl-divider-thick.bl-divider-vertical {
-  width: 2px;
+  width: 0.125rem;
   height: 100%;
 }
 
 .bl-divider-dashed {
   background: none;
-  border-top: 1px dashed var(--glass-border-medium);
+  border-top: 0.0625rem dashed var(--glass-border-medium);
   opacity: 0.5;
 }
 .bl-divider-dashed.bl-divider-vertical {
   border-top: none;
-  border-left: 1px dashed var(--glass-border-medium);
+  border-left: 0.0625rem dashed var(--glass-border-medium);
 }
 
+@media (max-width: 575.98px) {
+  .bl-divider {
+    margin: var(--spacing-lg) 0;
+  }
+  .bl-divider-text {
+    margin: var(--spacing-lg) 0;
+    font-size: var(--font-size-base);
+  }
+  .bl-divider-text::before {
+    margin-right: var(--spacing-sm);
+  }
+  .bl-divider-text::after {
+    margin-left: var(--spacing-sm);
+  }
+  .bl-divider-vertical {
+    margin: 0 var(--spacing-md);
+    min-height: 2rem;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-divider {
+    margin: var(--spacing-md) 0;
+  }
+  .bl-divider-text {
+    margin: var(--spacing-md) 0;
+  }
+}
 .bl-avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   border-radius: 50%;
   background: var(--glass-bg-medium);
   backdrop-filter: blur(var(--glass-blur-md));
   -webkit-backdrop-filter: blur(var(--glass-blur-md));
-  border: 1px solid var(--glass-border-medium);
+  border: 0.0625rem solid var(--glass-border-medium);
   overflow: hidden;
   flex-shrink: 0;
   position: relative;
@@ -5655,8 +6173,8 @@ img ~ .bl-avatar::before {
 }
 
 .bl-avatar-sm {
-  width: 32px;
-  height: 32px;
+  width: 2rem;
+  height: 2rem;
   font-size: var(--font-size-sm);
 }
 .bl-avatar-sm::before {
@@ -5664,8 +6182,8 @@ img ~ .bl-avatar::before {
 }
 
 .bl-avatar-md {
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   font-size: var(--font-size-base);
 }
 .bl-avatar-md::before {
@@ -5673,8 +6191,8 @@ img ~ .bl-avatar::before {
 }
 
 .bl-avatar-lg {
-  width: 56px;
-  height: 56px;
+  width: 3.5rem;
+  height: 3.5rem;
   font-size: var(--font-size-lg);
 }
 .bl-avatar-lg::before {
@@ -5682,8 +6200,8 @@ img ~ .bl-avatar::before {
 }
 
 .bl-avatar-xl {
-  width: 80px;
-  height: 80px;
+  width: 5rem;
+  height: 5rem;
   font-size: var(--font-size-xl);
 }
 .bl-avatar-xl::before {
@@ -5694,21 +6212,21 @@ img ~ .bl-avatar::before {
   position: absolute;
   bottom: 0;
   right: 0;
-  width: 12px;
-  height: 12px;
+  width: 0.75rem;
+  height: 0.75rem;
   border-radius: 50%;
-  border: 2px solid var(--color-bg);
+  border: 0.125rem solid var(--color-bg);
   background: var(--color-success);
 }
 .bl-avatar-status.bl-avatar-status-sm {
-  width: 10px;
-  height: 10px;
-  border-width: 1.5px;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-width: 0.09375rem;
 }
 .bl-avatar-status.bl-avatar-status-lg {
-  width: 14px;
-  height: 14px;
-  border-width: 2.5px;
+  width: 0.875rem;
+  height: 0.875rem;
+  border-width: 0.15625rem;
 }
 
 .bl-avatar-status-online {
@@ -5758,6 +6276,36 @@ img ~ .bl-avatar::before {
   border-radius: var(--tech-border-radius-md);
 }
 
+@media (max-width: 575.98px) {
+  .bl-avatar-status {
+    width: 1rem;
+    height: 1rem;
+    border-width: 0.1875rem;
+  }
+  .bl-avatar-status.bl-avatar-status-sm {
+    width: 0.875rem;
+    height: 0.875rem;
+    border-width: 0.125rem;
+  }
+  .bl-avatar-status.bl-avatar-status-lg {
+    width: 1.125rem;
+    height: 1.125rem;
+    border-width: 0.25rem;
+  }
+  .bl-avatar-group .bl-avatar {
+    margin-left: calc(var(--spacing-sm) * -1);
+  }
+  .bl-avatar-group .bl-avatar:hover {
+    transform: translateX(var(--spacing-sm));
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-avatar-status {
+    width: 0.875rem;
+    height: 0.875rem;
+    border-width: 0.15625rem;
+  }
+}
 .bl-icon {
   display: inline-block;
   font-family: "Baseline Icons";