@rhavenside/baseline-ui 1.0.0

package/dist/baseline.css

@@ -0,0 +1,4811 @@
+@charset "UTF-8";
+:root {
+  --color-base: #1A1A1A;
+  --color-base-light: #2A2A2A;
+  --color-base-dark: #0F0F0F;
+  --color-accent: #4A9EFF;
+  --color-accent-light: #6BB0FF;
+  --color-accent-dark: #3A8EEF;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+  --color-primary: #4A9EFF;
+  --color-primary-light: #6BB0FF;
+  --color-primary-dark: #3A8EEF;
+  --color-secondary: #4b5563;
+  --color-secondary-light: #6b7280;
+  --color-secondary-dark: #374151;
+  --color-success: #10b981;
+  --color-success-light: #34d399;
+  --color-success-dark: #059669;
+  --color-warning: #f59e0b;
+  --color-warning-light: #fbbf24;
+  --color-warning-dark: #d97706;
+  --color-error: #ef4444;
+  --color-error-light: #f87171;
+  --color-error-dark: #dc2626;
+  --color-info: #4A9EFF;
+  --color-info-light: #6BB0FF;
+  --color-info-dark: #3A8EEF;
+  --color-text: #ffffff;
+  --color-text-muted: rgba(255, 255, 255, 0.7);
+  --color-text-light: rgba(255, 255, 255, 0.5);
+  --color-text-inverse: #1A1A1A;
+  --color-bg: #1A1A1A;
+  --color-bg-alt: #2A2A2A;
+  --color-bg-overlay: rgba(0, 0, 0, 0.3);
+  --color-border: rgba(255, 255, 255, 0.15);
+  --color-border-light: rgba(255, 255, 255, 0.1);
+  --color-border-dark: rgba(255, 255, 255, 0.2);
+  --color-border-focus: #4A9EFF;
+}
+
+:root {
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+  --spacing-4xl: 6rem;
+  --spacing-5xl: 8rem;
+}
+
+:root {
+  --font-family-base: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family-mono: SF Mono, Monaco, Cascadia Code, Roboto Mono, Consolas, Liberation Mono, Courier New, monospace;
+  --font-family-serif: Georgia, Times New Roman, Times, serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.75rem;
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-base: 1.5;
+  --line-height-relaxed: 1.75;
+  --line-height-loose: 2;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+}
+
+:root {
+  --border-width-none: 0;
+  --border-width-thin: 1px;
+  --border-width-base: 2px;
+  --border-width-thick: 4px;
+  --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-full: 9999px;
+}
+
+:root {
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --shadow-none: none;
+}
+
+:root {
+  --z-index-base: 0;
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1020;
+  --z-index-fixed: 1030;
+  --z-index-modal-backdrop: 1040;
+  --z-index-modal: 1050;
+  --z-index-popover: 1060;
+  --z-index-tooltip: 1070;
+}
+
+:root {
+  --transition-duration-fast: 100ms;
+  --transition-duration-base: 150ms;
+  --transition-duration-slow: 200ms;
+  --transition-duration-slower: 300ms;
+  --transition-ease-linear: linear;
+  --transition-ease-in: linear;
+  --transition-ease-out: linear;
+  --transition-ease-in-out: linear;
+  --transition-base: all 150ms linear;
+  --transition-colors: color 150ms linear, background-color 150ms linear, border-color 150ms linear;
+  --transition-opacity: opacity 150ms linear;
+  --transition-transform: transform 150ms linear;
+}
+
+:root {
+  --form-input-padding-x: 1rem;
+  --form-input-padding-y: 0.5rem;
+  --form-input-padding-x-sm: 0.5rem;
+  --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-font-size: 1rem;
+  --form-input-font-size-sm: 0.875rem;
+  --form-input-font-size-lg: 1.125rem;
+  --form-input-line-height: 1.5;
+  --form-input-bg: #1A1A1A;
+  --form-input-bg-disabled: #2A2A2A;
+  --form-input-color: #ffffff;
+  --form-input-border: rgba(255, 255, 255, 0.15);
+  --form-input-border-focus: #4A9EFF;
+  --form-input-placeholder-color: rgba(255, 255, 255, 0.7);
+  --form-input-focus-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
+  --form-input-focus-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  --form-input-focus-shadow-success: 0 0 0 3px rgba(16, 185, 129, 0.1);
+  --form-input-opacity-disabled: 0.6;
+  --form-label-font-size: 0.875rem;
+  --form-label-font-weight: 500;
+  --form-label-color: #ffffff;
+  --form-label-margin-bottom: 0.25rem;
+  --form-helper-font-size: 0.75rem;
+  --form-helper-color: rgba(255, 255, 255, 0.7);
+  --form-error-color: #ef4444;
+  --form-error-font-size: 0.75rem;
+  --form-helper-margin-top: 0.25rem;
+  --form-group-margin-bottom: 1rem;
+  --form-checkbox-size: 1.25rem;
+  --form-checkbox-margin-right: 0.5rem;
+  --form-checkbox-accent-color: #4A9EFF;
+  --form-checkbox-opacity-disabled: 0.6;
+  --form-switch-width: 3rem;
+  --form-switch-height: 1.5rem;
+  --form-switch-slider-size: 1.25rem;
+  --form-switch-slider-offset: 0.125rem;
+  --form-switch-slider-translate: 1.5rem;
+  --form-switch-bg: #d1d5db;
+  --form-switch-bg-active: #4A9EFF;
+  --form-switch-slider-bg: #ffffff;
+  --form-switch-focus-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
+  --form-switch-opacity-disabled: 0.6;
+  --form-textarea-min-height: 100px;
+  --form-textarea-resize: vertical;
+  --form-range-height: 0.5rem;
+  --form-range-thumb-size: 1.25rem;
+  --form-range-bg: #e5e7eb;
+  --form-range-thumb-bg: #4A9EFF;
+  --form-file-input-padding: 0.5rem;
+  --form-file-input-font-size: 0.875rem;
+  --form-file-input-border-style: dashed;
+  --form-file-input-bg: #2A2A2A;
+  --form-file-input-bg-hover: #1A1A1A;
+}
+
+:root {
+  --glass-bg-light: rgba(255, 255, 255, 0.05);
+  --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-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);
+  --tech-border-radius-none: 0;
+  --tech-border-radius-sm: 2px;
+  --tech-border-radius-md: 4px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+img {
+  border-style: none;
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type=checkbox],
+[type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}
+
+:root {
+  font-size: 16px;
+}
+
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+
+h2 {
+  font-size: var(--font-size-3xl);
+}
+
+h3 {
+  font-size: var(--font-size-2xl);
+}
+
+h4 {
+  font-size: var(--font-size-xl);
+}
+
+h5 {
+  font-size: var(--font-size-lg);
+}
+
+h6 {
+  font-size: var(--font-size-base);
+}
+
+p {
+  margin: 0;
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: var(--transition-colors);
+}
+a:hover {
+  color: var(--color-accent-light);
+}
+a:focus {
+  outline: 1px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+ul, ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: var(--spacing-lg) 0;
+}
+
+code {
+  font-family: var(--font-family-mono);
+  font-size: 0.875em;
+  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);
+  padding: 0.125em 0.25em;
+  border-radius: var(--tech-border-radius-sm);
+  color: var(--color-text);
+}
+
+pre {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  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);
+  padding: var(--spacing-md);
+  border-radius: var(--tech-border-radius-md);
+  overflow-x: auto;
+  color: var(--color-text);
+}
+pre code {
+  background-color: transparent;
+  padding: 0;
+  border: none;
+}
+
+blockquote {
+  margin: 0;
+  padding-left: var(--spacing-lg);
+  border-left: var(--border-width-base) solid var(--color-border);
+  color: var(--color-text-muted);
+  background: var(--glass-bg-light);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  padding: var(--spacing-md);
+  border-radius: var(--tech-border-radius-md);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  color: inherit;
+}
+
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+*:focus {
+  outline: 1px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: 1px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.bl-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+@media (min-width: 640px) {
+  .bl-container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+  .bl-container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+  .bl-container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+  .bl-container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+  .bl-container {
+    max-width: 1536px;
+  }
+}
+
+.bl-container-fluid {
+  width: 100%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(var(--spacing-md) * -1);
+  margin-right: calc(var(--spacing-md) * -1);
+}
+
+.bl-col {
+  flex: 1 0 0%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-1 {
+  flex: 0 0 auto;
+  width: 8.3333333333%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-2 {
+  flex: 0 0 auto;
+  width: 16.6666666667%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-3 {
+  flex: 0 0 auto;
+  width: 25%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-4 {
+  flex: 0 0 auto;
+  width: 33.3333333333%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-5 {
+  flex: 0 0 auto;
+  width: 41.6666666667%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-6 {
+  flex: 0 0 auto;
+  width: 50%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-7 {
+  flex: 0 0 auto;
+  width: 58.3333333333%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-8 {
+  flex: 0 0 auto;
+  width: 66.6666666667%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-9 {
+  flex: 0 0 auto;
+  width: 75%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-10 {
+  flex: 0 0 auto;
+  width: 83.3333333333%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-11 {
+  flex: 0 0 auto;
+  width: 91.6666666667%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.bl-col-12 {
+  flex: 0 0 auto;
+  width: 100%;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+@media (min-width: 640px) {
+  .bl-col-sm {
+    flex: 1 0 0%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-3 {
+    flex: 0 0 auto;
+    width: 25%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-6 {
+    flex: 0 0 auto;
+    width: 50%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-9 {
+    flex: 0 0 auto;
+    width: 75%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-sm-12 {
+    flex: 0 0 auto;
+    width: 100%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+}
+@media (min-width: 768px) {
+  .bl-col-md {
+    flex: 1 0 0%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-3 {
+    flex: 0 0 auto;
+    width: 25%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-6 {
+    flex: 0 0 auto;
+    width: 50%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-9 {
+    flex: 0 0 auto;
+    width: 75%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-md-12 {
+    flex: 0 0 auto;
+    width: 100%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+}
+@media (min-width: 1024px) {
+  .bl-col-lg {
+    flex: 1 0 0%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-3 {
+    flex: 0 0 auto;
+    width: 25%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-6 {
+    flex: 0 0 auto;
+    width: 50%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-9 {
+    flex: 0 0 auto;
+    width: 75%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-lg-12 {
+    flex: 0 0 auto;
+    width: 100%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+}
+@media (min-width: 1280px) {
+  .bl-col-xl {
+    flex: 1 0 0%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-xl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+}
+@media (min-width: 1536px) {
+  .bl-col-2xl {
+    flex: 1 0 0%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-1 {
+    flex: 0 0 auto;
+    width: 8.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-2 {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-4 {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-5 {
+    flex: 0 0 auto;
+    width: 41.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-7 {
+    flex: 0 0 auto;
+    width: 58.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-8 {
+    flex: 0 0 auto;
+    width: 66.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-10 {
+    flex: 0 0 auto;
+    width: 83.3333333333%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-11 {
+    flex: 0 0 auto;
+    width: 91.6666666667%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .bl-col-2xl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+}
+.bl-grid {
+  display: grid;
+  gap: var(--spacing-md);
+}
+
+.bl-grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.bl-grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.bl-grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.bl-grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.bl-grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.bl-grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.bl-grid-cols-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.bl-grid-cols-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.bl-grid-cols-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
+.bl-grid-cols-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.bl-grid-cols-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.bl-grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.bl-grid-rows-1 {
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+
+.bl-grid-rows-2 {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+.bl-grid-rows-3 {
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+}
+
+.bl-grid-rows-4 {
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+}
+
+.bl-grid-rows-5 {
+  grid-template-rows: repeat(5, minmax(0, 1fr));
+}
+
+.bl-grid-rows-6 {
+  grid-template-rows: repeat(6, minmax(0, 1fr));
+}
+
+.bl-grid-rows-7 {
+  grid-template-rows: repeat(7, minmax(0, 1fr));
+}
+
+.bl-grid-rows-8 {
+  grid-template-rows: repeat(8, minmax(0, 1fr));
+}
+
+.bl-grid-rows-9 {
+  grid-template-rows: repeat(9, minmax(0, 1fr));
+}
+
+.bl-grid-rows-10 {
+  grid-template-rows: repeat(10, minmax(0, 1fr));
+}
+
+.bl-grid-rows-11 {
+  grid-template-rows: repeat(11, minmax(0, 1fr));
+}
+
+.bl-grid-rows-12 {
+  grid-template-rows: repeat(12, minmax(0, 1fr));
+}
+
+.bl-gap-xs {
+  gap: var(--spacing-xs);
+}
+
+.bl-gap-sm {
+  gap: var(--spacing-sm);
+}
+
+.bl-gap-md {
+  gap: var(--spacing-md);
+}
+
+.bl-gap-lg {
+  gap: var(--spacing-lg);
+}
+
+.bl-gap-xl {
+  gap: var(--spacing-xl);
+}
+
+.bl-gap-2xl {
+  gap: var(--spacing-2xl);
+}
+
+.bl-gap-x-xs {
+  column-gap: var(--spacing-xs);
+}
+
+.bl-gap-x-sm {
+  column-gap: var(--spacing-sm);
+}
+
+.bl-gap-x-md {
+  column-gap: var(--spacing-md);
+}
+
+.bl-gap-x-lg {
+  column-gap: var(--spacing-lg);
+}
+
+.bl-gap-x-xl {
+  column-gap: var(--spacing-xl);
+}
+
+.bl-gap-x-2xl {
+  column-gap: var(--spacing-2xl);
+}
+
+.bl-gap-y-xs {
+  row-gap: var(--spacing-xs);
+}
+
+.bl-gap-y-sm {
+  row-gap: var(--spacing-sm);
+}
+
+.bl-gap-y-md {
+  row-gap: var(--spacing-md);
+}
+
+.bl-gap-y-lg {
+  row-gap: var(--spacing-lg);
+}
+
+.bl-gap-y-xl {
+  row-gap: var(--spacing-xl);
+}
+
+.bl-gap-y-2xl {
+  row-gap: var(--spacing-2xl);
+}
+
+.bl-col-span-1 {
+  grid-column: span 1/span 1;
+}
+
+.bl-col-span-2 {
+  grid-column: span 2/span 2;
+}
+
+.bl-col-span-3 {
+  grid-column: span 3/span 3;
+}
+
+.bl-col-span-4 {
+  grid-column: span 4/span 4;
+}
+
+.bl-col-span-5 {
+  grid-column: span 5/span 5;
+}
+
+.bl-col-span-6 {
+  grid-column: span 6/span 6;
+}
+
+.bl-col-span-7 {
+  grid-column: span 7/span 7;
+}
+
+.bl-col-span-8 {
+  grid-column: span 8/span 8;
+}
+
+.bl-col-span-9 {
+  grid-column: span 9/span 9;
+}
+
+.bl-col-span-10 {
+  grid-column: span 10/span 10;
+}
+
+.bl-col-span-11 {
+  grid-column: span 11/span 11;
+}
+
+.bl-col-span-12 {
+  grid-column: span 12/span 12;
+}
+
+.bl-row-span-1 {
+  grid-row: span 1/span 1;
+}
+
+.bl-row-span-2 {
+  grid-row: span 2/span 2;
+}
+
+.bl-row-span-3 {
+  grid-row: span 3/span 3;
+}
+
+.bl-row-span-4 {
+  grid-row: span 4/span 4;
+}
+
+.bl-row-span-5 {
+  grid-row: span 5/span 5;
+}
+
+.bl-row-span-6 {
+  grid-row: span 6/span 6;
+}
+
+.bl-row-span-7 {
+  grid-row: span 7/span 7;
+}
+
+.bl-row-span-8 {
+  grid-row: span 8/span 8;
+}
+
+.bl-row-span-9 {
+  grid-row: span 9/span 9;
+}
+
+.bl-row-span-10 {
+  grid-row: span 10/span 10;
+}
+
+.bl-row-span-11 {
+  grid-row: span 11/span 11;
+}
+
+.bl-row-span-12 {
+  grid-row: span 12/span 12;
+}
+
+.bl-grid-flow-row {
+  grid-auto-flow: row;
+}
+
+.bl-grid-flow-col {
+  grid-auto-flow: column;
+}
+
+.bl-grid-flow-dense {
+  grid-auto-flow: dense;
+}
+
+.bl-flex {
+  display: flex;
+}
+
+.bl-inline-flex {
+  display: inline-flex;
+}
+
+.bl-flex-row {
+  flex-direction: row;
+}
+
+.bl-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.bl-flex-col {
+  flex-direction: column;
+}
+
+.bl-flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.bl-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.bl-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.bl-flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.bl-justify-start {
+  justify-content: flex-start;
+}
+
+.bl-justify-end {
+  justify-content: flex-end;
+}
+
+.bl-justify-center {
+  justify-content: center;
+}
+
+.bl-justify-between {
+  justify-content: space-between;
+}
+
+.bl-justify-around {
+  justify-content: space-around;
+}
+
+.bl-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.bl-items-start {
+  align-items: flex-start;
+}
+
+.bl-items-end {
+  align-items: flex-end;
+}
+
+.bl-items-center {
+  align-items: center;
+}
+
+.bl-items-baseline {
+  align-items: baseline;
+}
+
+.bl-items-stretch {
+  align-items: stretch;
+}
+
+.bl-self-auto {
+  align-self: auto;
+}
+
+.bl-self-start {
+  align-self: flex-start;
+}
+
+.bl-self-end {
+  align-self: flex-end;
+}
+
+.bl-self-center {
+  align-self: center;
+}
+
+.bl-self-stretch {
+  align-self: stretch;
+}
+
+.bl-self-baseline {
+  align-self: baseline;
+}
+
+.bl-content-start {
+  align-content: flex-start;
+}
+
+.bl-content-end {
+  align-content: flex-end;
+}
+
+.bl-content-center {
+  align-content: center;
+}
+
+.bl-content-between {
+  align-content: space-between;
+}
+
+.bl-content-around {
+  align-content: space-around;
+}
+
+.bl-content-stretch {
+  align-content: stretch;
+}
+
+.bl-flex-1 {
+  flex: 1 1 0%;
+}
+
+.bl-flex-auto {
+  flex: 1 1 auto;
+}
+
+.bl-flex-initial {
+  flex: 0 1 auto;
+}
+
+.bl-flex-none {
+  flex: none;
+}
+
+.bl-grow {
+  flex-grow: 1;
+}
+
+.bl-grow-0 {
+  flex-grow: 0;
+}
+
+.bl-shrink {
+  flex-shrink: 1;
+}
+
+.bl-shrink-0 {
+  flex-shrink: 0;
+}
+
+.m-xs {
+  margin: var(--spacing-xs);
+}
+
+.mt-xs {
+  margin-top: var(--spacing-xs);
+}
+
+.mr-xs {
+  margin-right: var(--spacing-xs);
+}
+
+.mb-xs {
+  margin-bottom: var(--spacing-xs);
+}
+
+.ml-xs {
+  margin-left: var(--spacing-xs);
+}
+
+.mx-xs {
+  margin-left: var(--spacing-xs);
+  margin-right: var(--spacing-xs);
+}
+
+.my-xs {
+  margin-top: var(--spacing-xs);
+  margin-bottom: var(--spacing-xs);
+}
+
+.m-sm {
+  margin: var(--spacing-sm);
+}
+
+.mt-sm {
+  margin-top: var(--spacing-sm);
+}
+
+.mr-sm {
+  margin-right: var(--spacing-sm);
+}
+
+.mb-sm {
+  margin-bottom: var(--spacing-sm);
+}
+
+.ml-sm {
+  margin-left: var(--spacing-sm);
+}
+
+.mx-sm {
+  margin-left: var(--spacing-sm);
+  margin-right: var(--spacing-sm);
+}
+
+.my-sm {
+  margin-top: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+}
+
+.m-md {
+  margin: var(--spacing-md);
+}
+
+.mt-md {
+  margin-top: var(--spacing-md);
+}
+
+.mr-md {
+  margin-right: var(--spacing-md);
+}
+
+.mb-md {
+  margin-bottom: var(--spacing-md);
+}
+
+.ml-md {
+  margin-left: var(--spacing-md);
+}
+
+.mx-md {
+  margin-left: var(--spacing-md);
+  margin-right: var(--spacing-md);
+}
+
+.my-md {
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+
+.m-lg {
+  margin: var(--spacing-lg);
+}
+
+.mt-lg {
+  margin-top: var(--spacing-lg);
+}
+
+.mr-lg {
+  margin-right: var(--spacing-lg);
+}
+
+.mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.ml-lg {
+  margin-left: var(--spacing-lg);
+}
+
+.mx-lg {
+  margin-left: var(--spacing-lg);
+  margin-right: var(--spacing-lg);
+}
+
+.my-lg {
+  margin-top: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+.m-xl {
+  margin: var(--spacing-xl);
+}
+
+.mt-xl {
+  margin-top: var(--spacing-xl);
+}
+
+.mr-xl {
+  margin-right: var(--spacing-xl);
+}
+
+.mb-xl {
+  margin-bottom: var(--spacing-xl);
+}
+
+.ml-xl {
+  margin-left: var(--spacing-xl);
+}
+
+.mx-xl {
+  margin-left: var(--spacing-xl);
+  margin-right: var(--spacing-xl);
+}
+
+.my-xl {
+  margin-top: var(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
+}
+
+.m-2xl {
+  margin: var(--spacing-2xl);
+}
+
+.mt-2xl {
+  margin-top: var(--spacing-2xl);
+}
+
+.mr-2xl {
+  margin-right: var(--spacing-2xl);
+}
+
+.mb-2xl {
+  margin-bottom: var(--spacing-2xl);
+}
+
+.ml-2xl {
+  margin-left: var(--spacing-2xl);
+}
+
+.mx-2xl {
+  margin-left: var(--spacing-2xl);
+  margin-right: var(--spacing-2xl);
+}
+
+.my-2xl {
+  margin-top: var(--spacing-2xl);
+  margin-bottom: var(--spacing-2xl);
+}
+
+.m-3xl {
+  margin: var(--spacing-3xl);
+}
+
+.mt-3xl {
+  margin-top: var(--spacing-3xl);
+}
+
+.mr-3xl {
+  margin-right: var(--spacing-3xl);
+}
+
+.mb-3xl {
+  margin-bottom: var(--spacing-3xl);
+}
+
+.ml-3xl {
+  margin-left: var(--spacing-3xl);
+}
+
+.mx-3xl {
+  margin-left: var(--spacing-3xl);
+  margin-right: var(--spacing-3xl);
+}
+
+.my-3xl {
+  margin-top: var(--spacing-3xl);
+  margin-bottom: var(--spacing-3xl);
+}
+
+.m-0 {
+  margin: 0;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mr-0 {
+  margin-right: 0;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.ml-0 {
+  margin-left: 0;
+}
+
+.mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.p-xs {
+  padding: var(--spacing-xs);
+}
+
+.pt-xs {
+  padding-top: var(--spacing-xs);
+}
+
+.pr-xs {
+  padding-right: var(--spacing-xs);
+}
+
+.pb-xs {
+  padding-bottom: var(--spacing-xs);
+}
+
+.pl-xs {
+  padding-left: var(--spacing-xs);
+}
+
+.px-xs {
+  padding-left: var(--spacing-xs);
+  padding-right: var(--spacing-xs);
+}
+
+.py-xs {
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+}
+
+.p-sm {
+  padding: var(--spacing-sm);
+}
+
+.pt-sm {
+  padding-top: var(--spacing-sm);
+}
+
+.pr-sm {
+  padding-right: var(--spacing-sm);
+}
+
+.pb-sm {
+  padding-bottom: var(--spacing-sm);
+}
+
+.pl-sm {
+  padding-left: var(--spacing-sm);
+}
+
+.px-sm {
+  padding-left: var(--spacing-sm);
+  padding-right: var(--spacing-sm);
+}
+
+.py-sm {
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+}
+
+.p-md {
+  padding: var(--spacing-md);
+}
+
+.pt-md {
+  padding-top: var(--spacing-md);
+}
+
+.pr-md {
+  padding-right: var(--spacing-md);
+}
+
+.pb-md {
+  padding-bottom: var(--spacing-md);
+}
+
+.pl-md {
+  padding-left: var(--spacing-md);
+}
+
+.px-md {
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.py-md {
+  padding-top: var(--spacing-md);
+  padding-bottom: var(--spacing-md);
+}
+
+.p-lg {
+  padding: var(--spacing-lg);
+}
+
+.pt-lg {
+  padding-top: var(--spacing-lg);
+}
+
+.pr-lg {
+  padding-right: var(--spacing-lg);
+}
+
+.pb-lg {
+  padding-bottom: var(--spacing-lg);
+}
+
+.pl-lg {
+  padding-left: var(--spacing-lg);
+}
+
+.px-lg {
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+}
+
+.py-lg {
+  padding-top: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
+}
+
+.p-xl {
+  padding: var(--spacing-xl);
+}
+
+.pt-xl {
+  padding-top: var(--spacing-xl);
+}
+
+.pr-xl {
+  padding-right: var(--spacing-xl);
+}
+
+.pb-xl {
+  padding-bottom: var(--spacing-xl);
+}
+
+.pl-xl {
+  padding-left: var(--spacing-xl);
+}
+
+.px-xl {
+  padding-left: var(--spacing-xl);
+  padding-right: var(--spacing-xl);
+}
+
+.py-xl {
+  padding-top: var(--spacing-xl);
+  padding-bottom: var(--spacing-xl);
+}
+
+.p-2xl {
+  padding: var(--spacing-2xl);
+}
+
+.pt-2xl {
+  padding-top: var(--spacing-2xl);
+}
+
+.pr-2xl {
+  padding-right: var(--spacing-2xl);
+}
+
+.pb-2xl {
+  padding-bottom: var(--spacing-2xl);
+}
+
+.pl-2xl {
+  padding-left: var(--spacing-2xl);
+}
+
+.px-2xl {
+  padding-left: var(--spacing-2xl);
+  padding-right: var(--spacing-2xl);
+}
+
+.py-2xl {
+  padding-top: var(--spacing-2xl);
+  padding-bottom: var(--spacing-2xl);
+}
+
+.p-3xl {
+  padding: var(--spacing-3xl);
+}
+
+.pt-3xl {
+  padding-top: var(--spacing-3xl);
+}
+
+.pr-3xl {
+  padding-right: var(--spacing-3xl);
+}
+
+.pb-3xl {
+  padding-bottom: var(--spacing-3xl);
+}
+
+.pl-3xl {
+  padding-left: var(--spacing-3xl);
+}
+
+.px-3xl {
+  padding-left: var(--spacing-3xl);
+  padding-right: var(--spacing-3xl);
+}
+
+.py-3xl {
+  padding-top: var(--spacing-3xl);
+  padding-bottom: var(--spacing-3xl);
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.pr-0 {
+  padding-right: 0;
+}
+
+.pb-0 {
+  padding-bottom: 0;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.bl-d-none {
+  display: none;
+}
+
+.bl-d-inline {
+  display: inline;
+}
+
+.bl-d-inline-block {
+  display: inline-block;
+}
+
+.bl-d-block {
+  display: block;
+}
+
+.bl-d-table {
+  display: table;
+}
+
+.bl-d-table-row {
+  display: table-row;
+}
+
+.bl-d-table-cell {
+  display: table-cell;
+}
+
+.bl-d-flex {
+  display: flex;
+}
+
+.bl-d-inline-flex {
+  display: inline-flex;
+}
+
+.bl-d-grid {
+  display: grid;
+}
+
+.bl-d-inline-grid {
+  display: inline-grid;
+}
+
+@media (min-width: 640px) {
+  .bl-d-sm-none {
+    display: none;
+  }
+  .bl-d-sm-inline {
+    display: inline;
+  }
+  .bl-d-sm-inline-block {
+    display: inline-block;
+  }
+  .bl-d-sm-block {
+    display: block;
+  }
+  .bl-d-sm-flex {
+    display: flex;
+  }
+  .bl-d-sm-inline-flex {
+    display: inline-flex;
+  }
+  .bl-d-sm-grid {
+    display: grid;
+  }
+}
+@media (min-width: 768px) {
+  .bl-d-md-none {
+    display: none;
+  }
+  .bl-d-md-inline {
+    display: inline;
+  }
+  .bl-d-md-inline-block {
+    display: inline-block;
+  }
+  .bl-d-md-block {
+    display: block;
+  }
+  .bl-d-md-flex {
+    display: flex;
+  }
+  .bl-d-md-inline-flex {
+    display: inline-flex;
+  }
+  .bl-d-md-grid {
+    display: grid;
+  }
+}
+@media (min-width: 1024px) {
+  .bl-d-lg-none {
+    display: none;
+  }
+  .bl-d-lg-inline {
+    display: inline;
+  }
+  .bl-d-lg-inline-block {
+    display: inline-block;
+  }
+  .bl-d-lg-block {
+    display: block;
+  }
+  .bl-d-lg-flex {
+    display: flex;
+  }
+  .bl-d-lg-inline-flex {
+    display: inline-flex;
+  }
+  .bl-d-lg-grid {
+    display: grid;
+  }
+}
+@media (min-width: 1280px) {
+  .bl-d-xl-none {
+    display: none;
+  }
+  .bl-d-xl-inline {
+    display: inline;
+  }
+  .bl-d-xl-inline-block {
+    display: inline-block;
+  }
+  .bl-d-xl-block {
+    display: block;
+  }
+  .bl-d-xl-flex {
+    display: flex;
+  }
+  .bl-d-xl-inline-flex {
+    display: inline-flex;
+  }
+  .bl-d-xl-grid {
+    display: grid;
+  }
+}
+.bl-text-left {
+  text-align: left;
+}
+
+.bl-text-center {
+  text-align: center;
+}
+
+.bl-text-right {
+  text-align: right;
+}
+
+.bl-text-justify {
+  text-align: justify;
+}
+
+.bl-text-xs {
+  font-size: var(--font-size-xs);
+}
+
+.bl-text-sm {
+  font-size: var(--font-size-sm);
+}
+
+.bl-text-base {
+  font-size: var(--font-size-base);
+}
+
+.bl-text-lg {
+  font-size: var(--font-size-lg);
+}
+
+.bl-text-xl {
+  font-size: var(--font-size-xl);
+}
+
+.bl-text-2xl {
+  font-size: var(--font-size-2xl);
+}
+
+.bl-text-3xl {
+  font-size: var(--font-size-3xl);
+}
+
+.bl-text-4xl {
+  font-size: var(--font-size-4xl);
+}
+
+.bl-text-5xl {
+  font-size: var(--font-size-5xl);
+}
+
+.bl-text-6xl {
+  font-size: var(--font-size-6xl);
+}
+
+.bl-font-light {
+  font-weight: var(--font-weight-light);
+}
+
+.bl-font-normal {
+  font-weight: var(--font-weight-normal);
+}
+
+.bl-font-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.bl-font-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+
+.bl-font-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.bl-font-extrabold {
+  font-weight: var(--font-weight-extrabold);
+}
+
+.bl-leading-none {
+  line-height: var(--line-height-none);
+}
+
+.bl-leading-tight {
+  line-height: var(--line-height-tight);
+}
+
+.bl-leading-snug {
+  line-height: var(--line-height-snug);
+}
+
+.bl-leading-base {
+  line-height: var(--line-height-base);
+}
+
+.bl-leading-relaxed {
+  line-height: var(--line-height-relaxed);
+}
+
+.bl-leading-loose {
+  line-height: var(--line-height-loose);
+}
+
+.bl-uppercase {
+  text-transform: uppercase;
+}
+
+.bl-lowercase {
+  text-transform: lowercase;
+}
+
+.bl-capitalize {
+  text-transform: capitalize;
+}
+
+.bl-normal-case {
+  text-transform: none;
+}
+
+.bl-underline {
+  text-decoration: underline;
+}
+
+.bl-line-through {
+  text-decoration: line-through;
+}
+
+.bl-no-underline {
+  text-decoration: none;
+}
+
+.bl-tracking-tighter {
+  letter-spacing: var(--letter-spacing-tighter);
+}
+
+.bl-tracking-tight {
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.bl-tracking-normal {
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.bl-tracking-wide {
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+.bl-tracking-wider {
+  letter-spacing: var(--letter-spacing-wider);
+}
+
+.bl-tracking-widest {
+  letter-spacing: var(--letter-spacing-widest);
+}
+
+.bl-text-primary {
+  color: var(--color-primary);
+}
+
+.bl-text-secondary {
+  color: var(--color-secondary);
+}
+
+.bl-text-success {
+  color: var(--color-success);
+}
+
+.bl-text-warning {
+  color: var(--color-warning);
+}
+
+.bl-text-error {
+  color: var(--color-error);
+}
+
+.bl-text-info {
+  color: var(--color-info);
+}
+
+.bl-text-muted {
+  color: var(--color-text-muted);
+}
+
+.bl-text-light {
+  color: var(--color-text-light);
+}
+
+.bl-text-inverse {
+  color: var(--color-text-inverse);
+}
+
+.bl-font-sans {
+  font-family: var(--font-family-base);
+}
+
+.bl-font-mono {
+  font-family: var(--font-family-mono);
+}
+
+.bl-font-serif {
+  font-family: var(--font-family-serif);
+}
+
+.bl-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bl-text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.bl-text-clip {
+  text-overflow: clip;
+}
+
+.bl-whitespace-normal {
+  white-space: normal;
+}
+
+.bl-whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.bl-whitespace-pre {
+  white-space: pre;
+}
+
+.bl-whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.bl-whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.bl-visible {
+  visibility: visible;
+}
+
+.bl-invisible {
+  visibility: hidden;
+}
+
+.bl-opacity-0 {
+  opacity: 0;
+}
+
+.bl-opacity-25 {
+  opacity: 0.25;
+}
+
+.bl-opacity-50 {
+  opacity: 0.5;
+}
+
+.bl-opacity-75 {
+  opacity: 0.75;
+}
+
+.bl-opacity-100 {
+  opacity: 1;
+}
+
+.bl-overflow-auto {
+  overflow: auto;
+}
+
+.bl-overflow-hidden {
+  overflow: hidden;
+}
+
+.bl-overflow-visible {
+  overflow: visible;
+}
+
+.bl-overflow-scroll {
+  overflow: scroll;
+}
+
+.bl-overflow-x-auto {
+  overflow-x: auto;
+}
+
+.bl-overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.bl-overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.bl-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.bl-overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.bl-overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.bl-static {
+  position: static;
+}
+
+.bl-fixed {
+  position: fixed;
+}
+
+.bl-absolute {
+  position: absolute;
+}
+
+.bl-relative {
+  position: relative;
+}
+
+.bl-sticky {
+  position: sticky;
+}
+
+.bl-top-0 {
+  top: 0;
+}
+
+.bl-right-0 {
+  right: 0;
+}
+
+.bl-bottom-0 {
+  bottom: 0;
+}
+
+.bl-left-0 {
+  left: 0;
+}
+
+.bl-top-auto {
+  top: auto;
+}
+
+.bl-right-auto {
+  right: auto;
+}
+
+.bl-bottom-auto {
+  bottom: auto;
+}
+
+.bl-left-auto {
+  left: auto;
+}
+
+.bl-inset-0 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.bl-inset-auto {
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+}
+
+.bl-z-0 {
+  z-index: var(--z-index-base);
+}
+
+.bl-z-dropdown {
+  z-index: var(--z-index-dropdown);
+}
+
+.bl-z-sticky {
+  z-index: var(--z-index-sticky);
+}
+
+.bl-z-fixed {
+  z-index: var(--z-index-fixed);
+}
+
+.bl-z-modal-backdrop {
+  z-index: var(--z-index-modal-backdrop);
+}
+
+.bl-z-modal {
+  z-index: var(--z-index-modal);
+}
+
+.bl-z-popover {
+  z-index: var(--z-index-popover);
+}
+
+.bl-z-tooltip {
+  z-index: var(--z-index-tooltip);
+}
+
+.bl-transition {
+  transition: var(--transition-base);
+}
+
+.bl-transition-colors {
+  transition: var(--transition-colors);
+}
+
+.bl-transition-opacity {
+  transition: var(--transition-opacity);
+}
+
+.bl-transition-transform {
+  transition: var(--transition-transform);
+}
+
+.bl-transition-none {
+  transition: none;
+}
+
+.bl-duration-fast {
+  transition-duration: var(--transition-duration-fast);
+}
+
+.bl-duration-base {
+  transition-duration: var(--transition-duration-base);
+}
+
+.bl-duration-slow {
+  transition-duration: var(--transition-duration-slow);
+}
+
+.bl-duration-slower {
+  transition-duration: var(--transition-duration-slower);
+}
+
+.bl-ease-linear {
+  transition-timing-function: var(--transition-ease-linear);
+}
+
+.bl-ease-in {
+  transition-timing-function: var(--transition-ease-in);
+}
+
+.bl-ease-out {
+  transition-timing-function: var(--transition-ease-out);
+}
+
+.bl-ease-in-out {
+  transition-timing-function: var(--transition-ease-in-out);
+}
+
+@keyframes bl-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes bl-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.bl-fade-in {
+  animation: bl-fade-in var(--transition-duration-base) var(--transition-ease-out);
+}
+
+.bl-fade-out {
+  animation: bl-fade-out var(--transition-duration-base) var(--transition-ease-out);
+}
+
+@keyframes bl-slide-up {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes bl-slide-down {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes bl-slide-left {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes bl-slide-right {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.bl-slide-up {
+  animation: bl-slide-up var(--transition-duration-base) var(--transition-ease-out);
+}
+
+.bl-slide-down {
+  animation: bl-slide-down var(--transition-duration-base) var(--transition-ease-out);
+}
+
+.bl-slide-left {
+  animation: bl-slide-left var(--transition-duration-base) var(--transition-ease-out);
+}
+
+.bl-slide-right {
+  animation: bl-slide-right var(--transition-duration-base) var(--transition-ease-out);
+}
+
+@keyframes bl-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.bl-animate-spin {
+  animation: bl-spin 1s linear infinite;
+}
+
+@keyframes bl-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+.bl-animate-pulse {
+  animation: bl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.bl-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.bl-sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+.bl-skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  z-index: var(--z-index-tooltip);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--color-primary);
+  color: var(--color-text-inverse);
+  text-decoration: none;
+  border-radius: var(--border-radius-md);
+}
+.bl-skip-link:focus {
+  top: var(--spacing-sm);
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.bl-focus-visible:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+@media (prefers-contrast: high) {
+  * {
+    border-color: currentColor !important;
+  }
+  .bl-skip-link {
+    border: 2px solid currentColor;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+.bl-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-base);
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid var(--glass-border-medium);
+  border-radius: var(--tech-border-radius-sm);
+  background: var(--glass-bg-medium);
+  backdrop-filter: blur(var(--glass-blur-md));
+  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  transition: var(--transition-base);
+  color: var(--color-text);
+}
+.bl-btn:focus {
+  outline: 1px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+.bl-btn:disabled, .bl-btn.bl-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.bl-btn-sm {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-sm);
+}
+
+.bl-btn-lg {
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: var(--font-size-lg);
+}
+
+.bl-btn-primary {
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+  border-color: var(--color-accent);
+}
+.bl-btn-primary:hover:not(:disabled):not(.bl-disabled) {
+  background: var(--color-accent-dark);
+  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);
+}
+
+.bl-btn-secondary {
+  background: var(--glass-bg-medium);
+  color: var(--color-text);
+  border-color: var(--glass-border-medium);
+}
+.bl-btn-secondary:hover:not(:disabled):not(.bl-disabled) {
+  background: var(--glass-bg-heavy);
+  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);
+}
+
+.bl-btn-outline {
+  background: transparent;
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+.bl-btn-outline:hover:not(:disabled):not(.bl-disabled) {
+  background: var(--glass-bg-light);
+  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);
+}
+
+.bl-btn-ghost {
+  background: transparent;
+  color: var(--color-text);
+  border-color: transparent;
+}
+.bl-btn-ghost:hover:not(:disabled):not(.bl-disabled) {
+  background: var(--glass-bg-light);
+  border-color: var(--glass-border-light);
+}
+.bl-btn-ghost:active:not(:disabled):not(.bl-disabled) {
+  transform: translateY(1px);
+}
+
+.bl-btn-link {
+  background: transparent;
+  color: var(--color-accent);
+  border-color: transparent;
+  padding: 0;
+  text-decoration: underline;
+}
+.bl-btn-link:hover:not(:disabled):not(.bl-disabled) {
+  color: var(--color-accent-light);
+  text-decoration: none;
+}
+
+.bl-btn-success {
+  background: var(--color-success);
+  color: var(--color-text-inverse);
+  border-color: var(--color-success);
+}
+.bl-btn-success:hover:not(:disabled):not(.bl-disabled) {
+  background: var(--color-success-dark);
+  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);
+}
+
+.bl-btn-warning {
+  background: var(--color-warning);
+  color: var(--color-text-inverse);
+  border-color: var(--color-warning);
+}
+.bl-btn-warning:hover:not(:disabled):not(.bl-disabled) {
+  background: var(--color-warning-dark);
+  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);
+}
+
+.bl-btn-error {
+  background: var(--color-error);
+  color: var(--color-text-inverse);
+  border-color: var(--color-error);
+}
+.bl-btn-error:hover:not(:disabled):not(.bl-disabled) {
+  background: var(--color-error-dark);
+  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);
+}
+
+.bl-btn-info {
+  background: var(--color-info);
+  color: var(--color-text-inverse);
+  border-color: var(--color-info);
+}
+.bl-btn-info:hover:not(:disabled):not(.bl-disabled) {
+  background: var(--color-info-dark);
+  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);
+}
+
+.bl-btn-block {
+  display: flex;
+  width: 100%;
+}
+
+.bl-form-group {
+  margin-bottom: var(--form-group-margin-bottom);
+}
+
+.bl-form-label {
+  display: block;
+  margin-bottom: var(--form-label-margin-bottom);
+  font-size: var(--form-label-font-size);
+  font-weight: var(--form-label-font-weight);
+  color: var(--color-text);
+}
+
+.bl-form-label-required::after {
+  content: " *";
+  color: var(--form-error-color);
+}
+
+.bl-form-helper {
+  display: block;
+  margin-top: var(--form-helper-margin-top);
+  font-size: var(--form-helper-font-size);
+  color: var(--color-text-muted);
+}
+
+.bl-form-error {
+  display: block;
+  margin-top: var(--form-helper-margin-top);
+  font-size: var(--form-error-font-size);
+  color: var(--color-error);
+}
+
+.bl-input,
+.bl-textarea {
+  display: block;
+  width: 100%;
+  padding: var(--form-input-padding-y) var(--form-input-padding-x);
+  font-family: var(--font-family-base);
+  font-size: var(--form-input-font-size);
+  line-height: var(--form-input-line-height);
+  color: var(--color-text);
+  background: var(--glass-bg-light);
+  border: 1px 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));
+  transition: var(--transition-base);
+}
+.bl-input::placeholder,
+.bl-textarea::placeholder {
+  color: var(--color-text-muted);
+  opacity: 1;
+  font-style: normal;
+}
+.bl-input:focus,
+.bl-textarea:focus {
+  outline: none;
+  border-width: 2px;
+  border-color: var(--color-accent);
+  background: var(--glass-bg-medium);
+}
+.bl-input:disabled,
+.bl-textarea:disabled {
+  opacity: var(--form-input-opacity-disabled);
+  cursor: not-allowed;
+  background: var(--glass-bg-dark);
+}
+
+.bl-select {
+  display: block;
+  width: 100%;
+  padding: var(--form-input-padding-y) var(--form-input-padding-x);
+  padding-right: calc(var(--form-input-padding-x) + 1.5rem);
+  font-family: var(--font-family-base);
+  font-size: var(--form-input-font-size);
+  line-height: var(--form-input-line-height);
+  color: var(--color-text);
+  background: var(--glass-bg-light);
+  border: 1px 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));
+  transition: var(--transition-base);
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--form-input-padding-x) center;
+  background-size: 0.75rem;
+}
+.bl-select:focus {
+  outline: none;
+  border-width: 2px;
+  border-color: var(--color-accent);
+  background-color: var(--glass-bg-medium);
+}
+.bl-select:disabled {
+  opacity: var(--form-input-opacity-disabled);
+  cursor: not-allowed;
+  background-color: var(--glass-bg-dark);
+}
+
+.bl-input-error,
+.bl-select-error,
+.bl-textarea-error {
+  border-bottom: 2px solid var(--color-error);
+}
+.bl-input-error:focus,
+.bl-select-error:focus,
+.bl-textarea-error:focus {
+  border-width: 2px;
+  border-color: var(--color-error);
+  border-bottom-width: 2px;
+}
+
+.bl-input-success,
+.bl-select-success,
+.bl-textarea-success {
+  border-bottom: 2px solid var(--color-success);
+}
+.bl-input-success:focus,
+.bl-select-success:focus,
+.bl-textarea-success:focus {
+  border-width: 2px;
+  border-color: var(--color-success);
+  border-bottom-width: 2px;
+}
+
+.bl-input-sm,
+.bl-select-sm {
+  padding: var(--form-input-padding-y-sm) var(--form-input-padding-x-sm);
+  font-size: var(--form-input-font-size-sm);
+}
+
+.bl-select-sm {
+  padding-right: calc(var(--form-input-padding-x-sm) + 1.25rem);
+}
+
+.bl-input-lg,
+.bl-select-lg {
+  padding: var(--form-input-padding-y-lg) var(--form-input-padding-x-lg);
+  font-size: var(--form-input-font-size-lg);
+}
+
+.bl-select-lg {
+  padding-right: calc(var(--form-input-padding-x-lg) + 1.75rem);
+}
+
+.bl-textarea {
+  resize: var(--form-textarea-resize);
+  min-height: var(--form-textarea-min-height);
+}
+
+.bl-checkbox,
+.bl-radio {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+.bl-checkbox input[type=checkbox],
+.bl-checkbox input[type=radio],
+.bl-radio input[type=checkbox],
+.bl-radio input[type=radio] {
+  width: var(--form-checkbox-size);
+  height: var(--form-checkbox-size);
+  margin-right: var(--form-checkbox-margin-right);
+  cursor: pointer;
+  accent-color: var(--form-checkbox-accent-color);
+}
+.bl-checkbox:disabled,
+.bl-radio:disabled {
+  opacity: var(--form-checkbox-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.bl-switch {
+  position: relative;
+  display: inline-block;
+  width: var(--form-switch-width);
+  height: var(--form-switch-height);
+}
+.bl-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.bl-switch input:checked + .bl-switch-slider {
+  background-color: var(--form-switch-bg-active);
+}
+.bl-switch input:checked + .bl-switch-slider::before {
+  transform: translateX(var(--form-switch-slider-translate));
+}
+.bl-switch input:focus + .bl-switch-slider {
+  border-color: var(--color-accent);
+}
+.bl-switch input:disabled + .bl-switch-slider {
+  opacity: var(--form-switch-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.bl-switch-slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--glass-bg-medium);
+  border: 1px 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));
+  transition: var(--transition-base);
+  cursor: pointer;
+}
+.bl-switch-slider::before {
+  position: absolute;
+  content: "";
+  height: var(--form-switch-slider-size);
+  width: var(--form-switch-slider-size);
+  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-radius: var(--border-radius-full);
+  transition: var(--transition-base);
+}
+
+.bl-file-input {
+  display: block;
+  width: 100%;
+  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-radius: var(--tech-border-radius-sm);
+  background: var(--glass-bg-light);
+  backdrop-filter: blur(var(--glass-blur-md));
+  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  cursor: pointer;
+  transition: var(--transition-base);
+}
+.bl-file-input:hover {
+  border-color: var(--glass-border-heavy);
+  background: var(--glass-bg-medium);
+}
+.bl-file-input input[type=file] {
+  display: none;
+}
+
+.bl-range {
+  width: 100%;
+  height: var(--form-range-height);
+  border-radius: var(--tech-border-radius-sm);
+  background: var(--form-range-bg);
+  outline: none;
+  -webkit-appearance: none;
+}
+.bl-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--form-range-thumb-size);
+  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);
+  cursor: pointer;
+}
+.bl-range::-moz-range-thumb {
+  width: var(--form-range-thumb-size);
+  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);
+  cursor: pointer;
+}
+
+.bl-input-group {
+  display: flex;
+  width: 100%;
+}
+.bl-input-group .bl-input,
+.bl-input-group .bl-select {
+  position: relative;
+  flex: 1 1 auto;
+  width: 1%;
+}
+.bl-input-group .bl-input:not(:first-child),
+.bl-input-group .bl-select:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
+}
+.bl-input-group .bl-input:not(:last-child),
+.bl-input-group .bl-select:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.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-radius: var(--tech-border-radius-md);
+  overflow: hidden;
+  transition: var(--transition-base);
+  position: relative;
+}
+.bl-card.bl-card-accent {
+  border-left: 2px solid var(--color-accent);
+}
+
+.bl-card-header {
+  padding: var(--spacing-md);
+  border-bottom: 1px 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));
+}
+
+.bl-card-title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+}
+
+.bl-card-subtitle {
+  margin: var(--spacing-xs) 0 0 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.bl-card-body {
+  padding: var(--spacing-md);
+  flex: 1 1 auto;
+  color: var(--color-text);
+}
+
+.bl-card-footer {
+  padding: var(--spacing-md);
+  border-top: 1px 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));
+}
+
+.bl-card-primary {
+  border-color: var(--color-accent);
+}
+.bl-card-primary.bl-card-accent {
+  border-left-color: var(--color-accent);
+}
+
+.bl-card-secondary {
+  border-color: var(--glass-border-heavy);
+}
+.bl-card-secondary.bl-card-accent {
+  border-left-color: var(--color-secondary);
+}
+
+.bl-card-shadow {
+  box-shadow: var(--glass-shadow-md);
+}
+
+.bl-card-shadow-lg {
+  box-shadow: var(--glass-shadow-lg);
+}
+
+.bl-card-hover {
+  cursor: pointer;
+}
+.bl-card-hover:hover {
+  background: var(--glass-bg-heavy);
+  border-color: var(--glass-border-heavy);
+}
+
+.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-radius: var(--tech-border-radius-md);
+  background: var(--glass-bg-medium);
+  backdrop-filter: blur(var(--glass-blur-md));
+  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  color: var(--color-text);
+}
+
+.bl-alert-title {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+}
+
+.bl-alert-message {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.bl-alert-info {
+  border-left-color: var(--color-accent);
+  color: var(--color-text);
+}
+.bl-alert-info .bl-alert-title {
+  color: var(--color-text);
+}
+
+.bl-alert-success {
+  border-left-color: var(--color-success);
+  color: var(--color-text);
+}
+.bl-alert-success .bl-alert-title {
+  color: var(--color-text);
+}
+
+.bl-alert-warning {
+  border-left-color: var(--color-warning);
+  color: var(--color-text);
+}
+.bl-alert-warning .bl-alert-title {
+  color: var(--color-text);
+}
+
+.bl-alert-error {
+  border-left-color: var(--color-error);
+  color: var(--color-text);
+}
+.bl-alert-error .bl-alert-title {
+  color: var(--color-text);
+}
+
+.bl-alert-dismissible {
+  padding-right: var(--spacing-3xl);
+}
+
+.bl-alert-close {
+  position: absolute;
+  top: var(--spacing-sm);
+  right: var(--spacing-sm);
+  padding: var(--spacing-xs);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: var(--transition-opacity);
+  color: var(--color-text);
+  border-radius: var(--tech-border-radius-sm);
+}
+.bl-alert-close:hover {
+  opacity: 1;
+}
+.bl-alert-close::before {
+  content: "×";
+  font-size: var(--font-size-xl);
+  line-height: 1;
+}
+
+.bl-badge {
+  display: inline-flex;
+  align-items: stretch;
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: var(--tech-border-radius-sm);
+  border: 1px solid var(--glass-border-medium);
+}
+
+.bl-badge-label {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--glass-bg-light);
+  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);
+  flex-shrink: 0;
+}
+
+.bl-badge-value {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--glass-bg-medium);
+  backdrop-filter: blur(var(--glass-blur-md));
+  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  color: var(--color-text);
+  flex-shrink: 0;
+}
+
+.bl-badge-primary .bl-badge-value {
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+}
+
+.bl-badge-secondary .bl-badge-value {
+  background: var(--glass-bg-heavy);
+  color: var(--color-text);
+}
+
+.bl-badge-success .bl-badge-value {
+  background: var(--color-success);
+  color: var(--color-text-inverse);
+}
+
+.bl-badge-warning .bl-badge-value {
+  background: var(--color-warning);
+  color: var(--color-text-inverse);
+}
+
+.bl-badge-error .bl-badge-value {
+  background: var(--color-error);
+  color: var(--color-text-inverse);
+}
+
+.bl-badge-info .bl-badge-value {
+  background: var(--color-info);
+  color: var(--color-text-inverse);
+}
+
+.bl-badge-sm {
+  font-size: 0.625rem;
+}
+.bl-badge-sm .bl-badge-label,
+.bl-badge-sm .bl-badge-value {
+  padding: 0.125rem var(--spacing-xs);
+}
+
+.bl-badge-lg {
+  font-size: var(--font-size-sm);
+}
+.bl-badge-lg .bl-badge-label,
+.bl-badge-lg .bl-badge-value {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.bl-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-index-modal-backdrop);
+  width: 100vw;
+  height: 100vh;
+  background: var(--color-bg-overlay);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+}
+
+.bl-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-index-modal);
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+}
+
+.bl-modal-dialog {
+  position: relative;
+  width: auto;
+  margin: var(--spacing-md);
+  pointer-events: none;
+}
+@media (min-width: 576px) {
+  .bl-modal-dialog {
+    max-width: 500px;
+    margin: var(--spacing-xl) auto;
+  }
+}
+@media (min-width: 768px) {
+  .bl-modal-dialog {
+    max-width: 600px;
+  }
+}
+@media (min-width: 1024px) {
+  .bl-modal-dialog {
+    max-width: 800px;
+  }
+}
+
+.bl-modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  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-radius: var(--tech-border-radius-md);
+  outline: 0;
+}
+
+.bl-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--spacing-md);
+  border-bottom: 1px 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));
+}
+
+.bl-modal-title {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+}
+
+.bl-modal-close {
+  padding: var(--spacing-xs);
+  margin: calc(var(--spacing-xs) * -1) calc(var(--spacing-xs) * -1) calc(var(--spacing-xs) * -1) auto;
+  background: transparent;
+  border: 0;
+  border-radius: var(--tech-border-radius-sm);
+  opacity: 0.6;
+  cursor: pointer;
+  transition: var(--transition-opacity);
+  color: var(--color-text);
+  font-family: monospace;
+}
+.bl-modal-close:hover {
+  opacity: 1;
+}
+.bl-modal-close::before {
+  content: "×";
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+}
+
+.bl-modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: var(--spacing-md);
+  color: var(--color-text);
+}
+
+.bl-modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--spacing-md);
+  border-top: 1px 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));
+}
+.bl-modal-footer > * {
+  margin: var(--spacing-xs);
+}
+
+@media (min-width: 576px) {
+  .bl-modal-sm {
+    max-width: 300px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .bl-modal-lg {
+    max-width: 1000px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .bl-modal-xl {
+    max-width: 1200px;
+  }
+}
+
+.bl-modal-centered .bl-modal-dialog {
+  display: flex;
+  align-items: center;
+  min-height: calc(100% - var(--spacing-xl) * 2);
+}
+
+.bl-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.bl-dropdown-toggle::after {
+  display: inline-block;
+  margin-left: var(--spacing-xs);
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+}
+
+.bl-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: var(--z-index-dropdown);
+  display: none;
+  min-width: 10rem;
+  padding: var(--spacing-xs) 0;
+  margin: var(--spacing-xs) 0 0 0;
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+  text-align: left;
+  list-style: none;
+  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-radius: var(--tech-border-radius-md);
+  overflow: hidden;
+}
+.bl-dropdown-menu.bl-show {
+  display: block;
+}
+
+.bl-dropdown-menu-right {
+  right: 0;
+  left: auto;
+}
+
+.bl-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  clear: both;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text);
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: var(--transition-base);
+}
+.bl-dropdown-item:hover, .bl-dropdown-item:focus {
+  color: var(--color-text);
+  text-decoration: none;
+  background: var(--glass-bg-heavy);
+}
+.bl-dropdown-item:active {
+  color: var(--color-text);
+  background: var(--glass-bg-heavy);
+}
+.bl-dropdown-item.bl-active {
+  background: var(--glass-bg-heavy);
+  color: var(--color-accent);
+}
+.bl-dropdown-item.bl-disabled, .bl-dropdown-item:disabled {
+  color: var(--color-text-muted);
+  pointer-events: none;
+  background-color: transparent;
+  opacity: 0.6;
+}
+
+.bl-dropdown-divider {
+  height: 0;
+  margin: var(--spacing-xs) 0;
+  overflow: hidden;
+  border-top: 1px solid var(--glass-border-light);
+}
+
+.bl-dropdown-header {
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-md);
+  margin-bottom: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.bl-nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  background: var(--glass-bg-light);
+  backdrop-filter: blur(var(--glass-blur-md));
+  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  border: 1px solid var(--glass-border-medium);
+  border-radius: var(--tech-border-radius-sm);
+  padding: var(--spacing-xs);
+}
+
+.bl-nav-item {
+  display: list-item;
+}
+
+.bl-nav-link {
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-md);
+  color: var(--color-text);
+  text-decoration: none;
+  border-radius: var(--tech-border-radius-sm);
+  transition: var(--transition-base);
+}
+.bl-nav-link:hover {
+  color: var(--color-text);
+  text-decoration: none;
+  background: var(--glass-bg-medium);
+}
+.bl-nav-link:focus {
+  outline: 1px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+.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);
+}
+.bl-nav-link.bl-disabled {
+  color: var(--color-text-muted);
+  pointer-events: none;
+  cursor: default;
+}
+
+.bl-nav-horizontal {
+  flex-direction: row;
+}
+.bl-nav-horizontal .bl-nav-item {
+  margin-right: var(--spacing-xs);
+}
+
+.bl-nav-vertical {
+  flex-direction: column;
+}
+.bl-nav-vertical .bl-nav-item {
+  margin-bottom: var(--spacing-xs);
+}
+
+.bl-nav-tabs {
+  border-bottom: 1px solid var(--glass-border-light);
+  background: transparent;
+  padding: 0;
+}
+.bl-nav-tabs .bl-nav-link {
+  margin-bottom: -1px;
+  border: 1px solid transparent;
+  border-top-left-radius: var(--tech-border-radius-sm);
+  border-top-right-radius: var(--tech-border-radius-sm);
+  background: transparent;
+}
+.bl-nav-tabs .bl-nav-link:hover {
+  border-color: var(--glass-border-medium);
+  background: var(--glass-bg-light);
+  isolation: isolate;
+}
+.bl-nav-tabs .bl-nav-link.bl-active {
+  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);
+}
+
+.bl-nav-pills .bl-nav-link {
+  border-radius: var(--tech-border-radius-sm);
+}
+.bl-nav-pills .bl-nav-link.bl-active {
+  color: var(--color-text);
+  background: var(--glass-bg-heavy);
+  border-bottom: 2px solid var(--color-accent);
+}
+
+.bl-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--spacing-sm) 0;
+  margin-bottom: var(--spacing-md);
+  list-style: none;
+}
+
+.bl-breadcrumb-item {
+  display: flex;
+  align-items: center;
+}
+.bl-breadcrumb-item + .bl-breadcrumb-item {
+  padding-left: var(--spacing-sm);
+}
+.bl-breadcrumb-item + .bl-breadcrumb-item::before {
+  display: inline-block;
+  padding-right: var(--spacing-sm);
+  color: var(--color-text-muted);
+  content: "/";
+}
+.bl-breadcrumb-item.bl-active {
+  color: var(--color-text-muted);
+}
+
+.bl-pagination {
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+}
+
+.bl-page-item {
+  display: list-item;
+}
+.bl-page-item:first-child .bl-page-link {
+  margin-left: 0;
+  border-top-left-radius: var(--tech-border-radius-sm);
+  border-bottom-left-radius: var(--tech-border-radius-sm);
+}
+.bl-page-item:last-child .bl-page-link {
+  border-top-right-radius: var(--tech-border-radius-sm);
+  border-bottom-right-radius: var(--tech-border-radius-sm);
+}
+.bl-page-item.bl-active .bl-page-link {
+  z-index: 1;
+  color: var(--color-text);
+  background: var(--glass-bg-heavy);
+  border-color: var(--glass-border-heavy);
+}
+.bl-page-item.bl-disabled .bl-page-link {
+  color: var(--color-text-muted);
+  pointer-events: none;
+  cursor: auto;
+  background: var(--glass-bg-dark);
+  border-color: var(--glass-border-light);
+}
+
+.bl-page-link {
+  position: relative;
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-md);
+  margin-left: -1px;
+  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);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  transition: var(--transition-base);
+}
+.bl-page-link:hover {
+  z-index: 2;
+  color: var(--color-text);
+  text-decoration: none;
+  background: var(--glass-bg-medium);
+  border-color: var(--glass-border-heavy);
+}
+.bl-page-link:focus {
+  z-index: 2;
+  outline: 1px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+.bl-table {
+  width: 100%;
+  margin-bottom: var(--spacing-md);
+  color: var(--color-text);
+  vertical-align: top;
+  border-color: var(--glass-border-medium);
+  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-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-color: var(--glass-border-light);
+  border-right-width: 1px;
+  border-right-color: var(--glass-border-light);
+  box-shadow: inset 0 0 0 9999px transparent;
+}
+.bl-table > :not(caption) > * > *:last-child {
+  border-right-width: 0;
+}
+.bl-table > tbody {
+  vertical-align: inherit;
+}
+.bl-table > thead {
+  vertical-align: bottom;
+}
+.bl-table > :not(:first-child) {
+  border-top: 1px solid var(--glass-border-light);
+}
+
+.bl-table-caption {
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+  color: var(--color-text-muted);
+  text-align: left;
+  caption-side: bottom;
+}
+
+.bl-table-head {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+  background: var(--glass-bg-etched);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+}
+
+.bl-table-striped > tbody > tr:nth-of-type(odd) > * {
+  --bl-table-accent-bg: var(--glass-bg-light);
+  color: var(--color-text);
+  box-shadow: inset 0 0 0 9999px var(--bl-table-accent-bg);
+}
+
+.bl-table-bordered {
+  border: 1px solid var(--glass-border-medium);
+}
+.bl-table-bordered > :not(caption) > * {
+  border-width: 1px 0;
+}
+.bl-table-bordered > :not(caption) > * > * {
+  border-width: 0 1px;
+  border-color: var(--glass-border-light);
+}
+
+.bl-table-borderless > :not(caption) > * > * {
+  border-bottom-width: 0;
+  border-right-width: 0;
+}
+.bl-table-borderless > :not(:first-child) {
+  border-top-width: 0;
+}
+
+.bl-table-hover > tbody > tr:hover > * {
+  --bl-table-accent-bg: var(--glass-bg-heavy);
+  color: var(--color-text);
+  box-shadow: inset 0 0 0 9999px var(--bl-table-accent-bg);
+  transition: var(--transition-base);
+}
+
+.bl-table-sm > :not(caption) > * > * {
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+.bl-table-lg > :not(caption) > * > * {
+  padding: var(--spacing-md) var(--spacing-lg);
+}
+
+.bl-table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.bl-table-responsive > .bl-table {
+  margin-bottom: 0;
+}
+
+@media (max-width: 575.98px) {
+  .bl-table-responsive-sm {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .bl-table-responsive-sm > .bl-table {
+    margin-bottom: 0;
+  }
+}
+@media (max-width: 767.98px) {
+  .bl-table-responsive-md {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .bl-table-responsive-md > .bl-table {
+    margin-bottom: 0;
+  }
+}
+@media (max-width: 1023.98px) {
+  .bl-table-responsive-lg {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .bl-table-responsive-lg > .bl-table {
+    margin-bottom: 0;
+  }
+}
+@media (max-width: 1279.98px) {
+  .bl-table-responsive-xl {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .bl-table-responsive-xl > .bl-table {
+    margin-bottom: 0;
+  }
+}
+.bl-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.bl-tooltip-trigger {
+  cursor: help;
+}
+
+.bl-tooltip-content {
+  position: absolute;
+  z-index: var(--z-index-tooltip);
+  display: none;
+  max-width: 200px;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-mono);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  text-align: center;
+  text-decoration: none;
+  word-wrap: break-word;
+  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-radius: var(--tech-border-radius-sm);
+  opacity: 0;
+  transition: var(--transition-opacity);
+}
+.bl-tooltip-content.bl-show {
+  display: block;
+  opacity: 1;
+}
+
+.bl-tooltip-top .bl-tooltip-content {
+  bottom: 100%;
+  left: 50%;
+  margin-bottom: var(--spacing-xs);
+  transform: translateX(-50%);
+}
+.bl-tooltip-top .bl-tooltip-content::after {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  margin-left: -6px;
+  content: "";
+  border-width: 6px 6px 0 6px;
+  border-style: solid;
+  border-color: var(--glass-bg-medium) transparent transparent transparent;
+  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
+}
+
+.bl-tooltip-bottom .bl-tooltip-content {
+  top: 100%;
+  left: 50%;
+  margin-top: var(--spacing-xs);
+  transform: translateX(-50%);
+}
+.bl-tooltip-bottom .bl-tooltip-content::after {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  margin-left: -6px;
+  content: "";
+  border-width: 0 6px 6px 6px;
+  border-style: solid;
+  border-color: transparent transparent var(--glass-bg-medium) transparent;
+  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
+}
+
+.bl-tooltip-left .bl-tooltip-content {
+  top: 50%;
+  right: 100%;
+  margin-right: var(--spacing-xs);
+  transform: translateY(-50%);
+}
+.bl-tooltip-left .bl-tooltip-content::after {
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  width: 0;
+  height: 0;
+  margin-top: -6px;
+  content: "";
+  border-width: 6px 0 6px 6px;
+  border-style: solid;
+  border-color: transparent transparent transparent var(--glass-bg-medium);
+  clip-path: polygon(0 20%, 0 80%, 100% 100%, 100% 0);
+}
+
+.bl-tooltip-right .bl-tooltip-content {
+  top: 50%;
+  left: 100%;
+  margin-left: var(--spacing-xs);
+  transform: translateY(-50%);
+}
+.bl-tooltip-right .bl-tooltip-content::after {
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  width: 0;
+  height: 0;
+  margin-top: -6px;
+  content: "";
+  border-width: 6px 6px 6px 0;
+  border-style: solid;
+  border-color: transparent var(--glass-bg-medium) transparent transparent;
+  clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 20%);
+}
+
+.bl-progress {
+  display: flex;
+  height: 1rem;
+  overflow: hidden;
+  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-radius: var(--tech-border-radius-sm);
+}
+
+.bl-progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--color-text-inverse);
+  text-align: center;
+  white-space: nowrap;
+  background: var(--color-accent);
+  transition: width var(--transition-duration-slow) var(--transition-ease-linear);
+}
+
+.bl-progress-bar-primary {
+  background: var(--color-accent);
+}
+
+.bl-progress-bar-secondary {
+  background: var(--glass-bg-heavy);
+}
+
+.bl-progress-bar-success {
+  background: var(--color-success);
+}
+
+.bl-progress-bar-warning {
+  background: var(--color-warning);
+}
+
+.bl-progress-bar-error {
+  background: var(--color-error);
+}
+
+.bl-progress-bar-info {
+  background: var(--color-info);
+}
+
+.bl-progress-sm {
+  height: 0.5rem;
+}
+
+.bl-progress-lg {
+  height: 1.5rem;
+}
+
+.bl-spinner {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: text-bottom;
+  border: var(--border-width-base) solid var(--glass-border-medium);
+  border-top-color: var(--color-accent);
+  border-radius: var(--tech-border-radius-sm);
+  background: var(--glass-bg-light);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  animation: bl-spinner-rotate 0.75s linear infinite;
+  position: relative;
+}
+.bl-spinner::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  background: var(--color-accent);
+  opacity: 0.3;
+  border-radius: var(--tech-border-radius-sm);
+  animation: bl-spinner-inner 1.5s linear infinite;
+}
+
+@keyframes bl-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes bl-spinner-inner {
+  0% {
+    transform: rotate(0deg);
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    transform: rotate(360deg);
+    opacity: 0.3;
+  }
+}
+.bl-spinner-primary {
+  border-top-color: var(--color-accent);
+}
+.bl-spinner-primary::before {
+  background: var(--color-accent);
+}
+
+.bl-spinner-secondary {
+  border-top-color: var(--color-secondary);
+}
+.bl-spinner-secondary::before {
+  background: var(--color-secondary);
+}
+
+.bl-spinner-success {
+  border-top-color: var(--color-success);
+}
+.bl-spinner-success::before {
+  background: var(--color-success);
+}
+
+.bl-spinner-warning {
+  border-top-color: var(--color-warning);
+}
+.bl-spinner-warning::before {
+  background: var(--color-warning);
+}
+
+.bl-spinner-error {
+  border-top-color: var(--color-error);
+}
+.bl-spinner-error::before {
+  background: var(--color-error);
+}
+
+.bl-spinner-info {
+  border-top-color: var(--color-info);
+}
+.bl-spinner-info::before {
+  background: var(--color-info);
+}
+
+.bl-spinner-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: var(--border-width-thin);
+}
+
+.bl-spinner-lg {
+  width: 3rem;
+  height: 3rem;
+  border-width: var(--border-width-base);
+}
+
+@font-face {
+  font-family: "Baseline Icons";
+  src: url("../fonts/baseline-icons.woff2") format("woff2"), url("../fonts/baseline-icons.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+.bl-icon {
+  display: inline-block;
+  font-family: "Baseline Icons";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  speak: never;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  vertical-align: middle;
+}
+
+.bl-icon-xs {
+  font-size: 0.75rem;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.bl-icon-sm {
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+}
+
+.bl-icon-md {
+  font-size: 1.25rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.bl-icon-lg {
+  font-size: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.bl-icon-xl {
+  font-size: 2rem;
+  width: 2rem;
+  height: 2rem;
+}
+
+.bl-icon-home::before {
+  content: "\e900";
+}
+
+.bl-icon-user::before {
+  content: "\e901";
+}
+
+.bl-icon-search::before {
+  content: "\e902";
+}
+
+.bl-icon-menu::before {
+  content: "\e903";
+}
+
+.bl-icon-close::before {
+  content: "\e904";
+}
+
+.bl-icon-chevron-left::before {
+  content: "\e905";
+}
+
+.bl-icon-chevron-right::before {
+  content: "\e906";
+}
+
+.bl-icon-chevron-up::before {
+  content: "\e907";
+}
+
+.bl-icon-chevron-down::before {
+  content: "\e908";
+}
+
+.bl-icon-arrow-left::before {
+  content: "\e909";
+}
+
+.bl-icon-arrow-right::before {
+  content: "\e90a";
+}
+
+.bl-icon-arrow-up::before {
+  content: "\e90b";
+}
+
+.bl-icon-arrow-down::before {
+  content: "\e90c";
+}
+
+.bl-icon-check::before {
+  content: "\e90d";
+}
+
+.bl-icon-cross::before {
+  content: "\e90e";
+}
+
+.bl-icon-plus::before {
+  content: "\e90f";
+}
+
+.bl-icon-minus::before {
+  content: "\e910";
+}
+
+.bl-icon-info::before {
+  content: "\e911";
+}
+
+.bl-icon-warning::before {
+  content: "\e912";
+}
+
+.bl-icon-error::before {
+  content: "\e913";
+}
+
+.bl-icon-success::before {
+  content: "\e914";
+}
+
+.bl-icon-heart::before {
+  content: "\e915";
+}
+
+.bl-icon-star::before {
+  content: "\e916";
+}
+
+.bl-icon-bookmark::before {
+  content: "\e917";
+}
+
+.bl-icon-share::before {
+  content: "\e918";
+}
+
+.bl-icon-download::before {
+  content: "\e919";
+}
+
+.bl-icon-upload::before {
+  content: "\e91a";
+}
+
+.bl-icon-edit::before {
+  content: "\e91b";
+}
+
+.bl-icon-delete::before {
+  content: "\e91c";
+}
+
+.bl-icon-settings::before {
+  content: "\e91d";
+}
+
+.bl-icon-bell::before {
+  content: "\e91e";
+}
+
+.bl-icon-mail::before {
+  content: "\e91f";
+}
+
+.bl-icon-phone::before {
+  content: "\e920";
+}
+
+.bl-icon-calendar::before {
+  content: "\e921";
+}
+
+.bl-icon-clock::before {
+  content: "\e922";
+}
+
+.bl-icon-image::before {
+  content: "\e923";
+}
+
+.bl-icon-video::before {
+  content: "\e924";
+}
+
+.bl-icon-file::before {
+  content: "\e925";
+}
+
+.bl-icon-folder::before {
+  content: "\e926";
+}
+
+.bl-icon-lock::before {
+  content: "\e927";
+}
+
+.bl-icon-unlock::before {
+  content: "\e928";
+}
+
+.bl-icon-eye::before {
+  content: "\e929";
+}
+
+.bl-icon-eye-off::before {
+  content: "\e92a";
+}
+
+.bl-icon-filter::before {
+  content: "\e92b";
+}
+
+.bl-icon-sort::before {
+  content: "\e92c";
+}
+
+.bl-icon-grid::before {
+  content: "\e92d";
+}
+
+.bl-icon-list::before {
+  content: "\e92e";
+}
+
+.bl-icon-refresh::before {
+  content: "\e92f";
+}
+
+.bl-icon-loading::before {
+  content: "\e930";
+}
+
+.bl-icon-play::before {
+  content: "\e931";
+}
+
+.bl-icon-pause::before {
+  content: "\e932";
+}
+
+.bl-icon-stop::before {
+  content: "\e933";
+}
+
+.bl-icon-next::before {
+  content: "\e934";
+}
+
+.bl-icon-prev::before {
+  content: "\e935";
+}
+
+.bl-icon-volume::before {
+  content: "\e936";
+}
+
+.bl-icon-volume-off::before {
+  content: "\e937";
+}
+
+.bl-icon-fullscreen::before {
+  content: "\e938";
+}
+
+.bl-icon-fullscreen-exit::before {
+  content: "\e939";
+}
+
+.bl-icon-link::before {
+  content: "\e93a";
+}
+
+.bl-icon-external::before {
+  content: "\e93b";
+}
+
+.bl-icon-copy::before {
+  content: "\e93c";
+}
+
+.bl-icon-cut::before {
+  content: "\e93d";
+}
+
+.bl-icon-paste::before {
+  content: "\e93e";
+}
+
+.bl-icon-undo::before {
+  content: "\e93f";
+}
+
+.bl-icon-redo::before {
+  content: "\e940";
+}
+
+.bl-icon-save::before {
+  content: "\e941";
+}
+
+.bl-icon-print::before {
+  content: "\e942";
+}
+
+.bl-icon-zoom-in::before {
+  content: "\e943";
+}
+
+.bl-icon-zoom-out::before {
+  content: "\e944";
+}
+
+.bl-icon-maximize::before {
+  content: "\e945";
+}
+
+.bl-icon-minimize::before {
+  content: "\e946";
+}
+
+.bl-btn .bl-icon {
+  margin-right: var(--spacing-xs);
+}
+
+.bl-btn .bl-icon:last-child {
+  margin-right: 0;
+  margin-left: var(--spacing-xs);
+}
+
+.bl-btn .bl-icon:only-child {
+  margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-gray-50: #030712;
+    --color-gray-100: #111827;
+    --color-gray-200: #1f2937;
+    --color-gray-300: #374151;
+    --color-gray-400: #4b5563;
+    --color-gray-500: #6b7280;
+    --color-gray-600: #9ca3af;
+    --color-gray-700: #d1d5db;
+    --color-gray-800: #e5e7eb;
+    --color-gray-900: #f3f4f6;
+    --color-gray-950: #f9fafb;
+    --color-primary: #f3f4f6;
+    --color-primary-light: #e5e7eb;
+    --color-primary-dark: #d1d5db;
+    --color-secondary: #9ca3af;
+    --color-secondary-light: #d1d5db;
+    --color-secondary-dark: #6b7280;
+    --color-success: #34d399;
+    --color-success-light: #6ee7b7;
+    --color-success-dark: #10b981;
+    --color-warning: #fbbf24;
+    --color-warning-light: #fcd34d;
+    --color-warning-dark: #f59e0b;
+    --color-error: #f87171;
+    --color-error-light: #fca5a5;
+    --color-error-dark: #ef4444;
+    --color-info: #60a5fa;
+    --color-info-light: #93c5fd;
+    --color-info-dark: #3b82f6;
+    --color-text: #f3f4f6;
+    --color-text-muted: #9ca3af;
+    --color-text-light: #6b7280;
+    --color-text-inverse: #111827;
+    --color-bg: #111827;
+    --color-bg-alt: #1f2937;
+    --color-bg-overlay: rgba(0, 0, 0, 0.7);
+    --color-border: #374151;
+    --color-border-light: #1f2937;
+    --color-border-dark: #4b5563;
+    --color-border-focus: #60a5fa;
+  }
+}
+.bl-theme-dark,
+[data-theme=dark] {
+  --color-gray-50: #030712;
+  --color-gray-100: #111827;
+  --color-gray-200: #1f2937;
+  --color-gray-300: #374151;
+  --color-gray-400: #4b5563;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #9ca3af;
+  --color-gray-700: #d1d5db;
+  --color-gray-800: #e5e7eb;
+  --color-gray-900: #f3f4f6;
+  --color-gray-950: #f9fafb;
+  --color-primary: #f3f4f6;
+  --color-primary-light: #e5e7eb;
+  --color-primary-dark: #d1d5db;
+  --color-secondary: #9ca3af;
+  --color-secondary-light: #d1d5db;
+  --color-secondary-dark: #6b7280;
+  --color-success: #34d399;
+  --color-success-light: #6ee7b7;
+  --color-success-dark: #10b981;
+  --color-warning: #fbbf24;
+  --color-warning-light: #fcd34d;
+  --color-warning-dark: #f59e0b;
+  --color-error: #f87171;
+  --color-error-light: #fca5a5;
+  --color-error-dark: #ef4444;
+  --color-info: #60a5fa;
+  --color-info-light: #93c5fd;
+  --color-info-dark: #3b82f6;
+  --color-text: #f3f4f6;
+  --color-text-muted: #9ca3af;
+  --color-text-light: #6b7280;
+  --color-text-inverse: #111827;
+  --color-bg: #111827;
+  --color-bg-alt: #1f2937;
+  --color-bg-overlay: rgba(0, 0, 0, 0.7);
+  --color-border: #374151;
+  --color-border-light: #1f2937;
+  --color-border-dark: #4b5563;
+  --color-border-focus: #60a5fa;
+}