fokus-styles 2.0.0

package/dist/css/components.css

@@ -0,0 +1,3542 @@
+@charset "UTF-8";
+@layer reset, tokens, base, layout, components, utilities, overrides;
+@layer tokens {
+  :root {
+    --fs-color-white: #ffffff;
+    --fs-color-black: #000000;
+    --fs-color-text: #1e293b;
+    --fs-color-muted: #64748b;
+    --fs-color-border: #e2e8f0;
+    --fs-color-surface: #ffffff;
+    --fs-color-subtle: #f8fafc;
+    --fs-font-sans: Plus Jakarta Sans, sans-serif;
+    --fs-font-mono: Source Code Pro, monospace;
+    --fs-font-size-md: 0.8125rem;
+    --fs-font-size-h1: 1.75rem;
+    --fs-font-size-h2: 1.5rem;
+    --fs-font-size-h3: 1.3125rem;
+    --fs-font-size-h4: 1.125rem;
+    --fs-font-size-h5: 1rem;
+    --fs-font-size-h6: 0.875rem;
+    --fs-font-weight-semibold: 600;
+    --fs-line-height-base: 1.5;
+    --fs-line-height-heading: 1.25;
+    --fs-radius-sm: 4px;
+    --fs-radius-md: 6px;
+    --fs-radius-lg: 8px;
+    --fs-gutter-x: 1.5rem;
+    --fs-gutter-y: 0px;
+    --fs-space-0: 0;
+    --fs-space-1: 0.25rem;
+    --fs-space-2: 0.5rem;
+    --fs-space-3: 1rem;
+    --fs-space-4: 1.5rem;
+    --fs-space-5: 3rem;
+    --fs-z-base: 0;
+    --fs-z-dropdown: 1000;
+    --fs-z-sticky: 1020;
+    --fs-z-modal: 1050;
+    --fs-z-offcanvas: 1060;
+    --fs-z-notification: 1080;
+    --fs-z-toast: 1090;
+    --fs-z-tooltip: 1100;
+    --fs-control-height: 38px;
+    --fs-control-height-sm: 30px;
+    --fs-control-height-lg: 46px;
+    --fs-control-padding-x: 12px;
+    --fs-control-padding-x-sm: 8px;
+    --fs-control-padding-x-lg: 16px;
+    --fs-focus-width: 2px;
+    --fs-focus-offset: 2px;
+    --fs-focus-ring-alpha: 22%;
+    --fs-transition-fast: 150ms;
+    --fs-transition-normal: 220ms;
+    --fs-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --fs-border-width: 1px;
+    --fs-disabled-opacity: 0.5;
+    --fs-cq-sm: 320px;
+    --fs-cq-md: 480px;
+    --fs-cq-lg: 640px;
+    --fs-shadow-sm: 0 1px 3px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 10%);
+    --fs-shadow-md: 0 6px 12px rgb(0 0 0 / 15%), 0 3px 6px rgb(0 0 0 / 10%);
+    --fs-shadow-lg: 0 15px 30px rgb(0 0 0 / 18%), 0 6px 12px rgb(0 0 0 / 12%);
+    --fs-tooltip-bg: #1e293b;
+    --fs-tooltip-text: #ffffff;
+    --fs-color-primary: #1a61e6;
+    --fs-color-on-primary: #ffffff;
+    --fs-alert-primary-bg: rgb(220.3846532222, 232.689549371, 254.1042117072);
+    --fs-alert-primary-text: rgb(4.2540793692, 32.6552622518, 88.5748738661);
+    --fs-color-secondary: #64748b;
+    --fs-color-on-secondary: #ffffff;
+    --fs-alert-secondary-bg: rgb(230.2895610064, 233.0325853352, 236.9919508609);
+    --fs-alert-secondary-text: rgb(33.9166068747, 40.6437781967, 50.3140869721);
+    --fs-color-success: rgb(13, 209, 87);
+    --fs-color-on-success: #000000;
+    --fs-alert-success-bg: rgb(228.9046733915, 249.1514320752, 230.8709345684);
+    --fs-alert-success-text: rgb(1.6574790861, 79.745461506, 28.4507801755);
+    --fs-color-warning: #fab633;
+    --fs-color-on-warning: #000000;
+    --fs-alert-warning-bg: rgb(254.9170612621, 244.6528756631, 228.9710928247);
+    --fs-alert-warning-text: rgb(96.9838380187, 68.3933599001, 13.3146447009);
+    --fs-color-danger: #cc3335;
+    --fs-color-on-danger: #ffffff;
+    --fs-alert-danger-bg: rgb(251.9225977632, 226.389403069, 223.5618211362);
+    --fs-alert-danger-text: rgb(77.6432204678, 13.3146447009, 14.1555411162);
+    --fs-color-info: #5e5cc7;
+    --fs-color-on-info: #ffffff;
+    --fs-alert-info-bg: rgb(228.2395257626, 230.4806192824, 248.3934544766);
+    --fs-alert-info-text: rgb(31.3939176289, 30.5530212136, 75.5409794297);
+    --fs-feedback-primary-bg: #e6f0ff;
+    --fs-feedback-secondary-bg: #f8fafc;
+    --fs-feedback-success-bg: #e6fff2;
+    --fs-feedback-warning-bg: #fff9e6;
+    --fs-feedback-danger-bg: #fff2f3;
+    --fs-feedback-info-bg: #f2f2ff;
+  }
+  @supports (color: oklch(0% 0 0deg)) {
+    :root {
+      --fs-color-text: oklch(27.9495237712% 0.0368481257 260.0309873929deg);
+      --fs-color-muted: oklch(55.4391007662% 0.040717043 257.4166191214deg);
+      --fs-color-border: oklch(92.876126719% 0.0126187744 255.5078854448deg);
+      --fs-color-subtle: oklch(98.4151869501% 0.0034126992 247.8577745944deg);
+      --fs-tooltip-bg: oklch(27.9495237712% 0.0368481257 260.0309873929deg);
+      --fs-color-primary: oklch(53.5630074284% 0.2132145174 261.6264320248deg);
+      --fs-color-on-primary: #ffffff;
+      --fs-alert-primary-bg: oklch(93.0344511143% 0.0319821776 261.6264320248deg);
+      --fs-alert-primary-text: oklch(26.7815037142% 0.1066072587 261.6264320248deg);
+      --fs-color-secondary: oklch(55.4391007662% 0.040717043 257.4166191214deg);
+      --fs-color-on-secondary: #ffffff;
+      --fs-alert-secondary-bg: oklch(93.3158651149% 0.0061075564 257.4166191214deg);
+      --fs-alert-secondary-text: oklch(27.7195503831% 0.0203585215 257.4166191214deg);
+      --fs-color-success: oklch(75.151587899% 0.2146126169 148.125846236deg);
+      --fs-color-on-success: #000000;
+      --fs-alert-success-bg: oklch(96.2727381849% 0.0321918925 148.125846236deg);
+      --fs-alert-success-text: oklch(37.5757939495% 0.1073063085 148.125846236deg);
+      --fs-color-warning: oklch(81.9510815663% 0.1562613975 78.6575213966deg);
+      --fs-color-on-warning: #000000;
+      --fs-alert-warning-bg: oklch(97.2926622349% 0.0234392096 78.6575213966deg);
+      --fs-alert-warning-text: oklch(40.9755407832% 0.0781306987 78.6575213966deg);
+      --fs-color-danger: oklch(55.9653139301% 0.1897270855 25.2407937498deg);
+      --fs-color-on-danger: #ffffff;
+      --fs-alert-danger-bg: oklch(93.3947970895% 0.0284590628 25.2407937498deg);
+      --fs-alert-danger-text: oklch(27.982656965% 0.0948635427 25.2407937498deg);
+      --fs-color-info: oklch(53.3359780029% 0.1620131129 280.2231949375deg);
+      --fs-color-on-info: #ffffff;
+      --fs-alert-info-bg: oklch(93.0003967004% 0.0243019669 280.2231949375deg);
+      --fs-alert-info-text: oklch(26.6679890014% 0.0810065564 280.2231949375deg);
+      --fs-feedback-primary-bg: oklch(95.2067827456% 0.0228899025 258.359342143deg);
+      --fs-feedback-secondary-bg: oklch(98.4151869501% 0.0034126992 247.8577745944deg);
+      --fs-feedback-success-bg: oklch(97.8305614459% 0.0311593614 163.2740567608deg);
+      --fs-feedback-warning-bg: oklch(98.17094418% 0.025708244 92.3886876566deg);
+      --fs-feedback-danger-bg: oklch(97.1603097552% 0.0140720277 12.0135639679deg);
+      --fs-feedback-info-bg: oklch(96.4918490239% 0.0173174767 286.0707018324deg);
+    }
+  }
+}
+@layer tokens {
+  :root {
+    --fs-color-bg-surface: var(--fs-color-surface);
+    --fs-color-bg-subtle: var(--fs-color-subtle);
+    --fs-color-text-primary: var(--fs-color-text);
+    --fs-color-text-muted: var(--fs-color-muted);
+    --fs-color-border-default: var(--fs-color-border);
+    --fs-color-focus: var(--fs-color-primary);
+    --fs-color-surface-raised: var(--fs-color-surface);
+    --fs-color-surface-interactive: var(--fs-color-subtle);
+    --fs-color-action-primary: var(--fs-color-primary);
+    --fs-color-action-danger: var(--fs-color-danger);
+  }
+}
+@layer tokens {
+  :root {
+    --fs-chart-series-1: var(--fs-color-primary);
+    --fs-chart-series-2: var(--fs-color-success);
+    --fs-chart-series-3: var(--fs-color-warning);
+    --fs-chart-series-4: var(--fs-color-danger);
+    --fs-chart-series-5: var(--fs-color-info);
+    --fs-chart-series-6: var(--fs-color-secondary);
+    --fs-chart-grid: var(--fs-color-border);
+    --fs-chart-axis: var(--fs-color-muted);
+    --fs-chart-tooltip-bg: var(--fs-tooltip-bg);
+    --fs-chart-tooltip-text: var(--fs-tooltip-text);
+  }
+}
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  html {
+    line-height: var(--fs-line-height-base);
+    -webkit-text-size-adjust: 100%;
+            text-size-adjust: 100%;
+  }
+  body {
+    margin: 0;
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+  }
+  [hidden] {
+    display: none !important;
+  }
+}
+@layer base {
+  body,
+  button,
+  input,
+  select,
+  textarea {
+    font-family: var(--fs-font-sans);
+    font-size: var(--fs-font-size-md);
+  }
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: var(--fs-font-mono);
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 0;
+    font-weight: var(--fs-font-weight-semibold);
+    line-height: var(--fs-line-height-heading);
+  }
+  h1 {
+    font-size: var(--fs-font-size-h1);
+  }
+  h2 {
+    font-size: var(--fs-font-size-h2);
+  }
+  h3 {
+    font-size: var(--fs-font-size-h3);
+  }
+  h4 {
+    font-size: var(--fs-font-size-h4);
+  }
+  h5 {
+    font-size: var(--fs-font-size-h5);
+  }
+  h6 {
+    font-size: var(--fs-font-size-h6);
+  }
+}
+@layer base {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+    .fs-spinner,
+    .fs-progress-bar-animated,
+    .fs-progress-indeterminate .fs-progress-bar {
+      animation-duration: 1.5s !important;
+      animation-iteration-count: infinite !important;
+    }
+  }
+}
+@layer components {
+  .fs-btn {
+    --fs-btn-color: var(--fs-color-text-primary);
+    --fs-btn-bg: var(--fs-color-bg-subtle);
+    --fs-btn-border-color: var(--fs-color-border-default);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--fs-space-1);
+    min-height: var(--fs-control-height);
+    padding: 0 var(--fs-control-padding-x);
+    border: var(--fs-border-width) solid var(--fs-btn-border-color);
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-btn-color);
+    background-color: var(--fs-btn-bg);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    text-decoration: none;
+    cursor: pointer;
+    transition: color var(--fs-transition-fast) var(--fs-ease-standard), background-color var(--fs-transition-fast) var(--fs-ease-standard), border-color var(--fs-transition-fast) var(--fs-ease-standard), box-shadow var(--fs-transition-fast) var(--fs-ease-standard);
+  }
+  .fs-btn:hover {
+    --fs-btn-bg: var(--fs-btn-hover-bg, var(--fs-color-subtle));
+  }
+  .fs-btn:active {
+    --fs-btn-bg: var(--fs-btn-active-bg, var(--fs-color-border));
+  }
+  .fs-btn:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-btn:disabled,
+  .fs-btn.is-disabled {
+    opacity: var(--fs-disabled-opacity);
+    pointer-events: none;
+  }
+  .fs-btn-primary {
+    --fs-btn-color: var(--fs-color-on-primary);
+    --fs-btn-bg: var(--fs-color-primary);
+    --fs-btn-border-color: var(--fs-color-primary);
+    --fs-btn-hover-bg: var(--fs-color-primary);
+    --fs-btn-active-bg: var(--fs-color-primary);
+  }
+  .fs-btn-outline-primary {
+    --fs-btn-color: var(--fs-alert-primary-text);
+    --fs-btn-bg: transparent;
+    --fs-btn-border-color: var(--fs-color-primary);
+  }
+  .fs-btn-outline-primary:hover,
+  .fs-btn-outline-primary:active {
+    --fs-btn-color: var(--fs-color-on-primary);
+    --fs-btn-bg: var(--fs-color-primary);
+  }
+  .fs-btn-secondary {
+    --fs-btn-color: var(--fs-color-on-secondary);
+    --fs-btn-bg: var(--fs-color-secondary);
+    --fs-btn-border-color: var(--fs-color-secondary);
+    --fs-btn-hover-bg: var(--fs-color-secondary);
+    --fs-btn-active-bg: var(--fs-color-secondary);
+  }
+  .fs-btn-outline-secondary {
+    --fs-btn-color: var(--fs-alert-secondary-text);
+    --fs-btn-bg: transparent;
+    --fs-btn-border-color: var(--fs-color-secondary);
+  }
+  .fs-btn-outline-secondary:hover,
+  .fs-btn-outline-secondary:active {
+    --fs-btn-color: var(--fs-color-on-secondary);
+    --fs-btn-bg: var(--fs-color-secondary);
+  }
+  .fs-btn-success {
+    --fs-btn-color: var(--fs-color-on-success);
+    --fs-btn-bg: var(--fs-color-success);
+    --fs-btn-border-color: var(--fs-color-success);
+    --fs-btn-hover-bg: var(--fs-color-success);
+    --fs-btn-active-bg: var(--fs-color-success);
+  }
+  .fs-btn-outline-success {
+    --fs-btn-color: var(--fs-alert-success-text);
+    --fs-btn-bg: transparent;
+    --fs-btn-border-color: var(--fs-color-success);
+  }
+  .fs-btn-outline-success:hover,
+  .fs-btn-outline-success:active {
+    --fs-btn-color: var(--fs-color-on-success);
+    --fs-btn-bg: var(--fs-color-success);
+  }
+  .fs-btn-warning {
+    --fs-btn-color: var(--fs-color-on-warning);
+    --fs-btn-bg: var(--fs-color-warning);
+    --fs-btn-border-color: var(--fs-color-warning);
+    --fs-btn-hover-bg: var(--fs-color-warning);
+    --fs-btn-active-bg: var(--fs-color-warning);
+  }
+  .fs-btn-outline-warning {
+    --fs-btn-color: var(--fs-alert-warning-text);
+    --fs-btn-bg: transparent;
+    --fs-btn-border-color: var(--fs-color-warning);
+  }
+  .fs-btn-outline-warning:hover,
+  .fs-btn-outline-warning:active {
+    --fs-btn-color: var(--fs-color-on-warning);
+    --fs-btn-bg: var(--fs-color-warning);
+  }
+  .fs-btn-danger {
+    --fs-btn-color: var(--fs-color-on-danger);
+    --fs-btn-bg: var(--fs-color-danger);
+    --fs-btn-border-color: var(--fs-color-danger);
+    --fs-btn-hover-bg: var(--fs-color-danger);
+    --fs-btn-active-bg: var(--fs-color-danger);
+  }
+  .fs-btn-outline-danger {
+    --fs-btn-color: var(--fs-alert-danger-text);
+    --fs-btn-bg: transparent;
+    --fs-btn-border-color: var(--fs-color-danger);
+  }
+  .fs-btn-outline-danger:hover,
+  .fs-btn-outline-danger:active {
+    --fs-btn-color: var(--fs-color-on-danger);
+    --fs-btn-bg: var(--fs-color-danger);
+  }
+  .fs-btn-info {
+    --fs-btn-color: var(--fs-color-on-info);
+    --fs-btn-bg: var(--fs-color-info);
+    --fs-btn-border-color: var(--fs-color-info);
+    --fs-btn-hover-bg: var(--fs-color-info);
+    --fs-btn-active-bg: var(--fs-color-info);
+  }
+  .fs-btn-outline-info {
+    --fs-btn-color: var(--fs-alert-info-text);
+    --fs-btn-bg: transparent;
+    --fs-btn-border-color: var(--fs-color-info);
+  }
+  .fs-btn-outline-info:hover,
+  .fs-btn-outline-info:active {
+    --fs-btn-color: var(--fs-color-on-info);
+    --fs-btn-bg: var(--fs-color-info);
+  }
+  .fs-btn-sm {
+    min-height: var(--fs-control-height-sm);
+    padding: 0 var(--fs-control-padding-x-sm);
+    font-size: 0.75rem;
+  }
+  .fs-btn-lg {
+    min-height: var(--fs-control-height-lg);
+    padding: 0 var(--fs-control-padding-x-lg);
+    font-size: 1rem;
+  }
+  .fs-btn-close {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-color-muted);
+    background-color: var(--fs-color-surface-raised);
+    cursor: pointer;
+  }
+  .fs-btn-close::before,
+  .fs-btn-close::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 12px;
+    height: 2px;
+    background-color: currentcolor;
+    content: "";
+  }
+  .fs-btn-close::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+  .fs-btn-close::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+  .fs-btn-close:hover {
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-btn-close:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+}
+@layer components {
+  .fs-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border: var(--fs-border-width) solid var(--fs-color-border-default);
+    border-radius: var(--fs-radius-lg);
+    background-color: var(--fs-color-surface);
+  }
+  .fs-card-horizontal {
+    flex-direction: row;
+  }
+  .fs-card-horizontal .fs-card-header:first-child {
+    border-radius: calc(var(--fs-radius-lg) - 1px) 0 0 calc(var(--fs-radius-lg) - 1px);
+    border-right: 1px solid var(--fs-color-border);
+    border-bottom: none;
+  }
+  .fs-card-horizontal .fs-card-footer:last-child {
+    border-radius: 0 calc(var(--fs-radius-lg) - 1px) calc(var(--fs-radius-lg) - 1px) 0;
+    border-left: 1px solid var(--fs-color-border);
+    border-top: none;
+  }
+  .fs-card-clickable {
+    transition: border-color var(--fs-transition-fast) var(--fs-ease-standard), box-shadow var(--fs-transition-fast) var(--fs-ease-standard), transform var(--fs-transition-fast) var(--fs-ease-standard);
+  }
+  .fs-card-clickable:hover,
+  .fs-card-clickable:focus-within {
+    border-color: var(--fs-color-primary);
+    box-shadow: var(--fs-shadow-sm);
+    transform: translateY(-1px);
+  }
+  .fs-stretched-link {
+    color: inherit;
+    text-decoration: none;
+  }
+  .fs-stretched-link::after {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    content: "";
+  }
+  .fs-card-header,
+  .fs-card-body,
+  .fs-card-footer {
+    padding: 10px;
+  }
+  .fs-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    border-bottom: 1px solid var(--fs-color-border);
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-card-header .fs-card-title {
+    margin: 0;
+  }
+  .fs-card-header:first-child {
+    border-radius: calc(var(--fs-radius-lg) - 1px) calc(var(--fs-radius-lg) - 1px) 0 0;
+  }
+  .fs-card-footer {
+    border-top: 1px solid var(--fs-color-border);
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-card-footer:last-child {
+    border-radius: 0 0 calc(var(--fs-radius-lg) - 1px) calc(var(--fs-radius-lg) - 1px);
+  }
+  .fs-card-title {
+    margin: 0 0 4px;
+    color: var(--fs-color-text);
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  .fs-card-subtitle {
+    margin: 0 0 8px;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+  }
+  .fs-card-text {
+    margin: 0 0 8px;
+    color: var(--fs-color-text);
+    font-size: 0.8125rem;
+  }
+  .fs-card-text:last-child {
+    margin-bottom: 0;
+  }
+  .fs-card-sm .fs-card-header,
+  .fs-card-sm .fs-card-body,
+  .fs-card-sm .fs-card-footer {
+    padding: 5px;
+  }
+  .fs-card-lg .fs-card-header,
+  .fs-card-lg .fs-card-body,
+  .fs-card-lg .fs-card-footer {
+    padding: 15px;
+  }
+}
+@layer components {
+  .fs-alert {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px 16px;
+    border: 1px solid var(--fs-color-border);
+    border-left: 5px solid var(--fs-color-border);
+    border-radius: 0;
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface-raised);
+    font-size: 0.75rem;
+  }
+  .fs-alert-primary {
+    color: var(--fs-alert-primary-text);
+    background-color: var(--fs-alert-primary-bg);
+    border-color: var(--fs-color-primary);
+  }
+  .fs-alert-secondary {
+    color: var(--fs-alert-secondary-text);
+    background-color: var(--fs-alert-secondary-bg);
+    border-color: var(--fs-color-secondary);
+  }
+  .fs-alert-success {
+    color: var(--fs-alert-success-text);
+    background-color: var(--fs-alert-success-bg);
+    border-color: var(--fs-color-success);
+  }
+  .fs-alert-warning {
+    color: var(--fs-alert-warning-text);
+    background-color: var(--fs-alert-warning-bg);
+    border-color: var(--fs-color-warning);
+  }
+  .fs-alert-danger {
+    color: var(--fs-alert-danger-text);
+    background-color: var(--fs-alert-danger-bg);
+    border-color: var(--fs-color-danger);
+  }
+  .fs-alert-info {
+    color: var(--fs-alert-info-text);
+    background-color: var(--fs-alert-info-bg);
+    border-color: var(--fs-color-info);
+  }
+}
+@layer components {
+  .fs-badge {
+    --fs-badge-color: var(--fs-color-text);
+    --fs-badge-bg: var(--fs-color-subtle);
+    --fs-badge-border: transparent;
+    --fs-badge-height: 22px;
+    --fs-badge-radius: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    justify-content: center;
+    min-height: var(--fs-badge-height);
+    padding: 1px 8px 3px;
+    border: 1px solid var(--fs-badge-border);
+    border-radius: var(--fs-badge-radius);
+    color: var(--fs-badge-color);
+    background-color: var(--fs-badge-bg);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    line-height: 1;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+  .fs-badge-primary {
+    --fs-badge-color: #ffffff;
+    --fs-badge-bg: var(--fs-color-primary);
+  }
+  .fs-badge-soft-primary {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-primary) 45%, var(--fs-color-text));
+    --fs-badge-bg: color-mix(in srgb, var(--fs-color-primary) 14%, transparent);
+    --fs-badge-border: color-mix(in srgb, var(--fs-color-primary) 38%, transparent);
+  }
+  .fs-badge-outline-primary {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-primary) 45%, var(--fs-color-text));
+    --fs-badge-bg: transparent;
+    --fs-badge-border: var(--fs-badge-color);
+  }
+  .fs-badge-secondary {
+    --fs-badge-color: #ffffff;
+    --fs-badge-bg: var(--fs-color-secondary);
+  }
+  .fs-badge-soft-secondary {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-secondary) 45%, var(--fs-color-text));
+    --fs-badge-bg: color-mix(in srgb, var(--fs-color-secondary) 14%, transparent);
+    --fs-badge-border: color-mix(in srgb, var(--fs-color-secondary) 38%, transparent);
+  }
+  .fs-badge-outline-secondary {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-secondary) 45%, var(--fs-color-text));
+    --fs-badge-bg: transparent;
+    --fs-badge-border: var(--fs-badge-color);
+  }
+  .fs-badge-success {
+    --fs-badge-color: #000000;
+    --fs-badge-bg: var(--fs-color-success);
+  }
+  .fs-badge-soft-success {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-success) 45%, var(--fs-color-text));
+    --fs-badge-bg: color-mix(in srgb, var(--fs-color-success) 14%, transparent);
+    --fs-badge-border: color-mix(in srgb, var(--fs-color-success) 38%, transparent);
+  }
+  .fs-badge-outline-success {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-success) 45%, var(--fs-color-text));
+    --fs-badge-bg: transparent;
+    --fs-badge-border: var(--fs-badge-color);
+  }
+  .fs-badge-warning {
+    --fs-badge-color: #000000;
+    --fs-badge-bg: var(--fs-color-warning);
+  }
+  .fs-badge-soft-warning {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-warning) 45%, var(--fs-color-text));
+    --fs-badge-bg: color-mix(in srgb, var(--fs-color-warning) 14%, transparent);
+    --fs-badge-border: color-mix(in srgb, var(--fs-color-warning) 38%, transparent);
+  }
+  .fs-badge-outline-warning {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-warning) 45%, var(--fs-color-text));
+    --fs-badge-bg: transparent;
+    --fs-badge-border: var(--fs-badge-color);
+  }
+  .fs-badge-danger {
+    --fs-badge-color: #ffffff;
+    --fs-badge-bg: var(--fs-color-danger);
+  }
+  .fs-badge-soft-danger {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-danger) 45%, var(--fs-color-text));
+    --fs-badge-bg: color-mix(in srgb, var(--fs-color-danger) 14%, transparent);
+    --fs-badge-border: color-mix(in srgb, var(--fs-color-danger) 38%, transparent);
+  }
+  .fs-badge-outline-danger {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-danger) 45%, var(--fs-color-text));
+    --fs-badge-bg: transparent;
+    --fs-badge-border: var(--fs-badge-color);
+  }
+  .fs-badge-info {
+    --fs-badge-color: #ffffff;
+    --fs-badge-bg: var(--fs-color-info);
+  }
+  .fs-badge-soft-info {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-info) 45%, var(--fs-color-text));
+    --fs-badge-bg: color-mix(in srgb, var(--fs-color-info) 14%, transparent);
+    --fs-badge-border: color-mix(in srgb, var(--fs-color-info) 38%, transparent);
+  }
+  .fs-badge-outline-info {
+    --fs-badge-color: color-mix(in srgb, var(--fs-color-info) 45%, var(--fs-color-text));
+    --fs-badge-bg: transparent;
+    --fs-badge-border: var(--fs-badge-color);
+  }
+  .fs-badge-sm {
+    --fs-badge-height: 18px;
+    padding: 0 6px 2px;
+    font-size: 0.6875rem;
+  }
+  .fs-badge-lg {
+    --fs-badge-height: 26px;
+    padding: 2px 10px 4px;
+    font-size: 0.8125rem;
+  }
+  .fs-badge-dot::before {
+    width: 6px;
+    height: 6px;
+    flex: 0 0 6px;
+    border-radius: 50%;
+    background-color: currentcolor;
+    transform: translateY(1px);
+    content: "";
+  }
+  .fs-badge-count {
+    min-width: var(--fs-badge-height);
+    padding-inline: 6px;
+    font-variant-numeric: tabular-nums;
+  }
+  .fs-badge-split {
+    --fs-badge-split-label-bg: var(--fs-color-black);
+    --fs-badge-split-label-color: var(--fs-color-white);
+    --fs-badge-split-value-bg: var(--fs-color-primary);
+    --fs-badge-split-value-color: #ffffff;
+    --fs-badge-split-height: 22px;
+    --fs-badge-split-radius: 0;
+    display: inline-flex;
+    min-height: var(--fs-badge-split-height);
+    overflow: hidden;
+    border-radius: var(--fs-badge-split-radius);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    line-height: 1;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+  .fs-badge-split-label,
+  .fs-badge-split-value {
+    display: inline-flex;
+    align-items: center;
+    min-height: var(--fs-badge-split-height);
+    padding: 1px 8px 3px;
+  }
+  .fs-badge-split-label {
+    color: var(--fs-badge-split-label-color);
+    background-color: var(--fs-badge-split-label-bg);
+  }
+  .fs-badge-split-value {
+    color: var(--fs-badge-split-value-color);
+    background-color: var(--fs-badge-split-value-bg);
+    font-variant-numeric: tabular-nums;
+  }
+  .fs-badge-split-primary {
+    --fs-badge-split-value-bg: var(--fs-color-primary);
+    --fs-badge-split-value-color: #ffffff;
+  }
+  .fs-badge-split-secondary {
+    --fs-badge-split-value-bg: var(--fs-color-secondary);
+    --fs-badge-split-value-color: #ffffff;
+  }
+  .fs-badge-split-success {
+    --fs-badge-split-value-bg: var(--fs-color-success);
+    --fs-badge-split-value-color: #000000;
+  }
+  .fs-badge-split-warning {
+    --fs-badge-split-value-bg: var(--fs-color-warning);
+    --fs-badge-split-value-color: #000000;
+  }
+  .fs-badge-split-danger {
+    --fs-badge-split-value-bg: var(--fs-color-danger);
+    --fs-badge-split-value-color: #ffffff;
+  }
+  .fs-badge-split-info {
+    --fs-badge-split-value-bg: var(--fs-color-info);
+    --fs-badge-split-value-color: #ffffff;
+  }
+  .fs-badge-split.fs-badge-sm {
+    --fs-badge-split-height: 18px;
+    min-height: var(--fs-badge-split-height);
+    padding: 0;
+  }
+  .fs-badge-split.fs-badge-lg {
+    --fs-badge-split-height: 26px;
+    min-height: var(--fs-badge-split-height);
+    padding: 0;
+    font-size: 0.8125rem;
+  }
+  .fs-badge-split.fs-badge-sm .fs-badge-split-label,
+  .fs-badge-split.fs-badge-sm .fs-badge-split-value {
+    padding: 0 6px 2px;
+  }
+  .fs-badge-split.fs-badge-lg .fs-badge-split-label,
+  .fs-badge-split.fs-badge-lg .fs-badge-split-value {
+    padding: 2px 10px 4px;
+  }
+}
+@layer components {
+  .fs-table {
+    width: 100%;
+    margin-bottom: 0;
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface-raised);
+    border-collapse: collapse;
+  }
+  .fs-table th,
+  .fs-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--fs-color-border);
+    text-align: left;
+    vertical-align: middle;
+  }
+  .fs-table thead th {
+    border-bottom-width: 2px;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+  .fs-table-striped tbody tr:nth-of-type(odd) {
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-table-hover tbody tr:hover {
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-table-bordered th,
+  .fs-table-bordered td {
+    border: 1px solid var(--fs-color-border);
+  }
+  .fs-table-borderless th,
+  .fs-table-borderless td {
+    border: 0;
+  }
+  .fs-table-primary {
+    background-color: var(--fs-alert-primary-bg);
+    color: var(--fs-alert-primary-text);
+  }
+  .fs-table-secondary {
+    background-color: var(--fs-alert-secondary-bg);
+    color: var(--fs-alert-secondary-text);
+  }
+  .fs-table-success {
+    background-color: var(--fs-alert-success-bg);
+    color: var(--fs-alert-success-text);
+  }
+  .fs-table-warning {
+    background-color: var(--fs-alert-warning-bg);
+    color: var(--fs-alert-warning-text);
+  }
+  .fs-table-danger {
+    background-color: var(--fs-alert-danger-bg);
+    color: var(--fs-alert-danger-text);
+  }
+  .fs-table-info {
+    background-color: var(--fs-alert-info-bg);
+    color: var(--fs-alert-info-text);
+  }
+  .fs-table-sm th,
+  .fs-table-sm td {
+    padding: 4px 8px;
+  }
+  .fs-table-responsive {
+    overflow-x: auto;
+  }
+}
+@layer components {
+  .fs-navbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--fs-color-border);
+    background-color: var(--fs-color-surface);
+  }
+  .fs-navbar-brand {
+    color: var(--fs-color-text);
+    font-size: 1rem;
+    font-weight: 500;
+    text-decoration: none;
+  }
+  .fs-navbar-nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .fs-nav-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface-raised);
+    text-decoration: none;
+    transition: background-color 0.15s ease-in-out;
+  }
+  .fs-nav-link:hover {
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-nav-link:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-nav-link.is-active {
+    color: var(--fs-alert-primary-text);
+    font-weight: 500;
+  }
+  .fs-nav-link.is-disabled {
+    color: var(--fs-color-muted);
+    pointer-events: none;
+  }
+}
+@layer components {
+  .fs-combobox {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+  }
+  .fs-combobox-listbox {
+    overflow-y: auto;
+    max-height: 240px;
+  }
+}
+@layer components {
+  [data-theme=dark] .fs-form-control[type=date]::-webkit-calendar-picker-indicator,
+  [data-theme=dark] .fs-form-control[type=time]::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+  .fs-datepicker {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+  }
+  .fs-datepicker-panel {
+    display: none;
+    width: min(280px, 100vw - 2 * var(--fs-space-3));
+    padding: 12px;
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-md);
+    z-index: var(--fs-z-dropdown);
+  }
+  .fs-datepicker-panel.is-open {
+    display: block;
+  }
+  .fs-datepicker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+  .fs-datepicker-nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface-raised);
+    font-size: 0.8125rem;
+    cursor: pointer;
+  }
+  .fs-datepicker-nav:hover {
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-datepicker-nav:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-datepicker-title {
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: capitalize;
+  }
+  .fs-datepicker-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .fs-datepicker-weekdays,
+  .fs-datepicker-week {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+  }
+  .fs-datepicker-weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 28px;
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    text-align: center;
+    text-transform: uppercase;
+  }
+  .fs-datepicker-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    border: none;
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface-raised);
+    font-size: 0.75rem;
+    cursor: pointer;
+  }
+  .fs-datepicker-day:hover {
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-datepicker-day:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-datepicker-day.is-outside {
+    color: var(--fs-color-muted);
+  }
+  .fs-datepicker-day.is-today {
+    font-weight: 600;
+    box-shadow: inset 0 0 0 1px var(--fs-color-primary);
+  }
+  .fs-datepicker-day.is-selected {
+    color: var(--fs-color-on-primary);
+    background-color: var(--fs-color-primary);
+  }
+  .fs-datepicker-day:disabled {
+    color: var(--fs-color-muted);
+    pointer-events: none;
+    opacity: 0.4;
+  }
+}
+@layer components {
+  .fs-datatable-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+  .fs-datatable-sort-btn {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background-color: var(--fs-color-surface-raised);
+    color: inherit;
+    font: inherit;
+    text-transform: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  .fs-datatable-sort-btn:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-datatable-sort-btn::after {
+    flex-shrink: 0;
+    margin-left: auto;
+    padding-left: 4px;
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+    content: "↕";
+  }
+  th[aria-sort=ascending] .fs-datatable-sort-btn::after {
+    color: var(--fs-color-text);
+    content: "↑";
+  }
+  th[aria-sort=descending] .fs-datatable-sort-btn::after {
+    color: var(--fs-color-text);
+    content: "↓";
+  }
+  .fs-datatable [data-fs-datatable-pagination] {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
+  }
+  .fs-datatable td:focus-visible,
+  .fs-datatable th:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+    outline-offset: -2px;
+  }
+}
+@layer components {
+  .fs-command-palette {
+    position: fixed;
+    inset: 0;
+    z-index: var(--fs-z-modal);
+    display: none;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 72px 16px 16px;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .fs-command-palette.is-open {
+    display: flex;
+  }
+  .fs-command-palette-dialog {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 480px;
+    max-height: calc(100vh - 88px);
+    overflow: hidden;
+    border-radius: var(--fs-radius-md);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-lg);
+  }
+  .fs-command-palette-input {
+    width: 100%;
+    padding: 16px 20px;
+    border: none;
+    border-bottom: 1px solid var(--fs-color-border);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface-raised);
+    font-size: 1rem;
+  }
+  .fs-command-palette-input:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-command-palette-list {
+    margin: 0;
+    padding: 6px 0;
+    overflow-y: auto;
+    list-style: none;
+  }
+}
+@layer components {
+  .fs-tree,
+  .fs-tree [role=group] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .fs-tree [role=group] {
+    padding-left: 20px;
+  }
+  .fs-tree [role=treeitem] {
+    border-radius: var(--fs-radius-sm);
+  }
+  .fs-tree [role=treeitem]:focus-visible {
+    outline: none;
+  }
+  .fs-tree [role=treeitem]:focus-visible > .fs-tree-label {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-tree-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-color-text);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    -webkit-user-select: none;
+            user-select: none;
+  }
+  .fs-tree-label:hover {
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-tree [role=treeitem][aria-selected=true] > .fs-tree-label {
+    color: var(--fs-color-on-primary);
+    background-color: var(--fs-color-primary);
+  }
+  .fs-tree-toggle {
+    flex-shrink: 0;
+    width: 0;
+    height: 0;
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-left: 5px solid currentcolor;
+    transition: transform 0.15s ease-in-out;
+  }
+  .fs-tree [role=treeitem][aria-expanded=true] > .fs-tree-label > .fs-tree-toggle {
+    transform: rotate(90deg);
+  }
+}
+@layer components {
+  .fs-dropdown {
+    position: relative;
+    display: inline-flex;
+  }
+  .fs-dropdown-toggle::after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    content: "";
+    border-top: 5px solid;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+  }
+  .fs-dropdown-menu {
+    position: absolute;
+    display: none;
+    min-width: 180px;
+    margin: 0;
+    padding: 6px 0;
+    border: var(--fs-border-width) solid var(--fs-color-border-default);
+    border-radius: var(--fs-radius-md);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-md);
+    z-index: var(--fs-z-dropdown);
+  }
+  .fs-dropdown-menu.is-open {
+    display: block;
+  }
+  .fs-dropdown-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 8px 16px;
+    border: 0;
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface-raised);
+    font-size: 0.8125rem;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .fs-dropdown-item:hover,
+  .fs-dropdown-item:focus-visible {
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-subtle);
+    outline: none;
+  }
+  .fs-dropdown-item.is-active {
+    color: var(--fs-color-on-primary);
+    background-color: var(--fs-color-primary);
+  }
+  .fs-dropdown-item.is-disabled {
+    color: var(--fs-color-muted);
+    pointer-events: none;
+    opacity: 0.6;
+  }
+  .fs-dropdown-divider {
+    height: 1px;
+    margin: 6px 0;
+    border: none;
+    background-color: var(--fs-color-border);
+  }
+  .fs-dropdown-header {
+    padding: 4px 16px;
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+}
+@layer components {
+  .fs-modal {
+    position: fixed;
+    inset: 0;
+    z-index: var(--fs-z-modal);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: var(--fs-space-4);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .fs-modal.is-open {
+    display: flex;
+  }
+  .fs-modal-dialog {
+    width: 100%;
+    max-width: 480px;
+  }
+  .fs-modal-dialog.fs-modal-sm {
+    max-width: 320px;
+  }
+  .fs-modal-dialog.fs-modal-lg {
+    max-width: 720px;
+  }
+  .fs-modal-content {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - 2 * var(--fs-space-4));
+    border: var(--fs-border-width) solid var(--fs-color-border-default);
+    border-radius: var(--fs-radius-md);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-lg);
+  }
+  .fs-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--fs-color-border);
+  }
+  .fs-modal-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  .fs-modal-body {
+    padding: 20px;
+    overflow-y: auto;
+  }
+  .fs-modal-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 20px;
+    border-top: 1px solid var(--fs-color-border);
+  }
+}
+@layer components {
+  .fs-alert-dialog-message {
+    margin: 4px 0 0;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+  }
+}
+@layer components {
+  .fs-divider {
+    margin: 16px 0;
+    border: 0;
+    border-top: 1px solid var(--fs-color-border);
+  }
+  .fs-divider:not(hr) {
+    display: flex;
+    align-items: center;
+    border-top: none;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+  }
+  .fs-divider:not(hr)::before,
+  .fs-divider:not(hr)::after {
+    flex: 1;
+    content: "";
+    border-top: 1px solid var(--fs-color-border);
+  }
+  .fs-divider-label {
+    padding: 0 12px;
+  }
+}
+@layer components {
+  .fs-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 48px 24px;
+    text-align: center;
+  }
+  .fs-empty-state[hidden] {
+    display: none;
+  }
+  .fs-empty-state-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    margin-bottom: 16px;
+    border-radius: 50%;
+    color: var(--fs-color-muted);
+    background-color: var(--fs-color-subtle);
+    font-size: 28px;
+  }
+  .fs-empty-state-title {
+    margin: 0;
+    color: var(--fs-color-text);
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  .fs-empty-state-text {
+    max-width: 360px;
+    margin: 4px 0 20px;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+  }
+}
+@layer components {
+  .fs-rating {
+    display: inline-flex;
+    flex-direction: row-reverse;
+  }
+  .fs-rating-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  .fs-rating-star {
+    display: flex;
+    padding: 2px;
+    color: var(--fs-color-border);
+    font-size: 24px;
+    cursor: pointer;
+  }
+  .fs-rating-input:checked ~ .fs-rating-star,
+  .fs-rating-star:hover,
+  .fs-rating-star:hover ~ .fs-rating-star {
+    color: var(--fs-color-warning);
+  }
+  .fs-rating-input:checked ~ .fs-rating-star .fs-icon,
+  .fs-rating-star:hover .fs-icon,
+  .fs-rating-star:hover ~ .fs-rating-star .fs-icon {
+    fill: currentcolor;
+  }
+  .fs-rating-input:focus-visible + .fs-rating-star {
+    border-radius: var(--fs-radius-sm);
+    outline: 2px solid var(--fs-color-primary);
+    outline-offset: 2px;
+  }
+  .fs-rating-input:disabled + .fs-rating-star {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .fs-rating-sm .fs-rating-star {
+    font-size: 16px;
+  }
+  .fs-rating-lg .fs-rating-star {
+    font-size: 32px;
+  }
+}
+@layer components {
+  .fs-tag {
+    gap: 0;
+    padding: 0 0 0 8px;
+  }
+  .fs-tag-label {
+    min-width: 0;
+  }
+  .fs-tag-truncate {
+    max-inline-size: min(100%, var(--fs-tag-max-inline-size, 20rem));
+  }
+  .fs-tag-truncate .fs-tag-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .fs-tag-icon {
+    display: inline-grid;
+    width: 12px;
+    height: 12px;
+    flex: 0 0 12px;
+    margin-right: 4px;
+    place-items: center;
+  }
+  .fs-tag-icon .fs-icon {
+    width: 12px;
+    height: 12px;
+    stroke: currentcolor;
+  }
+  .fs-tag .fs-btn-close {
+    width: calc(var(--fs-badge-height) - 2px);
+    height: calc(var(--fs-badge-height) - 2px);
+    flex: 0 0 calc(var(--fs-badge-height) - 2px);
+    margin-left: 4px;
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    opacity: 0.7;
+    transition: opacity 0.1s ease-in-out, background-color 0.1s ease-in-out, transform 0.1s ease-in-out;
+  }
+  .fs-tag .fs-btn-close::before,
+  .fs-tag .fs-btn-close::after {
+    top: calc(50% + 1px);
+    width: 8px;
+  }
+  .fs-tag .fs-btn-close:hover {
+    color: inherit;
+    background-color: color-mix(in srgb, currentcolor 18%, transparent);
+    opacity: 1;
+  }
+  .fs-tag .fs-btn-close:active {
+    background-color: color-mix(in srgb, currentcolor 28%, transparent);
+    transform: scale(0.9);
+  }
+  .fs-tag-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+  }
+  .fs-tag:focus-within {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-tag.is-loading,
+  .fs-tag[aria-busy=true] {
+    --fs-badge-bg: var(--fs-color-warning);
+    --fs-badge-color: var(--fs-color-black);
+    --fs-badge-border: transparent;
+    cursor: progress;
+  }
+  .fs-tag.is-loading .fs-spinner,
+  .fs-tag[aria-busy=true] .fs-spinner {
+    width: 12px;
+    height: 12px;
+    flex: 0 0 12px;
+    margin: 0 6px 0 4px;
+    border-width: 2px;
+    color: var(--fs-color-black);
+  }
+  .fs-tag.is-loading .fs-btn-close,
+  .fs-tag[aria-busy=true] .fs-btn-close {
+    display: none;
+  }
+  .fs-tag-group .fs-tag + .fs-tag {
+    border-inline-start-color: color-mix(in srgb, currentcolor 24%, transparent);
+  }
+  .fs-tag-group .fs-tag {
+    padding-inline-start: calc(var(--fs-badge-height) + 2px);
+    transition: background-color 0.1s ease-in-out;
+  }
+  .fs-tag-group .fs-btn-close {
+    pointer-events: none;
+    opacity: 0;
+  }
+  .fs-tag-group .fs-tag:hover .fs-btn-close,
+  .fs-tag-group .fs-tag:focus-within .fs-btn-close {
+    pointer-events: auto;
+    opacity: 0.7;
+  }
+  .fs-tag-group .fs-tag:hover,
+  .fs-tag-group .fs-tag:focus-within {
+    background-color: color-mix(in srgb, currentcolor 18%, transparent);
+  }
+  .fs-tag-overflow {
+    --fs-badge-bg: transparent;
+    --fs-badge-color: var(--fs-alert-primary-text);
+    --fs-badge-border: transparent;
+    width: var(--fs-badge-height);
+    height: var(--fs-badge-height);
+    min-width: var(--fs-badge-height);
+    padding: 0;
+    border: 0;
+    appearance: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font: inherit;
+    line-height: 0;
+  }
+  .fs-tag-overflow .fs-icon {
+    display: block;
+    flex: 0 0 13px;
+    width: 13px;
+    height: 13px;
+    stroke: currentcolor;
+  }
+  .fs-tag-overflow:hover,
+  .fs-tag-group .fs-tag-overflow:hover {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .fs-tag-group .fs-tag-overflow {
+    padding-inline-start: 0;
+  }
+  .fs-tag-overflow:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-tag-group .fs-btn-close:hover {
+    color: inherit;
+    background-color: transparent;
+    opacity: 0.7;
+  }
+  .fs-tag-protected {
+    pointer-events: none;
+  }
+  .fs-tag-lock {
+    display: inline-grid;
+    width: calc(var(--fs-badge-height) - 2px);
+    height: calc(var(--fs-badge-height) - 2px);
+    margin-left: 4px;
+    place-items: center;
+  }
+  .fs-tag-lock svg {
+    width: 12px;
+    height: 12px;
+    stroke: currentcolor;
+    stroke-width: 2;
+  }
+}
+@layer components {
+  .fs-offcanvas {
+    position: fixed;
+    z-index: var(--fs-z-offcanvas);
+    display: flex;
+    flex-direction: column;
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-lg);
+    visibility: hidden;
+    transition: transform 0.3s ease, visibility 0.3s ease;
+  }
+  .fs-offcanvas.is-open {
+    visibility: visible;
+    transform: none;
+  }
+  .fs-offcanvas-start {
+    inset: 0 auto 0 0;
+    width: 320px;
+    transform: translateX(-100%);
+  }
+  .fs-offcanvas-end {
+    inset: 0 0 0 auto;
+    width: 320px;
+    transform: translateX(100%);
+  }
+  .fs-offcanvas-top {
+    inset: 0 0 auto;
+    height: 40vh;
+    transform: translateY(-100%);
+  }
+  .fs-offcanvas-bottom {
+    inset: auto 0 0;
+    height: 40vh;
+    transform: translateY(100%);
+  }
+  .fs-offcanvas-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--fs-z-offcanvas) - 1);
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+  }
+  .fs-offcanvas-backdrop.is-open {
+    visibility: visible;
+    opacity: 1;
+  }
+  .fs-offcanvas-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--fs-color-border);
+  }
+  .fs-offcanvas-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  .fs-offcanvas-body {
+    flex: 1 1 auto;
+    padding: 20px;
+    overflow-y: auto;
+  }
+  .fs-offcanvas-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 20px;
+    border-top: 1px solid var(--fs-color-border);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-offcanvas,
+    .fs-offcanvas-backdrop {
+      transition: none;
+    }
+  }
+}
+@layer components {
+  .fs-accordion {
+    display: flex;
+    flex-direction: column;
+  }
+  .fs-accordion-item {
+    overflow: hidden;
+    border: 1px solid var(--fs-color-border);
+    background-color: var(--fs-color-surface-raised);
+  }
+  .fs-accordion-item + .fs-accordion-item {
+    border-top: none;
+  }
+  .fs-accordion-item:first-child {
+    border-top-left-radius: var(--fs-radius-md);
+    border-top-right-radius: var(--fs-radius-md);
+  }
+  .fs-accordion-item:last-child {
+    border-bottom-right-radius: var(--fs-radius-md);
+    border-bottom-left-radius: var(--fs-radius-md);
+  }
+  .fs-accordion-header {
+    margin: 0;
+  }
+  .fs-accordion-button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 14px 16px;
+    border: none;
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    text-align: left;
+    cursor: pointer;
+  }
+  .fs-accordion-button:hover {
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-accordion-button:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-accordion-button::after {
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    margin-left: 12px;
+    content: "";
+    border-right: 2px solid currentcolor;
+    border-bottom: 2px solid currentcolor;
+    transform: rotate(45deg);
+    transition: transform 0.2s ease-in-out;
+  }
+  .fs-accordion-button[aria-expanded=true]::after {
+    transform: rotate(-135deg);
+  }
+  .fs-accordion-collapse {
+    overflow: hidden;
+  }
+  .fs-accordion-body {
+    padding: 16px;
+    border-top: 1px solid var(--fs-color-border);
+    background-color: var(--fs-color-surface-raised);
+  }
+}
+@layer components {
+  .fs-tabs {
+    display: flex;
+    border-bottom: var(--fs-border-width) solid var(--fs-color-border-default);
+  }
+  .fs-tabs .fs-nav-link {
+    margin-bottom: -1px;
+    border-bottom: 2px solid transparent;
+    border-radius: var(--fs-radius-sm) var(--fs-radius-sm) 0 0;
+  }
+  .fs-tabs .fs-nav-link.is-active {
+    border-bottom-color: var(--fs-color-primary);
+  }
+  .fs-tabs-pill {
+    gap: 4px;
+    border-bottom: none;
+  }
+  .fs-tabs-pill .fs-nav-link {
+    margin-bottom: 0;
+    border-bottom: none;
+    border-radius: var(--fs-radius-sm);
+  }
+  .fs-tabs-pill .fs-nav-link.is-active {
+    color: var(--fs-color-on-primary);
+    background-color: var(--fs-color-primary);
+  }
+  .fs-tabs-depth {
+    gap: 2px;
+    padding: 4px 4px 0;
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-tabs-depth .fs-nav-link {
+    margin-bottom: -1px;
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: var(--fs-radius-sm) var(--fs-radius-sm) 0 0;
+  }
+  .fs-tabs-depth .fs-nav-link.is-active {
+    border-color: var(--fs-color-border);
+    background-color: var(--fs-color-surface);
+  }
+  .fs-tabs-center {
+    justify-content: center;
+  }
+  .fs-tabs-right {
+    justify-content: flex-end;
+  }
+  .fs-tabs-fill .fs-nav-link {
+    flex: 1;
+    justify-content: center;
+    text-align: center;
+  }
+  .fs-tabs-sm .fs-nav-link {
+    padding: 6px 10px;
+    font-size: 0.75rem;
+  }
+  .fs-tabs-lg .fs-nav-link {
+    padding: 10px 16px;
+    font-size: 1rem;
+  }
+  .fs-tab-content > .fs-tab-pane {
+    display: none;
+  }
+  .fs-tab-content > .fs-tab-pane.is-active {
+    display: block;
+  }
+}
+@layer components {
+  .fs-tooltip {
+    position: absolute;
+    z-index: var(--fs-z-tooltip);
+    display: none;
+    max-width: 220px;
+  }
+  .fs-tooltip.is-open {
+    display: block;
+  }
+  .fs-tooltip-inner {
+    padding: 6px 10px;
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-tooltip-text);
+    background-color: var(--fs-tooltip-bg);
+    font-size: 0.6875rem;
+    text-align: center;
+  }
+  .fs-tooltip-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background-color: var(--fs-tooltip-bg);
+    transform: rotate(45deg);
+  }
+  .fs-tooltip[data-placement=top] .fs-tooltip-arrow {
+    bottom: -4px;
+    left: 50%;
+    margin-left: -4px;
+  }
+  .fs-tooltip[data-placement=bottom] .fs-tooltip-arrow {
+    top: -4px;
+    left: 50%;
+    margin-left: -4px;
+  }
+  .fs-tooltip[data-placement=left] .fs-tooltip-arrow {
+    top: 50%;
+    right: -4px;
+    margin-top: -4px;
+  }
+  .fs-tooltip[data-placement=right] .fs-tooltip-arrow {
+    top: 50%;
+    left: -4px;
+    margin-top: -4px;
+  }
+}
+@layer components {
+  .fs-popover {
+    position: absolute;
+    z-index: var(--fs-z-offcanvas);
+    display: none;
+    max-width: 280px;
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+    box-shadow: var(--fs-shadow-md);
+  }
+  .fs-popover.is-open {
+    display: block;
+  }
+  .fs-popover-header {
+    padding: 10px 14px;
+    background-color: var(--fs-color-subtle);
+    border-bottom: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .fs-popover-body {
+    padding: 14px;
+    font-size: 0.75rem;
+  }
+  .fs-popover-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 10px 14px;
+    border-top: 1px solid var(--fs-color-border);
+  }
+  .fs-popover-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background-color: var(--fs-color-surface);
+    border: 1px solid var(--fs-color-border);
+    transform: rotate(45deg);
+  }
+  .fs-popover[data-placement=top] .fs-popover-arrow {
+    bottom: -5px;
+    left: 50%;
+    margin-left: -4px;
+    border-top: 0;
+    border-left: 0;
+  }
+  .fs-popover[data-placement=bottom] .fs-popover-arrow {
+    top: -5px;
+    left: 50%;
+    margin-left: -4px;
+    border-right: 0;
+    border-bottom: 0;
+  }
+  .fs-popover[data-placement=left] .fs-popover-arrow {
+    top: 50%;
+    right: -5px;
+    margin-top: -4px;
+    border-bottom: 0;
+    border-left: 0;
+  }
+  .fs-popover[data-placement=right] .fs-popover-arrow {
+    top: 50%;
+    left: -5px;
+    margin-top: -4px;
+    border-top: 0;
+    border-right: 0;
+  }
+  .fs-popover-hover-card {
+    max-width: 320px;
+  }
+  .fs-popover-hover-card .fs-popover-body {
+    display: flex;
+    gap: 12px;
+  }
+}
+@layer components {
+  .fs-toast-container {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    z-index: var(--fs-z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: min(360px, 100%);
+    max-width: calc(100vw - 2 * var(--fs-space-3));
+  }
+  .fs-toast {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-md);
+  }
+  .fs-toast-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--fs-color-border);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .fs-toast-body {
+    padding: 12px;
+    font-size: 0.75rem;
+  }
+  .fs-toast-primary .fs-toast-header {
+    color: var(--fs-alert-primary-text);
+    background-color: var(--fs-alert-primary-bg);
+  }
+  .fs-toast-secondary .fs-toast-header {
+    color: var(--fs-alert-secondary-text);
+    background-color: var(--fs-alert-secondary-bg);
+  }
+  .fs-toast-success .fs-toast-header {
+    color: var(--fs-alert-success-text);
+    background-color: var(--fs-alert-success-bg);
+  }
+  .fs-toast-warning .fs-toast-header {
+    color: var(--fs-alert-warning-text);
+    background-color: var(--fs-alert-warning-bg);
+  }
+  .fs-toast-danger .fs-toast-header {
+    color: var(--fs-alert-danger-text);
+    background-color: var(--fs-alert-danger-bg);
+  }
+  .fs-toast-info .fs-toast-header {
+    color: var(--fs-alert-info-text);
+    background-color: var(--fs-alert-info-bg);
+  }
+}
+@layer components {
+  .fs-pagination {
+    display: flex;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .fs-page-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 8px;
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    text-decoration: none;
+    transition: background-color 0.15s ease-in-out;
+  }
+  .fs-page-link:hover {
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-page-link:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-page-item.is-active .fs-page-link {
+    color: var(--fs-color-on-primary);
+    background-color: var(--fs-color-primary);
+    border-color: var(--fs-color-primary);
+  }
+  .fs-page-item.is-disabled .fs-page-link {
+    color: var(--fs-color-muted);
+    opacity: 0.6;
+    pointer-events: none;
+  }
+  .fs-pagination-bordered {
+    gap: 0;
+  }
+  .fs-pagination-bordered .fs-page-link {
+    border-radius: 0;
+  }
+  .fs-pagination-bordered .fs-page-item:not(:first-child) .fs-page-link {
+    margin-left: -1px;
+  }
+  .fs-pagination-bordered .fs-page-item:first-child .fs-page-link {
+    border-top-left-radius: var(--fs-radius-sm);
+    border-bottom-left-radius: var(--fs-radius-sm);
+  }
+  .fs-pagination-bordered .fs-page-item:last-child .fs-page-link {
+    border-top-right-radius: var(--fs-radius-sm);
+    border-bottom-right-radius: var(--fs-radius-sm);
+  }
+  .fs-pagination-bordered .fs-page-link:hover,
+  .fs-pagination-bordered .fs-page-item.is-active .fs-page-link {
+    position: relative;
+    z-index: 1;
+  }
+  .fs-pagination-sm .fs-page-link {
+    min-width: 26px;
+    height: 26px;
+    padding: 0 6px;
+    font-size: 0.6875rem;
+  }
+  .fs-pagination-lg .fs-page-link {
+    min-width: 40px;
+    height: 40px;
+    padding: 0 12px;
+    font-size: 0.8125rem;
+  }
+  .fs-page-link-text {
+    gap: 6px;
+    padding: 0 14px;
+  }
+}
+@layer components {
+  .fs-breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 0.75rem;
+  }
+  .fs-breadcrumb-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--fs-color-muted);
+  }
+  .fs-breadcrumb-item + .fs-breadcrumb-item::before {
+    color: var(--fs-color-muted);
+    content: "/";
+  }
+  .fs-breadcrumb-item a {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--fs-alert-primary-text);
+    text-decoration: none;
+  }
+  .fs-breadcrumb-item a:hover {
+    text-decoration: underline;
+  }
+  .fs-breadcrumb-item.is-active {
+    color: var(--fs-color-text);
+  }
+  .fs-breadcrumb-item-truncate {
+    display: inline-block;
+    max-width: 160px;
+    vertical-align: bottom;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .fs-breadcrumb-more {
+    padding: 0;
+    border: none;
+    color: var(--fs-color-muted);
+    background-color: var(--fs-color-surface-raised);
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+    cursor: pointer;
+  }
+  .fs-breadcrumb-more:hover {
+    color: var(--fs-color-text);
+  }
+}
+@layer components {
+  .fs-spinner {
+    --fs-spinner-size: 20px;
+    --fs-spinner-stroke: 2px;
+    --fs-spinner-duration: 0.8s;
+    display: inline-block;
+    box-sizing: border-box;
+    width: var(--fs-spinner-size);
+    height: var(--fs-spinner-size);
+    vertical-align: middle;
+    border: var(--fs-spinner-stroke) solid color-mix(in srgb, currentcolor 20%, transparent);
+    border-top-color: currentcolor;
+    border-radius: 50%;
+    animation: fokus-spin var(--fs-spinner-duration) linear infinite;
+    will-change: transform;
+  }
+  .fs-spinner-sm {
+    --fs-spinner-size: 14px;
+    --fs-spinner-stroke: 2px;
+  }
+  .fs-spinner-lg {
+    --fs-spinner-size: 32px;
+    --fs-spinner-stroke: 3px;
+  }
+  .fs-spinner-primary {
+    color: var(--fs-color-primary);
+  }
+  .fs-spinner-secondary {
+    color: var(--fs-color-secondary);
+  }
+  .fs-spinner-success {
+    color: var(--fs-color-success);
+  }
+  .fs-spinner-warning {
+    color: var(--fs-color-warning);
+  }
+  .fs-spinner-danger {
+    color: var(--fs-color-danger);
+  }
+  .fs-spinner-info {
+    color: var(--fs-color-info);
+  }
+  @keyframes fokus-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .fs-progress {
+    --fs-progress-height: 8px;
+    --fs-progress-track: var(--fs-color-subtle);
+    --fs-progress-radius: 0;
+    position: relative;
+    display: flex;
+    height: var(--fs-progress-height);
+    overflow: hidden;
+    background-color: var(--fs-progress-track);
+    border-radius: var(--fs-progress-radius);
+  }
+  .fs-progress-bar {
+    --fs-progress-bar-bg: var(--fs-color-primary);
+    --fs-progress-color: var(--fs-color-on-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--fs-progress-value, 0) * 1%);
+    height: 100%;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--fs-progress-color);
+    background-color: var(--fs-progress-bar-bg);
+    font-size: 0;
+    line-height: 1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: width 0.25s ease-out;
+  }
+  .fs-progress-bar-primary {
+    --fs-progress-bar-bg: var(--fs-color-primary);
+    --fs-progress-color: #ffffff;
+  }
+  .fs-progress-bar-secondary {
+    --fs-progress-bar-bg: var(--fs-color-secondary);
+    --fs-progress-color: #ffffff;
+  }
+  .fs-progress-bar-success {
+    --fs-progress-bar-bg: var(--fs-color-success);
+    --fs-progress-color: #000000;
+  }
+  .fs-progress-bar-warning {
+    --fs-progress-bar-bg: var(--fs-color-warning);
+    --fs-progress-color: #000000;
+  }
+  .fs-progress-bar-danger {
+    --fs-progress-bar-bg: var(--fs-color-danger);
+    --fs-progress-color: #ffffff;
+  }
+  .fs-progress-bar-info {
+    --fs-progress-bar-bg: var(--fs-color-info);
+    --fs-progress-color: #ffffff;
+  }
+  .fs-progress-sm {
+    --fs-progress-height: 4px;
+  }
+  .fs-progress-lg {
+    --fs-progress-height: 16px;
+  }
+  .fs-progress-lg .fs-progress-bar {
+    padding-inline: 6px;
+    font-size: 0.6875rem;
+  }
+  .fs-progress-meta {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    max-width: 480px;
+    margin-bottom: 6px;
+    color: var(--fs-color-text);
+    font-size: 0.75rem;
+  }
+  .fs-progress-value {
+    color: var(--fs-color-muted);
+    font-variant-numeric: tabular-nums;
+  }
+  .fs-progress-indeterminate .fs-progress-bar {
+    width: 36%;
+    animation: fokus-progress-indeterminate 1.25s ease-in-out infinite;
+  }
+  .fs-progress-indeterminate {
+    --fs-progress-track: color-mix(in srgb, var(--fs-color-primary) 18%, transparent);
+  }
+  @keyframes fokus-progress-indeterminate {
+    from {
+      transform: translateX(-110%);
+    }
+    to {
+      transform: translateX(290%);
+    }
+  }
+  .fs-progress-complete .fs-progress-bar {
+    --fs-progress-bar-bg: var(--fs-color-success);
+    --fs-progress-color: #000000;
+  }
+  .fs-progress-error .fs-progress-bar {
+    --fs-progress-bar-bg: var(--fs-color-danger);
+    --fs-progress-color: #ffffff;
+  }
+  .fs-progress-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 6px;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+  }
+  .fs-progress-status-icon {
+    display: inline-grid;
+    width: 14px;
+    height: 14px;
+    place-items: center;
+    color: var(--fs-alert-success-text);
+  }
+  .fs-progress-status-icon .fs-icon {
+    width: 14px;
+    height: 14px;
+    stroke: currentcolor;
+  }
+  .fs-progress-status-danger,
+  .fs-progress-error + .fs-progress-status {
+    color: var(--fs-alert-danger-text);
+  }
+  .fs-progress-marker {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    bottom: 0;
+    left: calc(var(--fs-progress-marker-value) * 1%);
+    width: 2px;
+    background-color: var(--fs-color-text);
+    pointer-events: none;
+    transform: translateX(-1px);
+  }
+  .fs-progress-minimum .fs-progress-bar {
+    width: max(var(--fs-progress-value, 0) * 1%, 4px);
+  }
+  .fs-progress-bar-striped {
+    background-image: linear-gradient(45deg, color-mix(in srgb, currentcolor 16%, transparent) 25%, transparent 25%, transparent 50%, color-mix(in srgb, currentcolor 16%, transparent) 50%, color-mix(in srgb, currentcolor 16%, transparent) 75%, transparent 75%, transparent);
+    background-size: 16px 16px;
+  }
+  .fs-progress-bar-animated {
+    animation: fokus-progress-stripes 1s linear infinite;
+  }
+  @keyframes fokus-progress-stripes {
+    from {
+      background-position: 16px 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-spinner {
+      --fs-spinner-duration: 1.5s;
+    }
+    .fs-progress-bar-animated {
+      animation-duration: 1.5s;
+    }
+    .fs-progress-indeterminate .fs-progress-bar {
+      animation-duration: 1.8s;
+    }
+  }
+}
+@layer components {
+  .fs-carousel {
+    --fs-carousel-radius: var(--fs-radius-md);
+    --fs-carousel-transition-duration: var(--fs-transition-normal);
+    --fs-carousel-transition-easing: var(--fs-ease-standard);
+    --fs-carousel-control-size: 44px;
+    --fs-carousel-control-inset: var(--fs-space-2);
+    --fs-carousel-control-gap: var(--fs-space-1);
+    --fs-carousel-control-color: var(--fs-color-white);
+    --fs-carousel-control-paused-color: var(--fs-color-warning);
+    --fs-carousel-control-bg: rgb(15 23 42 / 72%);
+    --fs-carousel-control-bg-hover: rgb(15 23 42 / 88%);
+    --fs-carousel-focus-color: var(--fs-color-white);
+    --fs-carousel-indicator-size: 8px;
+    --fs-carousel-indicator-active-width: 24px;
+    --fs-carousel-indicator-color: rgb(255 255 255 / 62%);
+    --fs-carousel-indicator-active-color: var(--fs-color-white);
+    --fs-carousel-caption-scrim: rgb(15 23 42 / 78%);
+    --fs-carousel-top-safe-area: calc(var(--fs-carousel-control-size) + (var(--fs-carousel-control-inset) * 2));
+    --fs-carousel-bottom-safe-area: calc(32px + var(--fs-space-2) + 24px);
+    --fs-carousel-progress-height: 3px;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--fs-carousel-radius);
+  }
+  .fs-carousel::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    height: calc(var(--fs-carousel-control-size) + var(--fs-carousel-control-inset) * 2);
+    pointer-events: none;
+    content: "";
+    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.32));
+    opacity: 0;
+    transition: opacity var(--fs-transition-fast) var(--fs-ease-standard);
+  }
+  .fs-carousel-inner {
+    display: flex;
+    transition: transform var(--fs-carousel-transition-duration) var(--fs-carousel-transition-easing);
+  }
+  .fs-carousel-item {
+    position: relative;
+    flex: 0 0 100%;
+    width: 100%;
+  }
+  .fs-carousel-item img {
+    display: block;
+    width: 100%;
+  }
+  .fs-carousel.is-dragging .fs-carousel-inner {
+    cursor: grabbing;
+    transition: none;
+    -webkit-user-select: none;
+            user-select: none;
+  }
+  .fs-carousel:not(.is-static) .fs-carousel-inner {
+    cursor: grab;
+    touch-action: pan-y;
+  }
+  .fs-carousel-fade .fs-carousel-inner {
+    display: block;
+    transform: none;
+  }
+  .fs-carousel-fade .fs-carousel-item {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity var(--fs-carousel-transition-duration) var(--fs-carousel-transition-easing);
+  }
+  .fs-carousel-fade .fs-carousel-item.is-active {
+    position: relative;
+    opacity: 1;
+  }
+  .fs-carousel-control-prev,
+  .fs-carousel-control-next,
+  .fs-carousel-control-toggle {
+    position: absolute;
+    top: var(--fs-carousel-control-inset);
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--fs-carousel-control-size);
+    height: var(--fs-carousel-control-size);
+    padding: 0;
+    color: var(--fs-carousel-control-color);
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 18px 18px;
+    border: 0;
+    border-radius: 0;
+    cursor: pointer;
+    opacity: 0;
+    transition: background-color var(--fs-transition-fast) var(--fs-ease-standard), opacity var(--fs-transition-fast) var(--fs-ease-standard), transform var(--fs-transition-fast) var(--fs-ease-standard);
+  }
+  .fs-carousel-control-prev,
+  .fs-carousel-control-next {
+    transform: none;
+  }
+  .fs-carousel-control-prev {
+    left: var(--fs-carousel-control-inset);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4 6 9l5 5'/%3E%3C/svg%3E");
+  }
+  .fs-carousel-control-next {
+    left: calc(var(--fs-carousel-control-inset) + var(--fs-carousel-control-size) + var(--fs-carousel-control-gap));
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 4 5 5-5 5'/%3E%3C/svg%3E");
+  }
+  .fs-carousel-control-toggle {
+    left: calc(var(--fs-carousel-control-inset) + var(--fs-carousel-control-size) + var(--fs-carousel-control-gap));
+  }
+  .fs-carousel:has(.fs-carousel-control-toggle) .fs-carousel-control-next {
+    left: calc(var(--fs-carousel-control-inset) + (var(--fs-carousel-control-size) + var(--fs-carousel-control-gap)) * 2);
+  }
+  .fs-carousel-control-toggle[aria-pressed=true] {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 5v8M11 5v8'/%3E%3C/svg%3E");
+  }
+  .fs-carousel-control-toggle[aria-pressed=false] {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23ffffff'%3E%3Cpath d='m7 4 7 5-7 5z'/%3E%3C/svg%3E");
+  }
+  .fs-carousel.is-autoplay-paused .fs-carousel-control-toggle[aria-pressed=true] {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23f0b40e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 5v8M11 5v8'/%3E%3C/svg%3E");
+  }
+  .fs-carousel.is-autoplay-paused .fs-carousel-control-toggle[aria-pressed=false] {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23f0b40e'%3E%3Cpath d='m7 4 7 5-7 5z'/%3E%3C/svg%3E");
+  }
+  .fs-carousel-control-prev:hover,
+  .fs-carousel-control-next:hover,
+  .fs-carousel-control-toggle:hover {
+    background-color: var(--fs-carousel-control-bg-hover);
+  }
+  .fs-carousel-control-prev:active,
+  .fs-carousel-control-next:active,
+  .fs-carousel-control-toggle:active {
+    transform: scale(0.94);
+  }
+  .fs-carousel-control-prev:focus-visible,
+  .fs-carousel-control-next:focus-visible,
+  .fs-carousel-control-toggle:focus-visible,
+  .fs-carousel-indicators button:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-carousel-focus-color);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-carousel-focus-color);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-carousel-focus-color) 22%, transparent);
+  }
+  .fs-carousel:hover .fs-carousel-control-prev,
+  .fs-carousel:hover .fs-carousel-control-next,
+  .fs-carousel:hover .fs-carousel-control-toggle,
+  .fs-carousel:focus-within .fs-carousel-control-prev,
+  .fs-carousel:focus-within .fs-carousel-control-next,
+  .fs-carousel:focus-within .fs-carousel-control-toggle {
+    opacity: 1;
+  }
+  .fs-carousel:hover::before,
+  .fs-carousel:focus-within::before {
+    opacity: 1;
+  }
+  .fs-carousel-indicators {
+    position: absolute;
+    right: 0;
+    bottom: var(--fs-space-2);
+    left: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .fs-carousel-indicators button {
+    position: relative;
+    display: grid;
+    width: 28px;
+    height: 32px;
+    padding: 0;
+    place-items: center;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+  }
+  .fs-carousel-indicators button::before {
+    width: var(--fs-carousel-indicator-size);
+    height: var(--fs-carousel-indicator-size);
+    content: "";
+    background-color: var(--fs-carousel-indicator-color);
+    border-radius: var(--fs-radius-lg);
+    transition: width var(--fs-transition-fast) var(--fs-ease-standard), background-color var(--fs-transition-fast) var(--fs-ease-standard);
+  }
+  .fs-carousel-indicators button.is-active::before {
+    width: var(--fs-carousel-indicator-active-width);
+    background-color: var(--fs-carousel-indicator-active-color);
+  }
+  .fs-carousel-caption {
+    position: absolute;
+    right: 0;
+    bottom: var(--fs-carousel-bottom-safe-area);
+    left: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    max-width: min(100%, 42rem);
+    max-block-size: calc(100% - var(--fs-carousel-top-safe-area) - var(--fs-carousel-bottom-safe-area));
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--fs-space-2);
+    padding: calc(var(--fs-space-4) + 20px) var(--fs-space-4) var(--fs-space-3);
+    color: var(--fs-color-white);
+  }
+  .fs-carousel-caption::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: calc(var(--fs-carousel-bottom-safe-area) * -1);
+    left: 0;
+    z-index: -1;
+    content: "";
+    background: linear-gradient(to top, var(--fs-carousel-caption-scrim), transparent);
+  }
+  .fs-carousel-caption > * {
+    margin: 0;
+  }
+  .fs-carousel-caption .fs-btn {
+    --fs-btn-color: var(--fs-color-text-primary);
+    --fs-btn-bg: var(--fs-color-white);
+    --fs-btn-border-color: var(--fs-color-white);
+    --fs-btn-hover-bg: var(--fs-color-subtle);
+    --fs-btn-active-bg: var(--fs-color-border-default);
+  }
+  .fs-carousel-caption-side .fs-carousel-caption {
+    top: var(--fs-carousel-top-safe-area);
+    right: 0;
+    bottom: 0;
+    left: auto;
+    width: min(42%, 28rem);
+    max-width: none;
+    max-block-size: none;
+    padding: var(--fs-space-4) var(--fs-space-4) calc(var(--fs-carousel-bottom-safe-area) + var(--fs-space-2));
+    background: rgba(15, 23, 42, 0.84);
+  }
+  .fs-carousel-caption-side .fs-carousel-caption-start {
+    right: auto;
+    left: 0;
+  }
+  .fs-carousel-caption-side .fs-carousel-caption::before,
+  .fs-carousel-caption-stacked .fs-carousel-caption::before {
+    display: none;
+  }
+  .fs-carousel-caption-stacked {
+    --fs-carousel-bottom-safe-area: 0px;
+  }
+  .fs-carousel-caption-stacked .fs-carousel-caption {
+    position: static;
+    max-width: none;
+    max-block-size: none;
+    overflow: visible;
+    padding: var(--fs-space-4);
+    color: var(--fs-color-text-primary);
+    background: var(--fs-color-bg-surface);
+  }
+  .fs-carousel-caption-stacked .fs-carousel-indicators {
+    position: relative;
+    bottom: auto;
+    background: var(--fs-color-bg-surface);
+  }
+  .fs-carousel-counter {
+    position: absolute;
+    right: var(--fs-space-3);
+    bottom: var(--fs-space-2);
+    z-index: 2;
+    color: var(--fs-color-white);
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+  }
+  .fs-carousel-progress {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    height: var(--fs-carousel-progress-height);
+    overflow: hidden;
+    background-color: rgba(255, 255, 255, 0.24);
+  }
+  .fs-carousel-progress > span {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: var(--fs-color-white);
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  .fs-carousel-progress.is-running > span {
+    animation: fs-carousel-progress var(--fs-carousel-progress-duration, 5000ms) linear forwards;
+  }
+  .fs-carousel.is-two-slides.fs-carousel-hide-indicators-two .fs-carousel-indicators {
+    display: none;
+  }
+  .fs-carousel-no-media .fs-carousel-item {
+    min-block-size: 15rem;
+    background-color: var(--fs-color-bg-surface);
+    border: var(--fs-border-width) solid var(--fs-color-border-default);
+  }
+  .fs-carousel-no-media .fs-carousel-counter {
+    color: var(--fs-color-text-muted);
+  }
+  .fs-carousel-no-media .fs-carousel-progress {
+    background-color: var(--fs-color-border-default);
+  }
+  .fs-carousel-no-media .fs-carousel-progress > span {
+    background-color: var(--fs-color-action-primary);
+  }
+  .fs-carousel-media-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    min-height: inherit;
+    padding: calc(var(--fs-carousel-top-safe-area) + var(--fs-space-4)) var(--fs-space-4) calc(var(--fs-carousel-bottom-safe-area) + var(--fs-space-4));
+  }
+  .fs-carousel-media-placeholder > * {
+    max-width: 36rem;
+    margin: 0;
+  }
+  .fs-carousel-media-placeholder > * + * {
+    margin-top: var(--fs-space-2);
+  }
+  .fs-carousel-media {
+    min-block-size: 18rem;
+    background-position: center;
+    background-size: cover;
+  }
+  .fs-carousel.is-static .fs-carousel-control-prev,
+  .fs-carousel.is-static .fs-carousel-control-next,
+  .fs-carousel.is-static .fs-carousel-control-toggle,
+  .fs-carousel.is-static .fs-carousel-indicators {
+    display: none;
+  }
+  @media (max-width: 639px) {
+    .fs-carousel {
+      --fs-carousel-control-inset: var(--fs-space-1);
+    }
+    .fs-carousel-caption {
+      padding: calc(var(--fs-space-3) + 20px) var(--fs-space-3) var(--fs-space-3);
+    }
+    .fs-carousel-caption-side .fs-carousel-caption {
+      top: auto;
+      bottom: var(--fs-carousel-bottom-safe-area);
+      width: auto;
+      max-block-size: calc(100% - var(--fs-carousel-top-safe-area) - var(--fs-carousel-bottom-safe-area));
+      overflow: clip;
+      align-items: flex-end;
+      padding: calc(var(--fs-space-3) + 20px) var(--fs-space-3) calc(var(--fs-carousel-bottom-safe-area) + var(--fs-space-2));
+      text-align: end;
+      background: transparent;
+    }
+    .fs-carousel-caption-side .fs-carousel-caption-start {
+      right: 0;
+      left: 0;
+      align-items: flex-start;
+      text-align: start;
+    }
+    .fs-carousel-caption-side .fs-carousel-item::after {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      pointer-events: none;
+      content: "";
+      background: linear-gradient(to top, var(--fs-carousel-caption-scrim) 0%, rgba(15, 23, 42, 0.52) 56%, transparent 100%);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-carousel-inner,
+    .fs-carousel-fade .fs-carousel-item,
+    .fs-carousel-control-prev,
+    .fs-carousel-control-next,
+    .fs-carousel-control-toggle,
+    .fs-carousel-indicators button::before,
+    .fs-carousel-progress.is-running > span {
+      transition: none;
+      animation: none;
+      transform: scaleX(1);
+    }
+  }
+  @keyframes fs-carousel-progress {
+    to {
+      transform: scaleX(1);
+    }
+  }
+}
+@layer components {
+  .fs-stepper-header {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .fs-step {
+    position: relative;
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    text-align: center;
+  }
+  .fs-step-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    color: var(--fs-color-muted);
+    background-color: var(--fs-color-surface);
+    border: 2px solid var(--fs-color-border);
+    border-radius: 50%;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .fs-step-label {
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .fs-step-description {
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+  }
+  .fs-step:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: calc(50% + 20px);
+    width: calc(100% - 40px);
+    height: 2px;
+    background-color: var(--fs-color-border);
+  }
+  .fs-step-active .fs-step-indicator {
+    color: var(--fs-color-on-primary);
+    background-color: var(--fs-color-primary);
+    border-color: var(--fs-color-primary);
+  }
+  .fs-step-active .fs-step-label {
+    color: var(--fs-color-text);
+  }
+  .fs-step-completed .fs-step-indicator {
+    color: transparent;
+    background-color: var(--fs-color-primary);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    border-color: var(--fs-color-primary);
+  }
+  .fs-step-completed .fs-step-label {
+    color: var(--fs-color-text);
+  }
+  .fs-step-completed:not(:last-child)::after {
+    background-color: var(--fs-color-primary);
+  }
+  .fs-step-error .fs-step-indicator {
+    color: #ffffff;
+    background-color: var(--fs-color-danger);
+    border-color: var(--fs-color-danger);
+  }
+  .fs-step-error .fs-step-label {
+    color: var(--fs-alert-danger-text);
+  }
+  .fs-step.fs-step-clickable {
+    cursor: pointer;
+  }
+  .fs-step.fs-step-clickable:focus-visible {
+    outline: 2px solid var(--fs-color-primary);
+    outline-offset: 2px;
+    border-radius: var(--fs-radius-sm);
+  }
+  .fs-stepper-vertical .fs-stepper-header {
+    flex-direction: column;
+  }
+  .fs-stepper-vertical .fs-step {
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    gap: 12px;
+    min-height: 56px;
+    text-align: left;
+  }
+  .fs-stepper-vertical .fs-step-content {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-top: 5px;
+  }
+  .fs-stepper-vertical .fs-step:not(:last-child)::after {
+    top: 34px;
+    left: 15px;
+    width: 2px;
+    height: calc(100% - 22px);
+  }
+  .fs-step-panel {
+    display: none;
+  }
+  .fs-step-panel.is-active {
+    display: block;
+  }
+  .fs-stepper-content {
+    margin-top: 20px;
+  }
+  .fs-stepper-actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    margin-top: 20px;
+  }
+}
+@layer components {
+  .fs-segmented-control {
+    display: inline-flex;
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-sm);
+    overflow: hidden;
+  }
+  .fs-segmented-item {
+    display: flex;
+  }
+  .fs-segmented-item:not(:first-child) .fs-segmented-label {
+    border-left: 1px solid var(--fs-color-border);
+  }
+  .fs-segmented-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  .fs-segmented-label {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    min-height: 38px;
+    padding: 0 12px;
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-user-select: none;
+            user-select: none;
+    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
+  }
+  .fs-segmented-label:hover {
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-segmented-input:checked + .fs-segmented-label {
+    color: var(--fs-color-on-primary);
+    background-color: var(--fs-color-primary);
+  }
+  .fs-segmented-input:focus-visible + .fs-segmented-label {
+    position: relative;
+    z-index: 1;
+    outline: var(--fs-focus-width) solid var(--fs-color-primary);
+    outline-offset: var(--fs-focus-offset);
+    border-color: var(--fs-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
+  }
+  .fs-segmented-input:disabled + .fs-segmented-label {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+  .fs-segmented-control-sm .fs-segmented-label {
+    min-height: 30px;
+    padding: 0 8px;
+    font-size: 0.75rem;
+  }
+  .fs-segmented-control-lg .fs-segmented-label {
+    min-height: 46px;
+    padding: 0 16px;
+    font-size: 1rem;
+  }
+}
+@layer components {
+  .fs-skeleton {
+    display: block;
+    background-color: var(--fs-color-subtle);
+    border-radius: var(--fs-radius-sm);
+    animation: fokus-skeleton-pulse 1.5s ease-in-out infinite;
+  }
+  .fs-skeleton-text {
+    width: 100%;
+    height: 1em;
+  }
+  .fs-skeleton-text:not(:last-child) {
+    margin-bottom: 0.5em;
+  }
+  .fs-skeleton-text:last-child {
+    width: 80%;
+  }
+  .fs-skeleton-circle {
+    flex-shrink: 0;
+    border-radius: 50%;
+  }
+  .fs-skeleton-rect {
+    border-radius: var(--fs-radius-md);
+  }
+  @keyframes fokus-skeleton-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+  .fs-skeleton-wave {
+    position: relative;
+    overflow: hidden;
+    animation: none;
+  }
+  .fs-skeleton-wave::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transform: translateX(-100%);
+    animation: fokus-skeleton-wave 1.6s linear infinite;
+  }
+  @keyframes fokus-skeleton-wave {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-skeleton {
+      animation: none;
+    }
+    .fs-skeleton-wave::after {
+      animation: none;
+    }
+  }
+}
+@layer components {
+  .fs-timeline {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .fs-timeline-item {
+    position: relative;
+    display: flex;
+    gap: 12px;
+    padding-bottom: 24px;
+  }
+  .fs-timeline-item:last-child {
+    padding-bottom: 0;
+  }
+  .fs-timeline-marker {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 3px;
+    background-color: var(--fs-color-surface);
+    background-repeat: no-repeat;
+    background-position: center;
+    border: 2px solid var(--fs-color-border);
+    border-radius: 50%;
+  }
+  .fs-timeline-item:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    top: 22px;
+    left: 7px;
+    width: 2px;
+    height: calc(100% - 22px);
+    background-color: var(--fs-color-border);
+  }
+  .fs-timeline-content {
+    flex: 1;
+    padding-top: 1px;
+  }
+  .fs-timeline-title {
+    margin: 0;
+    color: var(--fs-color-text);
+    font-size: 0.8125rem;
+    font-weight: 500;
+  }
+  .fs-timeline-text {
+    margin: 4px 0 0;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+  }
+  .fs-timeline-time {
+    display: block;
+    margin-top: 2px;
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+  }
+  .fs-timeline-active .fs-timeline-marker {
+    background-color: var(--fs-color-primary);
+    border-color: var(--fs-color-primary);
+  }
+  .fs-timeline-completed .fs-timeline-marker {
+    background-color: var(--fs-color-success);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.5 4 8l4-6'/%3E%3C/svg%3E");
+    border-color: var(--fs-color-success);
+  }
+  .fs-timeline-completed:not(:last-child)::before {
+    background-color: var(--fs-color-success);
+  }
+  .fs-timeline-failed .fs-timeline-marker {
+    background-color: var(--fs-color-danger);
+    border-color: var(--fs-color-danger);
+  }
+  .fs-timeline-failed .fs-timeline-title {
+    color: var(--fs-alert-danger-text);
+  }
+  .fs-timeline-horizontal {
+    flex-direction: row;
+  }
+  .fs-timeline-horizontal .fs-timeline-item {
+    flex: 1 1 0;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding-bottom: 0;
+    text-align: center;
+  }
+  .fs-timeline-horizontal .fs-timeline-marker {
+    margin-top: 0;
+  }
+  .fs-timeline-horizontal .fs-timeline-item:not(:last-child)::before {
+    top: 7px;
+    left: calc(50% + 15px);
+    width: calc(100% - 30px);
+    height: 2px;
+  }
+  .fs-timeline-horizontal .fs-timeline-content {
+    padding-top: 0;
+  }
+}
+@layer components {
+  .fs-collapse {
+    overflow: hidden;
+  }
+}
+@layer components {
+  [data-fs=notification-center] {
+    position: relative;
+  }
+  .fs-notification-badge {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 999px;
+    color: #ffffff;
+    background-color: var(--fs-color-danger);
+    font-size: 0.65rem;
+    font-weight: 500;
+    line-height: 1;
+  }
+  .fs-notification-badge[hidden] {
+    display: none;
+  }
+  .fs-notification-center {
+    position: absolute;
+    display: none;
+    flex-direction: column;
+    width: min(320px, 100vw - 2 * var(--fs-space-3));
+    max-height: 420px;
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-md);
+    z-index: var(--fs-z-notification);
+  }
+  .fs-notification-center.is-open {
+    display: flex;
+  }
+  .fs-notification-center-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--fs-color-border);
+  }
+  .fs-notification-center-title {
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .fs-notification-list {
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    list-style: none;
+  }
+  .fs-notification-item {
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+    padding: 10px 14px;
+    border-left: 3px solid transparent;
+    border-bottom: 1px solid var(--fs-color-border);
+  }
+  .fs-notification-item:last-child {
+    border-bottom: none;
+  }
+  .fs-notification-item-unread {
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-notification-item-primary {
+    border-left-color: var(--fs-color-primary);
+  }
+  .fs-notification-item-secondary {
+    border-left-color: var(--fs-color-secondary);
+  }
+  .fs-notification-item-success {
+    border-left-color: var(--fs-color-success);
+  }
+  .fs-notification-item-warning {
+    border-left-color: var(--fs-color-warning);
+  }
+  .fs-notification-item-danger {
+    border-left-color: var(--fs-color-danger);
+  }
+  .fs-notification-item-info {
+    border-left-color: var(--fs-color-info);
+  }
+  .fs-notification-item-content {
+    flex: 1;
+    min-width: 0;
+  }
+  .fs-notification-item-title {
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .fs-notification-item-text {
+    margin: 2px 0 0;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+  }
+  .fs-notification-item-time {
+    display: block;
+    margin-top: 4px;
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+  }
+  .fs-notification-item .fs-btn-close {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+  .fs-notification-empty {
+    padding: 24px 14px;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+    text-align: center;
+  }
+  .fs-notification-empty[hidden] {
+    display: none;
+  }
+}
+@layer components {
+  .fs-dropdown-submenu {
+    position: relative;
+  }
+  .fs-dropdown-item-submenu {
+    justify-content: space-between;
+  }
+  .fs-dropdown-item-submenu::after {
+    margin-left: 8px;
+    content: "";
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 5px solid currentcolor;
+  }
+  .fs-dropdown-submenu > .fs-dropdown-menu {
+    top: -7px;
+    left: 100%;
+    margin: 0;
+  }
+  .fs-dropdown-submenu:hover > .fs-dropdown-menu,
+  .fs-dropdown-submenu > .fs-dropdown-menu.is-open {
+    display: block;
+  }
+  .fs-dropdown-submenu-left > .fs-dropdown-menu {
+    right: 100%;
+    left: auto;
+  }
+}
+@layer components {
+  .fs-tile {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+    background-color: var(--fs-color-surface);
+  }
+  .fs-tile-icon {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-subtle);
+    font-size: 1rem;
+  }
+  .fs-tile-body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .fs-tile-title {
+    margin: 0;
+    color: var(--fs-color-text);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .fs-tile-subtitle {
+    margin: 0;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .fs-tile-actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 8px;
+  }
+  .fs-tile-actions-bottom {
+    flex-wrap: wrap;
+  }
+  .fs-tile-actions-bottom .fs-tile-actions {
+    flex-basis: 100%;
+    justify-content: flex-end;
+    margin-top: 4px;
+  }
+  .fs-tile-clickable {
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  .fs-tile-clickable:hover,
+  .fs-tile-clickable:focus-within {
+    border-color: var(--fs-color-primary);
+    box-shadow: var(--fs-shadow-sm);
+  }
+  .fs-tile-sm {
+    gap: 8px;
+    padding: 8px;
+  }
+  .fs-tile-sm .fs-tile-icon {
+    width: 32px;
+    height: 32px;
+    font-size: 0.8125rem;
+  }
+  .fs-tile-sm .fs-tile-title {
+    font-size: 0.75rem;
+  }
+  .fs-tile-sm .fs-tile-subtitle {
+    font-size: 0.6875rem;
+  }
+  .fs-tile-lg {
+    gap: 16px;
+    padding: 16px;
+  }
+  .fs-tile-lg .fs-tile-icon {
+    width: 48px;
+    height: 48px;
+    font-size: 1.25rem;
+  }
+  .fs-tile-lg .fs-tile-title {
+    font-size: 1rem;
+  }
+}
+@layer tokens {
+  [data-fs-brand=violet] {
+    --fs-color-primary: #6d28d9;
+    --fs-alert-primary-bg: rgb(229.8834406263, 225.8717327657, 252.5458384302);
+    --fs-alert-primary-text: rgb(37.7006407433, 8.7385189481, 83.109047167);
+    --fs-feedback-primary-bg: rgb(229.8834406263, 225.8717327657, 252.5458384302);
+  }
+  [data-fs-brand=violet][data-theme=dark],
+  [data-theme=dark] [data-fs-brand=violet] {
+    --fs-color-primary: rgb(114.6495158739, 57.1165361442, 219.9746158745);
+    --fs-alert-primary-bg: rgb(31.4819726714, 47.0564006856, 82.6607876597);
+    --fs-alert-primary-text: rgb(167.4962913963, 147.746130571, 240.0249534535);
+    --fs-feedback-primary-bg: rgb(31.4819726714, 47.0564006856, 82.6607876597);
+  }
+  @supports (color: oklch(0% 0 0deg)) {
+    [data-fs-brand=violet] {
+      --fs-color-primary: oklch(49.0666497236% 0.2412317343 292.5809393311deg);
+      --fs-alert-primary-bg: oklch(92.3599974585% 0.0361847601 292.5809393311deg);
+      --fs-alert-primary-text: oklch(24.5333248618% 0.1206158672 292.5809393311deg);
+      --fs-feedback-primary-bg: oklch(92.3599974585% 0.0361847601 292.5809393311deg);
+    }
+    [data-fs-brand=violet][data-theme=dark],
+    [data-theme=dark] [data-fs-brand=violet] {
+      --fs-color-primary: oklch(51.6133172374% 0.2291701476 292.5809393311deg);
+      --fs-alert-primary-bg: oklch(31.117092664% 0.067505667 264.9134801836deg);
+      --fs-alert-primary-text: oklch(71.986657348% 0.1326774539 292.5809393311deg);
+      --fs-feedback-primary-bg: oklch(31.117092664% 0.067505667 264.9134801836deg);
+    }
+  }
+  [data-fs-brand=corporate] {
+    --fs-color-primary: #1d4e89;
+    --fs-alert-primary-bg: rgb(219.2237954153, 227.2186121739, 237.6990809983);
+    --fs-alert-primary-text: rgb(5.0598830676, 24.6667463069, 49.4731905568);
+    --fs-feedback-primary-bg: rgb(219.2237954153, 227.2186121739, 237.6990809983);
+  }
+  [data-fs-brand=corporate][data-theme=dark],
+  [data-theme=dark] [data-fs-brand=corporate] {
+    --fs-color-primary: rgb(40.8593466225, 86.5224214637, 143.0926598584);
+    --fs-alert-primary-bg: rgb(31.2586947979, 46.3186220749, 70.1321749545);
+    --fs-alert-primary-text: rgb(127.9940036809, 155.4045223568, 190.9765129762);
+    --fs-feedback-primary-bg: rgb(31.2586947979, 46.3186220749, 70.1321749545);
+  }
+  [data-fs-brand=vibrant] {
+    --fs-color-primary: #f2542d;
+    --fs-alert-primary-bg: rgb(255, 231.3637253432, 224.6456124112);
+    --fs-alert-primary-text: rgb(93.6202523577, 27.1894355526, 10.7919554552);
+    --fs-feedback-primary-bg: rgb(255, 231.3637253432, 224.6456124112);
+  }
+  [data-fs-brand=vibrant][data-theme=dark],
+  [data-theme=dark] [data-fs-brand=vibrant] {
+    --fs-color-primary: rgb(244.0763687777, 94.774513804, 58.7750761343);
+    --fs-alert-primary-bg: rgb(48.9487024594, 50.7990197305, 85.9119190034);
+    --fs-alert-primary-text: rgb(255, 166.953251087, 144.6609410048);
+    --fs-feedback-primary-bg: rgb(48.9487024594, 50.7990197305, 85.9119190034);
+  }
+  @supports (color: oklch(0% 0 0deg)) {
+    [data-fs-brand=corporate] {
+      --fs-color-primary: oklch(42.3377990386% 0.1112359961 255.1073474093deg);
+      --fs-alert-primary-bg: oklch(91.3506698558% 0.0166853994 255.1073474093deg);
+      --fs-alert-primary-text: oklch(21.1688995193% 0.055617998 255.1073474093deg);
+      --fs-feedback-primary-bg: oklch(91.3506698558% 0.0166853994 255.1073474093deg);
+    }
+    [data-fs-brand=corporate][data-theme=dark],
+    [data-theme=dark] [data-fs-brand=corporate] {
+      --fs-color-primary: oklch(45.2209090867% 0.1056741963 255.1073474093deg);
+      --fs-alert-primary-bg: oklch(30.1077650613% 0.0480063062 259.2924413953deg);
+      --fs-alert-primary-text: oklch(68.2857894712% 0.0611797979 255.1073474093deg);
+      --fs-feedback-primary-bg: oklch(30.1077650613% 0.0480063062 259.2924413953deg);
+    }
+    [data-fs-brand=vibrant] {
+      --fs-color-primary: oklch(65.5786741493% 0.2007639921 34.7814711243deg);
+      --fs-alert-primary-bg: oklch(94.8368011224% 0.0301145988 34.7814711243deg);
+      --fs-alert-primary-text: oklch(32.7893370747% 0.1003819961 34.7814711243deg);
+      --fs-feedback-primary-bg: oklch(94.8368011224% 0.0301145988 34.7814711243deg);
+    }
+    [data-fs-brand=vibrant][data-theme=dark],
+    [data-theme=dark] [data-fs-brand=vibrant] {
+      --fs-color-primary: oklch(67.2997404419% 0.1907257925 34.7814711243deg);
+      --fs-alert-primary-bg: oklch(33.5938963279% 0.0614355056 280.2435599526deg);
+      --fs-alert-primary-text: oklch(81.0682707821% 0.1104201957 34.7814711243deg);
+      --fs-feedback-primary-bg: oklch(33.5938963279% 0.0614355056 280.2435599526deg);
+    }
+  }
+}
+@layer overrides {
+  [data-fs-brand=vibrant] .fs-btn-primary,
+  [data-fs-brand=vibrant] .fs-badge-primary {
+    --fs-btn-color: #000000;
+    --fs-badge-color: #000000;
+  }
+  [data-fs-brand=vibrant] .fs-check {
+    --fs-check-mark: #000000;
+  }
+}
+@layer tokens {
+  [data-theme=dark] {
+    --fs-color-text: #f1f3f4;
+    --fs-color-muted: #bdc1c6;
+    --fs-color-border: #3c4043;
+    --fs-color-surface: #202124;
+    --fs-color-subtle: #2b2c2f;
+    --fs-color-bg-surface: var(--fs-color-surface);
+    --fs-color-bg-subtle: var(--fs-color-subtle);
+    --fs-color-surface-raised: var(--fs-color-surface);
+    --fs-color-surface-interactive: var(--fs-color-subtle);
+    --fs-color-text-primary: var(--fs-color-text);
+    --fs-color-text-muted: var(--fs-color-muted);
+    --fs-color-border-default: var(--fs-color-border);
+    --fs-color-focus: var(--fs-color-primary);
+    --fs-color-action-primary: var(--fs-color-primary);
+    --fs-color-action-danger: var(--fs-color-danger);
+    --fs-shadow-sm: 0 1px 3px rgb(0 0 0 / 50%), 0 1px 2px rgb(0 0 0 / 40%);
+    --fs-shadow-md: 0 6px 12px rgb(0 0 0 / 55%), 0 3px 6px rgb(0 0 0 / 45%);
+    --fs-shadow-lg: 0 15px 30px rgb(0 0 0 / 60%), 0 6px 12px rgb(0 0 0 / 50%);
+    --fs-tooltip-bg: #f8fafc;
+    --fs-tooltip-text: #1e293b;
+    --fs-color-primary: rgb(39.8728684152, 106.2372587275, 232.1894887664);
+    --fs-alert-primary-bg: rgb(30.765779113, 49.9974662348, 82.3021425489);
+    --fs-alert-primary-text: rgb(130.6636212695, 172.0850768824, 246.4419684583);
+    --fs-feedback-primary-bg: rgb(30.765779113, 49.9974662348, 82.3021425489);
+    --fs-color-secondary: rgb(114.3557068426, 129.039220146, 150.1520317181);
+    --fs-alert-secondary-bg: rgb(39.6548148226, 51.4270943358, 70.2648514061);
+    --fs-alert-secondary-text: rgb(166.7597509121, 176.2809684237, 189.9919576187);
+    --fs-feedback-secondary-bg: rgb(39.6548148226, 51.4270943358, 70.2648514061);
+    --fs-color-success: rgb(134.4501166043, 226.9563331209, 149.6185042518);
+    --fs-alert-success-bg: rgb(24.8621518491, 61.9088085702, 89.0318819222);
+    --fs-alert-success-text: rgb(155.0475916512, 231.7231823866, 166.1609492581);
+    --fs-feedback-success-bg: rgb(24.8621518491, 61.9088085702, 89.0318819222);
+    --fs-color-warning: rgb(252.9400238762, 208.7461261831, 137.9221837268);
+    --fs-alert-warning-bg: rgb(59.1359779173, 56.6792370273, 88.6687774507);
+    --fs-alert-warning-text: rgb(253.5439861058, 216.1213263099, 157.1705651606);
+    --fs-feedback-warning-bg: rgb(59.1359779173, 56.6792370273, 88.6687774507);
+    --fs-color-danger: rgb(208.1189955268, 64.9740184262, 63.4302936954);
+    --fs-alert-danger-bg: rgb(44.6823973866, 47.5125073063, 81.2083778204);
+    --fs-alert-danger-text: rgb(235.4050745756, 149.9650253478, 142.4924034553);
+    --fs-feedback-danger-bg: rgb(44.6823973866, 47.5125073063, 81.2083778204);
+    --fs-color-info: #5e5cc7;
+    --fs-alert-info-bg: rgb(35.0058091619, 49.6887857769, 78.5757788254);
+    --fs-alert-info-text: rgb(160.628671266, 165.881962789, 227.610600335);
+    --fs-feedback-info-bg: rgb(35.0058091619, 49.6887857769, 78.5757788254);
+  }
+  @supports (color: oklch(0% 0 0deg)) {
+    [data-theme=dark] {
+      --fs-color-text: oklch(96.2913383165% 0.002529697 228.7848682695deg);
+      --fs-color-muted: oklch(80.9268110646% 0.0083071608 253.8653061211deg);
+      --fs-color-border: oklch(36.8827622528% 0.0074489239 240.018838067deg);
+      --fs-color-surface: oklch(24.7936263361% 0.0058460141 271.1764187765deg);
+      --fs-color-subtle: oklch(29.3286259539% 0.0055990771 271.2234269855deg);
+      --fs-color-bg-surface: var(--fs-color-surface);
+      --fs-color-bg-subtle: var(--fs-color-subtle);
+      --fs-color-surface-raised: var(--fs-color-surface);
+      --fs-color-surface-interactive: var(--fs-color-subtle);
+      --fs-color-text-primary: var(--fs-color-text);
+      --fs-color-text-muted: var(--fs-color-muted);
+      --fs-color-border-default: var(--fs-color-border);
+      --fs-color-focus: var(--fs-color-primary);
+      --fs-color-action-primary: var(--fs-color-primary);
+      --fs-color-action-danger: var(--fs-color-danger);
+      --fs-tooltip-bg: oklch(98.4151869501% 0.0034126992 247.8577745944deg);
+      --fs-tooltip-text: oklch(27.9495237712% 0.0368481257 260.0309873929deg);
+      --fs-color-primary: oklch(55.884857057% 0.2025537915 261.6264320248deg);
+      --fs-alert-primary-bg: oklch(31.7915463198% 0.0633030844 260.2703040876deg);
+      --fs-alert-primary-text: oklch(74.4596540856% 0.1172679846 261.6264320248deg);
+      --fs-feedback-primary-bg: oklch(31.7915463198% 0.0633030844 260.2703040876deg);
+      --fs-color-secondary: oklch(59.8951906896% 0.0366453387 257.4166191214deg);
+      --fs-alert-secondary-bg: oklch(32.0729603204% 0.0374284633 259.6388321521deg);
+      --fs-alert-secondary-text: oklch(75.4915054214% 0.0223943736 257.4166191214deg);
+      --fs-feedback-secondary-bg: oklch(32.0729603204% 0.0374284633 259.6388321521deg);
+      --fs-color-success: oklch(83.8485321344% 0.139498201 148.125846236deg);
+      --fs-alert-success-bg: oklch(35.0298333903% 0.0635127994 243.2452162193deg);
+      --fs-alert-success-text: oklch(86.3333733445% 0.1180369393 148.125846236deg);
+      --fs-feedback-success-bg: oklch(35.0298333903% 0.0635127994 243.2452162193deg);
+      --fs-color-warning: oklch(88.2682030181% 0.1015699084 78.6575213966deg);
+      --fs-alert-warning-bg: oklch(36.0497574404% 0.0547601164 286.8249674934deg);
+      --fs-alert-warning-text: oklch(90.0730948615% 0.0859437686 78.6575213966deg);
+      --fs-feedback-warning-bg: oklch(36.0497574404% 0.0547601164 286.8249674934deg);
+      --fs-color-danger: oklch(58.1670482336% 0.1802407312 25.2407937498deg);
+      --fs-alert-danger-bg: oklch(32.151892295% 0.0597799696 278.8124583464deg);
+      --fs-alert-danger-text: oklch(75.7809226615% 0.104349897 25.2407937498deg);
+      --fs-feedback-danger-bg: oklch(32.151892295% 0.0597799696 278.8124583464deg);
+      --fs-color-info: oklch(53.3359780029% 0.1620131129 280.2231949375deg);
+      --fs-alert-info-bg: oklch(31.7574919059% 0.0556228738 263.0598185246deg);
+      --fs-alert-info-text: oklch(74.3347879016% 0.0891072121 280.2231949375deg);
+      --fs-feedback-info-bg: oklch(31.7574919059% 0.0556228738 263.0598185246deg);
+    }
+  }
+}
+/*# sourceMappingURL=components.css.map */