diff --git a/src/base/src/AXOpen.VisualComposer/Components/VisualComposerContainer.razor b/src/base/src/AXOpen.VisualComposer/Components/VisualComposerContainer.razor
index 3ff8a3235..a3011417f 100644
--- a/src/base/src/AXOpen.VisualComposer/Components/VisualComposerContainer.razor
+++ b/src/base/src/AXOpen.VisualComposer/Components/VisualComposerContainer.razor
@@ -57,7 +57,7 @@
                     </Dropdown>
                 }
 
-                <button class="btn btn-no-bg-secondary p-1" @onclick="() => _inDesignMode = !_inDesignMode">
+                <button class="btn btn-no-bg-primary p-1" @onclick="() => _inDesignMode = !_inDesignMode">
                     <Operon.Icons.HeroIcon Icon="adjustments-horizontal" Type="Operon.Icons.IconType.Outline" Class="size-6" />
                 </button>
             </div>
@@ -585,7 +585,7 @@
                     <BaseInput @bind-Value="_watchTableFilter" Placeholder="Filter by symbol..." Class="flex-1" />
                     @if (!string.IsNullOrEmpty(_watchTableFilter))
                     {
-                        <button class="btn btn-outline-secondary" @onclick="() => _watchTableFilter = string.Empty">Clear</button>
+                        <button class="btn btn-outline-primary" @onclick="() => _watchTableFilter = string.Empty">Clear</button>
                     }
                 </div>
                 <table class="table table-striped table-hover w-full">
diff --git a/src/base/src/AXOpen.VisualComposer/Components/VisualComposerContainer.razor.cs b/src/base/src/AXOpen.VisualComposer/Components/VisualComposerContainer.razor.cs
index e759451d1..e09290f76 100644
--- a/src/base/src/AXOpen.VisualComposer/Components/VisualComposerContainer.razor.cs
+++ b/src/base/src/AXOpen.VisualComposer/Components/VisualComposerContainer.razor.cs
@@ -779,9 +779,9 @@ private void Leave(PointerEventArgs eventArgs)
         private string GetBgColor(SaveLocationType location)
         {
             if (location == SaveLocationType.Server)
-                return "bg-purple-50";
+                return "bg-danger/10";
             else if (location == SaveLocationType.Local)
-                return "bg-cyan-50";
+                return "bg-warning/10";
             return "";
         }
 
diff --git a/src/core/src/AXOpen.Core.Blazor/wwwroot/fluxion/aditive.css b/src/core/src/AXOpen.Core.Blazor/wwwroot/fluxion/aditive.css
deleted file mode 100644
index 7902f68f8..000000000
--- a/src/core/src/AXOpen.Core.Blazor/wwwroot/fluxion/aditive.css
+++ /dev/null
@@ -1,1996 +0,0 @@
-/* ===================================
-   THEME VARIABLES
-   =================================== */
-
-@import url("utilities.css");
-
-/* Light Theme (Default) */
-:root,
-:root[data-theme="light"] {
-    color-scheme: light;
-    --font-family-base: 'Inter', 'Helvetica Neue', Arial, sans-serif;
-    --text-primary: rgba(15, 23, 42, 0.92);
-    --text-muted: rgba(71, 85, 105, 0.82);
-    --surface-elevated: rgba(248, 250, 252, 0.86);
-    --surface-highlight: rgba(59, 130, 246, 0.18);
-    --shadow-elevated: 0 24px 48px rgba(51, 65, 85, 0.15);
-    --bg-primary: #f8fafc;
-    --bg-secondary: rgba(241, 245, 249, 0.85);
-    --bg-tertiary: rgba(226, 232, 240, 0.75);
-    --border-primary: rgba(100, 116, 139, 0.25);
-    --border-secondary: rgba(148, 163, 184, 0.18);
-    --link-color: #0369a1;
-    --link-hover: #0c4a6e;
-    --code-bg: rgba(226, 232, 240, 0.65);
-    --code-color: #0c4a6e;
-    --input-bg: rgba(255, 255, 255, 0.75);
-    --error-border: rgba(220, 38, 38, 0.4);
-    --error-bg-gradient: linear-gradient(140deg, rgba(252, 165, 165, 0.24) 0%, rgba(248, 250, 252, 0.9) 100%);
-    --error-text: #991b1b;
-}
-
-    /* Dark Theme */
-    :root[data-theme="dark"] {
-        color-scheme: dark;
-        --text-primary: rgba(226, 232, 240, 0.92);
-        --text-muted: rgba(148, 163, 184, 0.82);
-        --surface-elevated: rgba(15, 23, 42, 0.86);
-        --surface-highlight: rgba(59, 130, 246, 0.32);
-        --shadow-elevated: 0 24px 48px rgba(15, 23, 42, 0.55);
-        --bg-primary: #020617;
-        --bg-secondary: rgba(15, 23, 42, 0.65);
-        --bg-tertiary: rgba(30, 41, 59, 0.75);
-        --border-primary: rgba(148, 163, 184, 0.25);
-        --border-secondary: rgba(148, 163, 184, 0.18);
-        --link-color: #82cfff;
-        --link-hover: #e0f2fe;
-        --code-bg: rgba(15, 23, 42, 0.65);
-        --code-color: #e0f2fe;
-        --input-bg: rgba(15, 23, 42, 0.55);
-        --error-border: rgba(248, 113, 113, 0.4);
-        --error-bg-gradient: linear-gradient(140deg, rgba(248, 113, 113, 0.14) 0%, rgba(15, 23, 42, 0.9) 100%);
-        --error-text: #fecaca;
-    }
-
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
-html, body {
-    margin: 0;
-    padding: 0;
-    min-height: 100%;
-    font-family: var(--font-family-base);
-    background-color: var(--bg-primary);
-    color: var(--text-primary);
-    transition: background-color 300ms ease, color 300ms ease;
-}
-
-.visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-
-body {
-    line-height: 1.6;
-    -webkit-font-smoothing: antialiased;
-}
-
-a {
-    color: var(--link-color);
-    text-decoration: none;
-    transition: color 140ms ease;
-}
-
-    a:hover,
-    a:focus-visible {
-        color: var(--link-hover);
-    }
-
-button,
-input,
-textarea,
-select {
-    font: inherit;
-    color: inherit;
-}
-
-button {
-    cursor: pointer;
-    border: none;
-    background: none;
-    transition: transform 140ms ease, box-shadow 160ms ease, background 160ms ease;
-}
-
-    button:focus-visible {
-        outline: 2px solid rgba(148, 163, 184, 0.45);
-        outline-offset: 3px;
-        border-radius: 999px;
-    }
-
-    button:disabled {
-        opacity: 0.55;
-        cursor: not-allowed;
-    }
-
-code {
-    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
-    background: var(--code-bg);
-    color: var(--code-color);
-    padding: 0.1rem 0.45rem;
-    border-radius: 0.45rem;
-    font-size: 0.85em;
-}
-
-.blazor-error-boundary {
-    display: block;
-    margin: 1.5rem 0;
-    padding: 1.5rem 1.75rem;
-    border-radius: 1.4rem;
-    border: 1px solid var(--error-border);
-    background: var(--error-bg-gradient);
-    color: var(--error-text);
-    box-shadow: var(--shadow-elevated);
-}
-
-    .blazor-error-boundary::after {
-        content: "Unhandled exception";
-        display: block;
-        margin-top: 0.75rem;
-        font-weight: 600;
-        letter-spacing: 0.06em;
-        text-transform: uppercase;
-        color: rgba(248, 113, 113, 0.8);
-    }
-
-:root[data-theme="light"] .blazor-error-boundary::after {
-    color: rgba(220, 38, 38, 0.8);
-}
-
-.valid.modified:not([type=checkbox]) {
-    outline: 1px solid rgba(74, 222, 128, 0.55);
-}
-
-.invalid {
-    outline: 1px solid rgba(248, 113, 113, 0.65);
-}
-
-.validation-message {
-    color: rgba(248, 113, 113, 0.85);
-    font-weight: 500;
-}
-
-:root[data-theme="light"] .validation-message {
-    color: rgba(220, 38, 38, 0.85);
-}
-
-.lead {
-    font-size: 1.05rem;
-    color: var(--text-primary);
-    opacity: 0.89;
-}
-
-.muted {
-    font-size: 0.9rem;
-    color: var(--text-muted);
-}
-
-.counter-page {
-    display: inline-flex;
-    flex-direction: column;
-    gap: 1.2rem;
-    padding: 1.8rem;
-    border-radius: 1.4rem;
-    border: 1px solid rgba(96, 165, 250, 0.32);
-    background: linear-gradient(165deg, rgba(37, 99, 235, 0.22) 0%, var(--bg-secondary) 68%, var(--bg-secondary) 100%);
-    box-shadow: var(--shadow-elevated);
-    max-width: 340px;
-}
-
-.counter-page__title {
-    margin: 0;
-    font-size: 1.75rem;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-}
-
-.counter-page__value {
-    margin: 0;
-    font-size: 1.05rem;
-    color: rgba(59, 130, 246, 0.88);
-}
-
-:root[data-theme="light"] .counter-page__value {
-    color: rgba(37, 99, 235, 0.88);
-}
-
-.counter-page__button {
-    align-self: flex-start;
-    padding: 0.7rem 1.6rem;
-    border-radius: 999px;
-    border: 1px solid rgba(96, 165, 250, 0.45);
-    background: rgba(59, 130, 246, 0.18);
-    color: var(--text-primary);
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    transition: transform 140ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
-}
-
-    .counter-page__button:hover,
-    .counter-page__button:focus-visible {
-        transform: translateY(-1px);
-        background: rgba(96, 165, 250, 0.35);
-        border-color: rgba(191, 219, 254, 0.75);
-    }
-
-:root[data-theme="light"] .counter-page__button {
-    background: rgba(59, 130, 246, 0.25);
-}
-
-    :root[data-theme="light"] .counter-page__button:hover {
-        background: rgba(59, 130, 246, 0.4);
-    }
-
-.counter-page__button:active {
-    transform: translateY(0);
-}
-
-.error-page {
-    display: grid;
-    gap: 1.5rem;
-    max-width: 760px;
-    margin: 0 auto;
-    padding: 2.2rem 2.4rem;
-    border-radius: 1.6rem;
-    border: 1px solid var(--error-border);
-    background: var(--error-bg-gradient);
-    box-shadow: var(--shadow-elevated);
-}
-
-.error-page__header {
-    display: grid;
-    gap: 0.45rem;
-}
-
-.error-page__eyebrow {
-    margin: 0;
-    font-size: 0.75rem;
-    letter-spacing: 0.18em;
-    text-transform: uppercase;
-    color: rgba(248, 113, 113, 0.65);
-}
-
-:root[data-theme="light"] .error-page__eyebrow {
-    color: rgba(220, 38, 38, 0.75);
-}
-
-.error-page__title {
-    margin: 0;
-    font-size: 2.1rem;
-    font-weight: 700;
-    color: var(--error-text);
-    letter-spacing: 0.02em;
-}
-
-.error-page__subtitle {
-    margin: 0;
-    color: rgba(254, 215, 170, 0.85);
-    font-size: 1rem;
-}
-
-:root[data-theme="light"] .error-page__subtitle {
-    color: rgba(180, 83, 9, 0.85);
-}
-
-.error-page__meta {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.7rem;
-    padding: 0.6rem 1.1rem;
-    border-radius: 999px;
-    border: 1px solid var(--error-border);
-    background: rgba(248, 113, 113, 0.12);
-    color: var(--error-text);
-    font-size: 0.85rem;
-    width: fit-content;
-}
-
-:root[data-theme="light"] .error-page__meta {
-    background: rgba(252, 165, 165, 0.22);
-}
-
-.error-page__meta-label {
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    font-weight: 600;
-}
-
-.error-page__meta-value {
-    background: none;
-    padding: 0;
-    color: inherit;
-}
-
-.error-page__body {
-    display: grid;
-    gap: 0.75rem;
-    color: var(--text-primary);
-}
-
-.error-page__heading {
-    margin: 0;
-    font-size: 1.1rem;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    color: rgba(248, 113, 113, 0.75);
-}
-
-:root[data-theme="light"] .error-page__heading {
-    color: rgba(220, 38, 38, 0.85);
-}
-
-@media (max-width: 640px) {
-    .counter-page {
-        width: 100%;
-    }
-
-    .error-page {
-        padding: 1.6rem 1.4rem;
-    }
-}
-
-.alarm-demo {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 1.5rem;
-    margin: 1.5rem 0;
-}
-
-.alarm-demo__item {
-    width: 100%;
-}
-
-.alarm-demo__table {
-    margin-top: 1.5rem;
-}
-
-.station-demo {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 1.5rem;
-    margin: 1.5rem 0 2rem;
-}
-
-.station-detail-demo {
-    margin: 1.75rem 0 3rem;
-}
-
-.station-detail-demo__meta {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-    padding: 0.35rem 0.75rem;
-    border-radius: 999px;
-    border: 1px solid var(--border-secondary);
-    background: var(--bg-secondary);
-    font-size: 0.78rem;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--text-primary);
-    opacity: 0.82;
-}
-
-.station-detail-demo__alarms {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: 0.75rem;
-}
-
-.station-detail-demo__alarm {
-    display: grid;
-    grid-template-columns: minmax(90px, auto) 1fr auto;
-    gap: 0.75rem;
-    align-items: center;
-    padding: 0.75rem 1rem;
-    border-radius: 0.9rem;
-    border: 1px solid var(--border-secondary);
-    background: var(--bg-secondary);
-}
-
-.station-detail-demo__alarm-code {
-    font-size: 0.78rem;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-}
-
-.station-detail-demo__alarm-title {
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
-.station-detail-demo__alarm-time {
-    font-size: 0.82rem;
-    color: var(--text-muted);
-}
-
-.station-detail-demo__aside {
-    margin: 0;
-    font-size: 0.85rem;
-    color: var(--text-primary);
-    opacity: 0.88;
-    line-height: 1.6;
-}
-
-.sequencer-demo {
-    margin: 1.75rem 0 3rem;
-}
-
-.sequence-demo__summary {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.3rem 0.75rem;
-    border-radius: 999px;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-secondary);
-    font-size: 0.78rem;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--text-primary);
-    opacity: 0.82;
-}
-
-.manual-panel-demo {
-    margin: 1.75rem 0 3rem;
-}
-
-.pneumatic-cylinder-demo {
-    margin: 1.75rem 0 3rem;
-    max-width: 48rem;
-}
-
-.manual-demo__status {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.25rem 0.7rem;
-    border-radius: 999px;
-    border: 1px solid var(--border-primary);
-    font-size: 0.72rem;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--text-primary);
-    opacity: 0.85;
-}
-
-.manual-demo__status--standby {
-    background: rgba(79, 70, 229, 0.25);
-    border-color: rgba(129, 140, 248, 0.45);
-    color: #e0e7ff;
-}
-
-:root[data-theme="light"] .manual-demo__status--standby {
-    background: rgba(165, 180, 252, 0.35);
-    color: #4338ca;
-}
-
-.manual-demo__status--safe {
-    background: rgba(22, 163, 74, 0.22);
-    border-color: rgba(110, 231, 183, 0.45);
-    color: #bbf7d0;
-}
-
-:root[data-theme="light"] .manual-demo__status--safe {
-    background: rgba(134, 239, 172, 0.35);
-    color: #15803d;
-}
-
-.manual-demo__action,
-.manual-demo__secondary {
-    border-radius: 999px;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-    padding: 0.55rem 1.1rem;
-    font-size: 0.82rem;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    cursor: pointer;
-    transition: transform 140ms ease, border-color 160ms ease, background 160ms ease;
-}
-
-    .manual-demo__action:hover,
-    .manual-demo__action:focus-visible,
-    .manual-demo__secondary:hover,
-    .manual-demo__secondary:focus-visible {
-        transform: translateY(-1px);
-        border-color: rgba(148, 163, 184, 0.45);
-    }
-
-    .manual-demo__action:focus-visible,
-    .manual-demo__secondary:focus-visible {
-        outline: 2px solid rgba(148, 163, 184, 0.55);
-        outline-offset: 2px;
-    }
-
-.manual-demo__action--primary {
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.65), rgba(37, 99, 235, 0.85));
-    border-color: rgba(96, 165, 250, 0.55);
-    color: #eff6ff;
-}
-
-:root[data-theme="light"] .manual-demo__action--primary {
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.85), rgba(37, 99, 235, 0.95));
-    color: #fff;
-}
-
-.manual-demo__action--accent {
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.7), rgba(99, 102, 241, 0.85));
-    border-color: rgba(165, 180, 252, 0.5);
-    color: #eef2ff;
-}
-
-:root[data-theme="light"] .manual-demo__action--accent {
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.85), rgba(99, 102, 241, 0.95));
-    color: #fff;
-}
-
-.manual-demo__secondary--link {
-    background: transparent;
-    border: 1px dashed rgba(148, 163, 184, 0.35);
-}
-
-.manual-demo__headline {
-    margin: 0;
-    font-size: 0.9rem;
-    line-height: 1.6;
-    color: var(--text-primary);
-    opacity: 0.88;
-}
-
-.stack-demo {
-    display: grid;
-    gap: 2rem;
-    margin: 1.75rem 0 3rem;
-}
-
-.stack-demo__section {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.stack-demo__section-title {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    letter-spacing: 0.02em;
-}
-
-.stack-demo__container {
-    padding: 1.25rem;
-    border-radius: 1rem;
-    border: 1px solid var(--border-secondary);
-    background: var(--bg-secondary);
-}
-
-.stack-demo__item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.85rem 1.1rem;
-    border-radius: 0.75rem;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-tertiary);
-    transition: border-color 140ms ease, box-shadow 140ms ease;
-}
-
-    .stack-demo__item:hover {
-        border-color: rgba(148, 163, 184, 0.45);
-    }
-
-.stack-demo__item--primary {
-    border-color: rgba(96, 165, 250, 0.35);
-    background: rgba(59, 130, 246, 0.18);
-}
-
-.stack-demo__item--warning {
-    border-color: rgba(251, 191, 36, 0.35);
-    background: rgba(217, 119, 6, 0.18);
-}
-
-.stack-demo__item--success {
-    border-color: rgba(74, 222, 128, 0.35);
-    background: rgba(34, 197, 94, 0.18);
-}
-
-.stack-demo__label {
-    font-size: 0.85rem;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    color: var(--text-primary);
-    opacity: 0.92;
-}
-
-.stack-demo__value {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-}
-
-.stack-demo__button {
-    padding: 0.65rem 1.25rem;
-    border-radius: 0.75rem;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-    font-size: 0.85rem;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    cursor: pointer;
-    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
-}
-
-    .stack-demo__button:hover {
-        transform: translateY(-1px);
-        border-color: rgba(148, 163, 184, 0.45);
-    }
-
-:root[data-theme="dark"] .stack-demo__button:hover {
-    background: rgba(51, 65, 85, 0.85);
-}
-
-:root[data-theme="light"] .stack-demo__button:hover {
-    background: rgba(203, 213, 225, 0.75);
-}
-
-.stack-demo__button--primary {
-    background: rgba(59, 130, 246, 0.32);
-    border-color: rgba(96, 165, 250, 0.45);
-    color: #eff6ff;
-}
-
-:root[data-theme="light"] .stack-demo__button--primary {
-    background: rgba(59, 130, 246, 0.45);
-    color: #1e3a8a;
-}
-
-.stack-demo__button--primary:hover {
-    background: rgba(59, 130, 246, 0.45);
-    border-color: rgba(129, 140, 248, 0.65);
-}
-
-:root[data-theme="light"] .stack-demo__button--primary:hover {
-    background: rgba(59, 130, 246, 0.65);
-    color: #1e3a8a;
-}
-
-.stack-demo__button--danger {
-    background: rgba(239, 68, 68, 0.28);
-    border-color: rgba(248, 113, 113, 0.45);
-    color: #fef2f2;
-}
-
-:root[data-theme="light"] .stack-demo__button--danger {
-    background: rgba(239, 68, 68, 0.35);
-    color: #7f1d1d;
-}
-
-.stack-demo__button--danger:hover {
-    background: rgba(239, 68, 68, 0.4);
-    border-color: rgba(248, 113, 113, 0.65);
-}
-
-:root[data-theme="light"] .stack-demo__button--danger:hover {
-    background: rgba(239, 68, 68, 0.55);
-    color: #7f1d1d;
-}
-
-.stack-demo__icon {
-    font-size: 1.2rem;
-}
-
-.stack-demo__text {
-    font-size: 0.85rem;
-    color: var(--text-primary);
-    opacity: 0.92;
-}
-
-.stack-demo__badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.3rem 0.75rem;
-    border-radius: 999px;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-secondary);
-    font-size: 0.75rem;
-    letter-spacing: 0.06em;
-    color: var(--text-muted);
-}
-
-.stack-demo__badge--active {
-    border-color: rgba(74, 222, 128, 0.45);
-    background: rgba(34, 197, 94, 0.22);
-    color: #bbf7d0;
-}
-
-:root[data-theme="light"] .stack-demo__badge--active {
-    background: rgba(34, 197, 94, 0.32);
-    color: #15803d;
-}
-
-.wrap-demo {
-    display: grid;
-    gap: 2rem;
-    margin: 1.75rem 0 3rem;
-}
-
-.wrap-demo__section {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.wrap-demo__section-title {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    letter-spacing: 0.02em;
-}
-
-.wrap-demo__container {
-    padding: 1.25rem;
-    border-radius: 1rem;
-    border: 1px solid var(--border-secondary);
-    background: var(--bg-secondary);
-}
-
-.wrap-demo__chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.6rem 1rem;
-    border-radius: 0.75rem;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-tertiary);
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
-}
-
-    .wrap-demo__chip:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.4);
-    }
-
-:root[data-theme="light"] .wrap-demo__chip:hover {
-    box-shadow: 0 8px 16px rgba(51, 65, 85, 0.15);
-}
-
-.wrap-demo__chip--primary {
-    background: rgba(59, 130, 246, 0.28);
-    border-color: rgba(96, 165, 250, 0.45);
-    color: #dbeafe;
-}
-
-:root[data-theme="light"] .wrap-demo__chip--primary {
-    background: rgba(59, 130, 246, 0.35);
-    color: #1e3a8a;
-}
-
-.wrap-demo__chip--success {
-    background: rgba(34, 197, 94, 0.28);
-    border-color: rgba(74, 222, 128, 0.45);
-    color: #dcfce7;
-}
-
-:root[data-theme="light"] .wrap-demo__chip--success {
-    background: rgba(34, 197, 94, 0.35);
-    color: #14532d;
-}
-
-.wrap-demo__chip--warning {
-    background: rgba(251, 191, 36, 0.28);
-    border-color: rgba(251, 191, 36, 0.45);
-    color: #fef3c7;
-}
-
-:root[data-theme="light"] .wrap-demo__chip--warning {
-    background: rgba(251, 191, 36, 0.35);
-    color: #78350f;
-}
-
-.wrap-demo__chip--danger {
-    background: rgba(239, 68, 68, 0.28);
-    border-color: rgba(248, 113, 113, 0.45);
-    color: #fee2e2;
-}
-
-:root[data-theme="light"] .wrap-demo__chip--danger {
-    background: rgba(239, 68, 68, 0.35);
-    color: #7f1d1d;
-}
-
-.wrap-demo__chip--info {
-    background: rgba(139, 92, 246, 0.28);
-    border-color: rgba(167, 139, 250, 0.45);
-    color: #ede9fe;
-}
-
-:root[data-theme="light"] .wrap-demo__chip--info {
-    background: rgba(139, 92, 246, 0.35);
-    color: #4c1d95;
-}
-
-.wrap-demo__action {
-    padding: 0.6rem 1.2rem;
-    border-radius: 0.75rem;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-    font-size: 0.85rem;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    cursor: pointer;
-    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
-}
-
-    .wrap-demo__action:hover {
-        transform: translateY(-1px);
-        border-color: rgba(148, 163, 184, 0.45);
-    }
-
-:root[data-theme="dark"] .wrap-demo__action:hover {
-    background: rgba(51, 65, 85, 0.85);
-}
-
-:root[data-theme="light"] .wrap-demo__action:hover {
-    background: rgba(203, 213, 225, 0.85);
-}
-
-.wrap-demo__tag {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.35rem 0.75rem;
-    border-radius: 999px;
-    border: 1px solid var(--border-secondary);
-    background: var(--bg-secondary);
-    font-size: 0.75rem;
-    letter-spacing: 0.04em;
-    color: var(--text-primary);
-    opacity: 0.88;
-    transition: border-color 140ms ease, background 140ms ease;
-}
-
-    .wrap-demo__tag:hover {
-        border-color: rgba(148, 163, 184, 0.35);
-        background: var(--bg-tertiary);
-    }
-
-.rotary-table-demo {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    align-items: center;
-}
-
-.rotary-table-demo__selection {
-    margin: 0;
-    font-size: 0.85rem;
-    color: var(--text-muted);
-}
-
-.manual-demo__list {
-    margin: 0;
-    padding-left: 1.1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.45rem;
-    color: var(--text-primary);
-    opacity: 0.92;
-}
-
-.manual-demo__chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.15rem 0.6rem;
-    border-radius: 999px;
-    border: 1px solid var(--border-primary);
-    font-size: 0.7rem;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-}
-
-.manual-demo__chip--ok {
-    border-color: rgba(110, 231, 183, 0.45);
-    background: rgba(22, 163, 74, 0.2);
-    color: #bbf7d0;
-}
-
-:root[data-theme="light"] .manual-demo__chip--ok {
-    background: rgba(134, 239, 172, 0.35);
-    color: #15803d;
-}
-
-.manual-demo__chip--warn {
-    border-color: rgba(251, 191, 36, 0.45);
-    background: rgba(217, 119, 6, 0.2);
-    color: #fef3c7;
-}
-
-:root[data-theme="light"] .manual-demo__chip--warn {
-    background: rgba(254, 240, 138, 0.45);
-    color: #78350f;
-}
-
-.manual-demo__paragraph {
-    margin: 0;
-    line-height: 1.6;
-    color: var(--text-primary);
-    opacity: 0.92;
-}
-
-.tabs-demo__header-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.45rem 0.85rem;
-    border-radius: 999px;
-    border: 1px solid var(--border-secondary);
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    opacity: 0.95;
-    font-size: 0.78rem;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-}
-
-    .tabs-demo__header-pill strong {
-        font-size: 1.05rem;
-        font-weight: 700;
-        letter-spacing: 0.02em;
-    }
-
-.tabs-demo__header-action {
-    padding: 0.55rem 1.1rem;
-    border-radius: 0.9rem;
-    border: 1px solid rgba(96, 165, 250, 0.35);
-    background: linear-gradient(145deg, rgba(59, 130, 246, 0.22), rgba(79, 70, 229, 0.32));
-    color: var(--text-primary);
-    font-size: 0.76rem;
-    font-weight: 600;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    box-shadow: 0 14px 36px -28px rgba(59, 130, 246, 0.75);
-}
-
-:root[data-theme="light"] .tabs-demo__header-action {
-    background: linear-gradient(145deg, rgba(59, 130, 246, 0.35), rgba(79, 70, 229, 0.45));
-}
-
-.tabs-demo__header-action:hover,
-.tabs-demo__header-action:focus-visible {
-    transform: translateY(-1px);
-    border-color: rgba(191, 219, 254, 0.75);
-}
-
-.tabs-demo__panel {
-    display: grid;
-    gap: 1.1rem;
-}
-
-.tabs-demo__panel-header {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
-}
-
-.tabs-demo__panel-state {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-    padding: 0.35rem 0.75rem;
-    border-radius: 999px;
-    font-size: 0.72rem;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    font-weight: 700;
-    border: 1px solid transparent;
-}
-
-.tabs-demo__panel-state--positive {
-    background: rgba(34, 197, 94, 0.18);
-    border-color: rgba(74, 222, 128, 0.28);
-    color: rgba(187, 247, 208, 0.92);
-}
-
-:root[data-theme="light"] .tabs-demo__panel-state--positive {
-    background: rgba(34, 197, 94, 0.28);
-    color: #15803d;
-}
-
-.tabs-demo__panel-state--notice {
-    background: rgba(96, 165, 250, 0.16);
-    border-color: rgba(147, 197, 253, 0.28);
-    color: rgba(191, 219, 254, 0.92);
-}
-
-:root[data-theme="light"] .tabs-demo__panel-state--notice {
-    background: rgba(96, 165, 250, 0.26);
-    color: #1e3a8a;
-}
-
-.tabs-demo__panel-state--alert {
-    background: rgba(248, 113, 113, 0.18);
-    border-color: rgba(252, 165, 165, 0.32);
-    color: rgba(254, 202, 202, 0.95);
-}
-
-:root[data-theme="light"] .tabs-demo__panel-state--alert {
-    background: rgba(248, 113, 113, 0.28);
-    color: #7f1d1d;
-}
-
-.tabs-demo__panel-state--neutral {
-    background: rgba(148, 163, 184, 0.16);
-    border-color: rgba(148, 163, 184, 0.32);
-    color: rgba(226, 232, 240, 0.86);
-}
-
-:root[data-theme="light"] .tabs-demo__panel-state--neutral {
-    background: rgba(148, 163, 184, 0.26);
-    color: rgba(30, 41, 59, 0.92);
-}
-
-.tabs-demo__panel-state--standby {
-    background: rgba(234, 179, 8, 0.16);
-    border-color: rgba(250, 204, 21, 0.32);
-    color: rgba(254, 240, 138, 0.92);
-}
-
-:root[data-theme="light"] .tabs-demo__panel-state--standby {
-    background: rgba(234, 179, 8, 0.26);
-    color: #78350f;
-}
-
-.tabs-demo__panel-updated {
-    font-size: 0.78rem;
-    color: var(--text-muted);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-}
-
-.tabs-demo__panel-summary {
-    margin: 0;
-    color: var(--text-primary);
-    line-height: 1.7;
-}
-
-.tabs-demo__metrics {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-    gap: 0.85rem;
-}
-
-.tabs-demo__metric {
-    display: grid;
-    gap: 0.35rem;
-    padding: 0.75rem 0.9rem;
-    border-radius: 1rem;
-    border: 1px solid var(--border-secondary);
-    background: var(--bg-secondary);
-    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.12);
-}
-
-:root[data-theme="light"] .tabs-demo__metric {
-    box-shadow: inset 0 1px 0 rgba(71, 85, 105, 0.08);
-}
-
-.tabs-demo__metric dt {
-    margin: 0;
-    font-size: 0.72rem;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-}
-
-.tabs-demo__metric dd {
-    margin: 0;
-    font-size: 1.05rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    display: inline-flex;
-    align-items: baseline;
-    gap: 0.35rem;
-}
-
-    .tabs-demo__metric dd span {
-        font-size: 0.78rem;
-        color: var(--text-muted);
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-    }
-
-.tabs-demo__panel-footer {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.6rem;
-}
-
-.tabs-demo__cta {
-    padding: 0.65rem 1.4rem;
-    border-radius: 0.95rem;
-    border: 1px solid rgba(96, 165, 250, 0.35);
-    background: linear-gradient(145deg, rgba(79, 70, 229, 0.26), rgba(59, 130, 246, 0.26));
-    color: var(--text-primary);
-    font-size: 0.78rem;
-    font-weight: 600;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-}
-
-:root[data-theme="light"] .tabs-demo__cta {
-    background: linear-gradient(145deg, rgba(79, 70, 229, 0.38), rgba(59, 130, 246, 0.38));
-}
-
-.tabs-demo__cta:hover,
-.tabs-demo__cta:focus-visible {
-    transform: translateY(-1px);
-    border-color: rgba(191, 219, 254, 0.78);
-}
-
-.tabs-demo__cta--ghost {
-    background: var(--bg-secondary);
-    border-color: var(--border-primary);
-}
-
-    .tabs-demo__cta--ghost:hover,
-    .tabs-demo__cta--ghost:focus-visible {
-        border-color: rgba(148, 163, 184, 0.55);
-    }
-
-@media (max-width: 720px) {
-    .tabs-demo__header-pill {
-        display: none;
-    }
-
-    .tabs-demo__panel {
-        gap: 0.9rem;
-    }
-
-    .tabs-demo__metrics {
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    }
-}
-
-.equipment-layout-demo {
-    margin: 1.5rem 0 3rem;
-    border-radius: 1.5rem;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-secondary);
-    padding: 2rem;
-    box-shadow: var(--shadow-elevated);
-}
-
-.equipment-layout-demo__floor {
-    position: relative;
-    width: 100%;
-    min-height: 520px;
-    background: var(--bg-tertiary);
-    border-radius: 1.2rem;
-    border: 1px solid var(--border-secondary);
-    overflow: hidden;
-}
-
-    .equipment-layout-demo__floor::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: repeating-linear-gradient( 90deg, transparent, transparent 49px, rgba(148, 163, 184, 0.03) 49px, rgba(148, 163, 184, 0.03) 50px ), repeating-linear-gradient( 0deg, transparent, transparent 49px, rgba(148, 163, 184, 0.03) 49px, rgba(148, 163, 184, 0.03) 50px );
-        pointer-events: none;
-    }
-
-.equipment-layout-demo__zone {
-    position: absolute;
-    border: 2px dashed var(--border-primary);
-    border-radius: 1rem;
-    background: rgba(59, 130, 246, 0.06);
-    backdrop-filter: blur(8px);
-    z-index: 1;
-}
-
-.equipment-layout-demo__zone--cell-a {
-    top: 5%;
-    left: 3%;
-    width: 35%;
-    height: 88%;
-    background: rgba(129, 140, 248, 0.08);
-    border-color: rgba(129, 140, 248, 0.3);
-}
-
-:root[data-theme="light"] .equipment-layout-demo__zone--cell-a {
-    background: rgba(129, 140, 248, 0.12);
-}
-
-.equipment-layout-demo__zone--transfer {
-    top: 30%;
-    left: 36%;
-    width: 26%;
-    height: 22%;
-    background: rgba(34, 197, 94, 0.06);
-    border-color: rgba(34, 197, 94, 0.25);
-}
-
-:root[data-theme="light"] .equipment-layout-demo__zone--transfer {
-    background: rgba(34, 197, 94, 0.12);
-}
-
-.equipment-layout-demo__zone--inspection {
-    top: 18%;
-    left: 65%;
-    width: 32%;
-    height: 48%;
-    background: rgba(251, 191, 36, 0.06);
-    border-color: rgba(251, 191, 36, 0.25);
-}
-
-:root[data-theme="light"] .equipment-layout-demo__zone--inspection {
-    background: rgba(251, 191, 36, 0.12);
-}
-
-.equipment-layout-demo__zone-label {
-    position: absolute;
-    top: 0.75rem;
-    left: 0.75rem;
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    padding: 0.35rem 0.75rem;
-    background: var(--bg-secondary);
-    border-radius: 0.5rem;
-    border: 1px solid var(--border-secondary);
-}
-
-.equipment-layout-demo__conveyor {
-    position: absolute;
-    top: 50%;
-    left: 5%;
-    right: 5%;
-    height: 18%;
-    transform: translateY(-50%);
-    background: repeating-linear-gradient( 90deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.15) 20px, transparent 20px, transparent 30px ), linear-gradient(180deg, rgba(71, 85, 105, 0.35), rgba(51, 65, 85, 0.45));
-    border: 2px solid var(--border-primary);
-    border-radius: 0.5rem;
-    box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.6);
-    z-index: 2;
-}
-
-:root[data-theme="light"] .equipment-layout-demo__conveyor {
-    box-shadow: inset 0 2px 8px rgba(71, 85, 105, 0.25);
-}
-
-.equipment-layout-demo__conveyor::before,
-.equipment-layout-demo__conveyor::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    width: 0;
-    height: 0;
-    border-style: solid;
-}
-
-.equipment-layout-demo__conveyor::before {
-    right: -18px;
-    transform: translateY(-50%);
-    border-width: 12px 0 12px 18px;
-    border-color: transparent transparent transparent rgba(148, 163, 184, 0.45);
-}
-
-.equipment-layout-demo__positioned {
-    position: absolute;
-    z-index: 10;
-}
-
-    .equipment-layout-demo__positioned:has(.equipment-indicator__details) {
-        z-index: 100;
-    }
-
-.equipment-layout-demo__indicator {
-    background: var(--bg-secondary);
-    backdrop-filter: blur(12px);
-    padding: 1.35rem 1.5rem;
-    border-radius: 1.2rem;
-    box-shadow: var(--shadow-elevated);
-    border: 1px solid var(--border-primary);
-    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
-}
-
-    .equipment-layout-demo__indicator:hover {
-        transform: translateY(-2px);
-        border-color: rgba(148, 163, 184, 0.35);
-    }
-
-.equipment-layout-demo__body {
-    margin: 0;
-    color: var(--text-primary);
-    opacity: 0.92;
-    line-height: 1.55;
-}
-
-.equipment-layout-demo__body--muted {
-    color: var(--text-muted);
-}
-
-.equipment-layout-demo__issues {
-    margin: 0.75rem 0 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: 0.45rem;
-}
-
-    .equipment-layout-demo__issues li {
-        padding: 0.45rem 0.6rem;
-        border-radius: 0.65rem;
-        background: rgba(248, 113, 113, 0.16);
-        border: 1px solid rgba(248, 113, 113, 0.32);
-        color: #fee2e2;
-        font-weight: 500;
-    }
-
-:root[data-theme="light"] .equipment-layout-demo__issues li {
-    background: rgba(248, 113, 113, 0.24);
-    color: #7f1d1d;
-}
-
-@media (max-width: 1024px) {
-    .equipment-layout-demo__floor {
-        min-height: 420px;
-    }
-
-    .equipment-layout-demo__indicator {
-        padding: 1rem 1.2rem;
-    }
-}
-
-@media (max-width: 768px) {
-    .equipment-layout-demo {
-        padding: 1.25rem;
-    }
-
-    .equipment-layout-demo__floor {
-        min-height: 380px;
-    }
-
-    .equipment-layout-demo__zone-label {
-        font-size: 0.65rem;
-        padding: 0.25rem 0.6rem;
-    }
-
-    .equipment-layout-demo__positioned {
-        transform: scale(0.9);
-    }
-}
-
-@media (max-width: 640px) {
-    .equipment-layout-demo {
-        padding: 1rem;
-    }
-
-    .equipment-layout-demo__floor {
-        min-height: 320px;
-    }
-
-    .equipment-layout-demo__zone--cell-a {
-        top: 8%;
-        left: 4%;
-        width: 38%;
-        height: 84%;
-    }
-
-    .equipment-layout-demo__zone--transfer {
-        display: none;
-    }
-
-    .equipment-layout-demo__zone--inspection {
-        top: 20%;
-        left: 58%;
-        width: 38%;
-        height: 60%;
-    }
-
-    .equipment-layout-demo__conveyor {
-        height: 14%;
-        left: 42%;
-        width: 14%;
-        top: 40%;
-    }
-
-    .equipment-layout-demo__positioned {
-        transform: scale(0.8);
-    }
-}
-
-.flux-field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.55rem;
-    padding: 0.95rem 1.05rem 1.05rem;
-    border-radius: 1.05rem;
-    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
-    border: 1px solid var(--border-primary);
-    box-shadow: var(--shadow-elevated);
-    color: var(--text-primary);
-}
-
-.flux-field--inline {
-    display: grid;
-    grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1fr);
-    column-gap: 1.25rem;
-    row-gap: 0.55rem;
-    align-items: center;
-    padding: 0.85rem 1.15rem;
-}
-
-    .flux-field--inline .flux-field__label {
-        grid-column: 1;
-        align-self: start;
-        margin: 0;
-        justify-content: flex-start;
-        align-items: flex-start;
-        gap: 0.45rem;
-    }
-
-.flux-field__label--inline {
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 0.45rem;
-}
-
-.flux-field__label--spacer {
-    grid-column: 1;
-    display: block;
-    min-height: 1.25rem;
-}
-
-.flux-field--inline .flux-field__label-hint {
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--text-muted);
-}
-
-.flux-field--inline .flux-field__control,
-.flux-field--inline .flux-checkbox {
-    grid-column: 2;
-}
-
-.flux-field--inline .flux-field__control {
-    width: 100%;
-}
-
-.flux-field--inline .flux-field__description,
-.flux-field--inline .flux-field__validation {
-    grid-column: 2;
-    margin-top: 0.15rem;
-}
-
-.flux-field--checkbox {
-    padding: 0.65rem 0.85rem;
-}
-
-.flux-field__label {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    font-size: 0.92rem;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-}
-
-.flux-field__label-hint {
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--text-muted);
-}
-
-.flux-field__control {
-    display: flex;
-    align-items: center;
-    gap: 0.65rem;
-    padding: 0.35rem 0.6rem;
-    border-radius: 0.85rem;
-    background: var(--input-bg);
-    border: 1px solid var(--border-primary);
-}
-
-.flux-input {
-    flex: 1;
-    min-width: 0;
-    border: none;
-    background: transparent;
-    font-size: 0.95rem;
-    font-weight: 500;
-    color: var(--text-primary);
-    caret-color: #60a5fa;
-}
-
-    .flux-input::placeholder {
-        color: var(--text-muted);
-        opacity: 0.55;
-    }
-
-    .flux-input:focus {
-        outline: none;
-    }
-
-.flux-field__affix {
-    font-size: 0.85rem;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-}
-
-.flux-field__description {
-    margin: 0;
-    font-size: 0.8rem;
-    line-height: 1.5;
-    color: var(--text-muted);
-}
-
-.flux-field__validation {
-    margin: 0;
-    font-size: 0.78rem;
-    font-weight: 500;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: #f97316;
-}
-
-.flux-field__validation--checkbox {
-    margin-top: 0.35rem;
-}
-
-/* Compact field variant */
-.flux-field--compact {
-    gap: 0.2rem;
-}
-
-    .flux-field--compact .flux-field__label {
-        font-size: 0.7rem;
-        font-weight: 600;
-    }
-
-    .flux-field--compact .flux-field__label-hint {
-        font-size: 0.65rem;
-    }
-
-    .flux-field--compact .flux-field__control {
-        padding: 0.2rem 0.4rem;
-        gap: 0.4rem;
-        border-radius: 0.5rem;
-    }
-
-    .flux-field--compact .flux-input {
-        font-size: 0.8rem;
-    }
-
-    .flux-field--compact .flux-field__affix {
-        font-size: 0.7rem;
-    }
-
-    .flux-field--compact .flux-field__description {
-        font-size: 0.68rem;
-    }
-
-    .flux-field--compact .flux-field__validation {
-        font-size: 0.65rem;
-    }
-
-.flux-checkbox {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.75rem;
-    cursor: pointer;
-    user-select: none;
-}
-
-.flux-checkbox--inline {
-    align-items: center;
-    justify-content: flex-start;
-    gap: 0.65rem;
-}
-
-.flux-checkbox__input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.flux-checkbox__decor {
-    width: 1.2rem;
-    height: 1.2rem;
-    border-radius: 0.35rem;
-    border: 2px solid rgba(96, 165, 250, 0.55);
-    box-shadow: inset 0 0 0 2px var(--bg-secondary);
-    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
-    margin-top: 0.15rem;
-}
-
-.flux-checkbox__input:focus-visible + .flux-checkbox__decor,
-.flux-checkbox__input:focus-visible + .flux-checkbox__decor + .flux-checkbox__content {
-    outline: 2px solid rgba(96, 165, 250, 0.6);
-    outline-offset: 3px;
-}
-
-.flux-checkbox__input:checked + .flux-checkbox__decor {
-    background: linear-gradient(135deg, rgba(96, 165, 250, 0.9), rgba(59, 130, 246, 0.85));
-    border-color: rgba(96, 165, 250, 0.95);
-}
-
-.flux-checkbox__content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-    color: var(--text-primary);
-}
-
-.flux-checkbox__label {
-    font-weight: 600;
-    font-size: 0.9rem;
-}
-
-.flux-checkbox__description {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-}
-
-.flux-field__description--checkbox-inline {
-    margin-top: 0;
-}
-
-@media (max-width: 720px) {
-    .flux-field--inline {
-        grid-template-columns: minmax(0, 1fr);
-        row-gap: 0.5rem;
-    }
-
-        .flux-field--inline .flux-field__label,
-        .flux-field--inline .flux-field__label--spacer,
-        .flux-field--inline .flux-field__control,
-        .flux-field--inline .flux-checkbox,
-        .flux-field--inline .flux-field__description,
-        .flux-field--inline .flux-field__validation {
-            grid-column: 1;
-        }
-
-    .flux-field--inline {
-        padding: 0.95rem 1.05rem 1.05rem;
-    }
-}
-
-.form-demo {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: 1.5rem;
-    margin: 1.75rem 0 2.25rem;
-}
-
-.form-demo__actions {
-    display: flex;
-    gap: 0.9rem;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
-.form-demo__submit {
-    border: none;
-    border-radius: 999px;
-    padding: 0.65rem 1.45rem;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.85), rgba(59, 130, 246, 0.9));
-    color: #f8fafc;
-    cursor: pointer;
-    box-shadow: 0 18px 32px -24px rgba(59, 130, 246, 0.6);
-    transition: transform 140ms ease, box-shadow 140ms ease;
-}
-
-    .form-demo__submit:hover,
-    .form-demo__submit:focus-visible {
-        transform: translateY(-1px);
-        box-shadow: 0 20px 38px -18px rgba(59, 130, 246, 0.7);
-        outline: none;
-    }
-
-.form-demo__reset {
-    border: 1px dashed rgba(148, 163, 184, 0.35);
-    border-radius: 999px;
-    padding: 0.6rem 1.2rem;
-    background: transparent;
-    color: var(--text-muted);
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    cursor: pointer;
-    transition: border-color 140ms ease, color 140ms ease;
-}
-
-    .form-demo__reset:hover,
-    .form-demo__reset:focus-visible {
-        border-color: rgba(148, 163, 184, 0.55);
-        color: var(--text-primary);
-        outline: none;
-    }
-
-.form-demo__status {
-    margin: 0;
-    font-size: 0.82rem;
-    color: var(--text-muted);
-}
-
-.form-demo-rows {
-    display: flex;
-    flex-direction: column;
-    gap: 1.1rem;
-    margin: 1.6rem 0 2.25rem;
-}
-
-.form-demo-compact {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 0.6rem 0.8rem;
-    margin: 1.6rem 0 2.25rem;
-    padding: 1rem;
-    border-radius: 0.75rem;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--border-secondary);
-}
-
-.form-demo__headline {
-    margin: 0;
-    font-size: 1.1rem;
-    color: var(--text-primary);
-    letter-spacing: 0.01em;
-}
-
-.task-demo {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.5rem;
-    align-items: center;
-    margin: 1.5rem 0 2.5rem;
-}
-
-.task-demo__button {
-    display: flex;
-    flex-direction: column;
-    gap: 0.65rem;
-}
-
-.task-demo__panel {
-    display: flex;
-    flex-direction: column;
-    gap: 0.65rem;
-    padding: 0.9rem 1.1rem;
-    border-radius: 0.85rem;
-    background: rgba(15, 23, 42, 0.04);
-    border: 1px solid var(--border-secondary);
-    min-width: 220px;
-}
-
-:root[data-theme="light"] .task-demo__panel {
-    background: rgba(226, 232, 240, 0.25);
-}
-
-.task-demo__option {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.85rem;
-    color: rgba(71, 85, 105, 0.95);
-    font-weight: 500;
-}
-
-:root[data-theme="light"] .task-demo__option {
-    color: rgba(51, 65, 85, 0.95);
-}
-
-.task-demo__state {
-    display: block;
-    font-size: 0.78rem;
-    letter-spacing: 0.04em;
-}
-
-.toast-demo {
-    margin: 1.5rem 0 2.5rem;
-}
-
-.toast-demo__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    align-items: center;
-}
-
-.toast-demo__button {
-    padding: 0.65rem 1.25rem;
-    border-radius: 0.75rem;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-    font-size: 0.85rem;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    cursor: pointer;
-    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
-}
-
-    .toast-demo__button:hover {
-        transform: translateY(-1px);
-        border-color: rgba(148, 163, 184, 0.45);
-    }
-
-:root[data-theme="dark"] .toast-demo__button:hover {
-    background: rgba(51, 65, 85, 0.85);
-}
-
-:root[data-theme="light"] .toast-demo__button:hover {
-    background: rgba(203, 213, 225, 0.85);
-}
-
-.toast-demo__button--info {
-    background: rgba(59, 130, 246, 0.28);
-    border-color: rgba(96, 165, 250, 0.45);
-    color: #dbeafe;
-}
-
-:root[data-theme="light"] .toast-demo__button--info {
-    background: rgba(59, 130, 246, 0.35);
-    color: #1e3a8a;
-}
-
-.toast-demo__button--info:hover {
-    background: rgba(59, 130, 246, 0.45);
-    border-color: rgba(129, 140, 248, 0.65);
-}
-
-:root[data-theme="light"] .toast-demo__button--info:hover {
-    background: rgba(59, 130, 246, 0.55);
-}
-
-.toast-demo__button--success {
-    background: rgba(34, 197, 94, 0.28);
-    border-color: rgba(74, 222, 128, 0.45);
-    color: #dcfce7;
-}
-
-:root[data-theme="light"] .toast-demo__button--success {
-    background: rgba(34, 197, 94, 0.35);
-    color: #14532d;
-}
-
-.toast-demo__button--success:hover {
-    background: rgba(34, 197, 94, 0.45);
-    border-color: rgba(74, 222, 128, 0.65);
-}
-
-:root[data-theme="light"] .toast-demo__button--success:hover {
-    background: rgba(34, 197, 94, 0.55);
-}
-
-.toast-demo__button--warning {
-    background: rgba(251, 191, 36, 0.28);
-    border-color: rgba(251, 191, 36, 0.45);
-    color: #fef3c7;
-}
-
-:root[data-theme="light"] .toast-demo__button--warning {
-    background: rgba(251, 191, 36, 0.35);
-    color: #78350f;
-}
-
-.toast-demo__button--warning:hover {
-    background: rgba(251, 191, 36, 0.45);
-    border-color: rgba(251, 191, 36, 0.65);
-}
-
-:root[data-theme="light"] .toast-demo__button--warning:hover {
-    background: rgba(251, 191, 36, 0.55);
-}
-
-.toast-demo__button--error {
-    background: rgba(239, 68, 68, 0.28);
-    border-color: rgba(248, 113, 113, 0.45);
-    color: #fee2e2;
-}
-
-:root[data-theme="light"] .toast-demo__button--error {
-    background: rgba(239, 68, 68, 0.35);
-    color: #7f1d1d;
-}
-
-.toast-demo__button--error:hover {
-    background: rgba(239, 68, 68, 0.45);
-    border-color: rgba(248, 113, 113, 0.65);
-}
-
-:root[data-theme="light"] .toast-demo__button--error:hover {
-    background: rgba(239, 68, 68, 0.55);
-}
-
-.toast-demo__button--custom {
-    background: rgba(139, 92, 246, 0.28);
-    border-color: rgba(167, 139, 250, 0.45);
-    color: #ede9fe;
-}
-
-:root[data-theme="light"] .toast-demo__button--custom {
-    background: rgba(139, 92, 246, 0.35);
-    color: #4c1d95;
-}
-
-.toast-demo__button--custom:hover {
-    background: rgba(139, 92, 246, 0.45);
-    border-color: rgba(167, 139, 250, 0.65);
-}
-
-:root[data-theme="light"] .toast-demo__button--custom:hover {
-    background: rgba(139, 92, 246, 0.55);
-}
-
-.code-examples {
-    margin: 2rem 0;
-}
-
-    .code-examples h3 {
-        margin: 1.5rem 0 0.75rem 0;
-        font-size: 1.1rem;
-        font-weight: 600;
-        color: var(--text-primary);
-        letter-spacing: 0.01em;
-    }
-
-    .code-examples pre {
-        background: var(--code-bg);
-        border: 1px solid var(--border-secondary);
-        border-radius: 0.75rem;
-        padding: 1.25rem;
-        margin: 0.75rem 0 1.5rem 0;
-        overflow-x: auto;
-        font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
-        font-size: 0.85rem;
-        line-height: 1.6;
-        color: var(--code-color);
-    }
-
-    .code-examples code {
-        background: none;
-        padding: 0;
-        border-radius: 0;
-        font-size: inherit;
-        color: inherit;
-    }
diff --git a/src/core/src/AXOpen.Core.Blazor/wwwroot/fluxion/fluxion.css b/src/core/src/AXOpen.Core.Blazor/wwwroot/fluxion/fluxion.css
deleted file mode 100644
index bcdcf9007..000000000
--- a/src/core/src/AXOpen.Core.Blazor/wwwroot/fluxion/fluxion.css
+++ /dev/null
@@ -1,348 +0,0 @@
-/* ===================================
-   THEME VARIABLES
-   =================================== */
-
-@import url("utilities.css");
-
-/* Light Theme (Default) */
-:root,
-:root[data-theme="light"] {
-    color-scheme: light;
-    --font-family-base: 'Inter', 'Helvetica Neue', Arial, sans-serif;
-    --text-primary: rgba(15, 23, 42, 0.92);
-    --text-muted: rgba(71, 85, 105, 0.82);
-    --surface-elevated: rgba(248, 250, 252, 0.86);
-    --surface-highlight: rgba(59, 130, 246, 0.18);
-    --shadow-elevated: 0 24px 48px rgba(51, 65, 85, 0.15);
-    --bg-primary: #f8fafc;
-    --bg-secondary: rgba(241, 245, 249, 0.85);
-    --bg-tertiary: rgba(226, 232, 240, 0.75);
-    --border-primary: rgba(100, 116, 139, 0.25);
-    --border-secondary: rgba(148, 163, 184, 0.18);
-}
-
-/* Dark Theme */
-:root[data-theme="dark"] {
-    color-scheme: dark;
-    --text-primary: rgba(226, 232, 240, 0.92);
-    --text-muted: rgba(148, 163, 184, 0.82);
-    --surface-elevated: rgba(15, 23, 42, 0.86);
-    --surface-highlight: rgba(59, 130, 246, 0.32);
-    --shadow-elevated: 0 24px 48px rgba(15, 23, 42, 0.55);
-    --bg-primary: #020617;
-    --bg-secondary: rgba(15, 23, 42, 0.65);
-    --bg-tertiary: rgba(30, 41, 59, 0.75);
-    --border-primary: rgba(148, 163, 184, 0.25);
-    --border-secondary: rgba(148, 163, 184, 0.18);
-}
-
-*, *::before, *::after {
-    box-sizing: border-box;
-}
-
-html, body {
-    margin: 0;
-    padding: 0;
-    min-height: 100%;
-    font-family: var(--font-family-base);
-    background-color: var(--bg-primary);
-    color: var(--text-primary);
-    transition: background-color 300ms ease, color 300ms ease;
-}
-
-.visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-
-body {
-    line-height: 1.6;
-    -webkit-font-smoothing: antialiased;
-}
-
-a {
-    color: #82cfff;
-    text-decoration: none;
-    transition: color 140ms ease;
-}
-
-:root[data-theme="light"] a {
-    color: #0369a1;
-}
-
-a:hover,
-a:focus-visible {
-    color: #e0f2fe;
-}
-
-:root[data-theme="light"] a:hover,
-:root[data-theme="light"] a:focus-visible {
-    color: #0c4a6e;
-}
-
-button,
-input,
-textarea,
-select {
-    font: inherit;
-    color: inherit;
-}
-
-button {
-    cursor: pointer;
-    border: none;
-    background: none;
-    transition: transform 140ms ease, box-shadow 160ms ease, background 160ms ease;
-}
-
-button:focus-visible {
-    outline: 2px solid rgba(148, 163, 184, 0.45);
-    outline-offset: 3px;
-    border-radius: 999px;
-}
-
-button:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-
-code {
-    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
-    background: rgba(15, 23, 42, 0.65);
-    color: #e0f2fe;
-    padding: 0.1rem 0.45rem;
-    border-radius: 0.45rem;
-    font-size: 0.85em;
-}
-
-:root[data-theme="light"] code {
-    background: rgba(226, 232, 240, 0.65);
-    color: #0c4a6e;
-}
-
-.blazor-error-boundary {
-    display: block;
-    margin: 1.5rem 0;
-    padding: 1.5rem 1.75rem;
-    border-radius: 1.4rem;
-    border: 1px solid rgba(248, 113, 113, 0.4);
-    background: linear-gradient(140deg, rgba(248, 113, 113, 0.14) 0%, rgba(15, 23, 42, 0.9) 100%);
-    color: #fecaca;
-    box-shadow: var(--shadow-elevated);
-}
-
-:root[data-theme="light"] .blazor-error-boundary {
-    border-color: rgba(220, 38, 38, 0.4);
-    background: linear-gradient(140deg, rgba(252, 165, 165, 0.24) 0%, rgba(248, 250, 252, 0.9) 100%);
-    color: #991b1b;
-}
-
-    .blazor-error-boundary::after {
-        content: "Unhandled exception";
-        display: block;
-        margin-top: 0.75rem;
-        font-weight: 600;
-        letter-spacing: 0.06em;
-        text-transform: uppercase;
-        color: rgba(248, 113, 113, 0.8);
-    }
-
-:root[data-theme="light"] .blazor-error-boundary::after {
-    color: rgba(220, 38, 38, 0.8);
-}
-
-.valid.modified:not([type=checkbox]) {
-    outline: 1px solid rgba(74, 222, 128, 0.55);
-}
-
-.invalid {
-    outline: 1px solid rgba(248, 113, 113, 0.65);
-}
-
-.validation-message {
-    color: rgba(248, 113, 113, 0.85);
-    font-weight: 500;
-}
-
-:root[data-theme="light"] .validation-message {
-    color: rgba(220, 38, 38, 0.85);
-}
-
-.lead {
-    font-size: 1.05rem;
-    color: var(--text-primary);
-    opacity: 0.89;
-}
-
-.muted {
-    font-size: 0.9rem;
-    color: var(--text-muted);
-}
-
-/* ===================================
-   LOGIN COMPONENT
-   =================================== */
-
-.flux-login {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    padding: 1rem;
-    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
-}
-
-.flux-login__container {
-    width: 100%;
-    max-width: 24rem;
-    padding: 2rem;
-    background: var(--surface-elevated);
-    border: 1px solid var(--border-secondary);
-    border-radius: 0.75rem;
-    box-shadow: var(--shadow-elevated);
-    backdrop-filter: blur(10px);
-}
-
-.flux-login__header {
-    text-align: center;
-    margin-bottom: 2rem;
-}
-
-.flux-login__title {
-    font-size: 1.75rem;
-    font-weight: 700;
-    color: var(--text-primary);
-    margin: 0 0 0.5rem 0;
-    letter-spacing: -0.025em;
-}
-
-.flux-login__subtitle {
-    font-size: 0.95rem;
-    color: var(--text-muted);
-    margin: 0;
-    line-height: 1.5;
-}
-
-.flux-login__form {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-}
-
-.flux-login__field {
-    margin-bottom: 0;
-}
-
-.flux-login__remember {
-    margin: 0.5rem 0;
-}
-
-.flux-login__actions {
-    margin-top: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.flux-login__submit {
-    width: 100%;
-    padding: 0.75rem 1.5rem;
-    font-size: 0.95rem;
-    font-weight: 600;
-    border: none;
-    border-radius: 0.5rem;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    transition: all 200ms ease;
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%);
-    color: white;
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
-}
-
-.flux-login__submit:hover:not(:disabled) {
-    background: linear-gradient(135deg, rgba(59, 130, 246, 1) 0%, rgba(37, 99, 235, 1) 100%);
-    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
-    transform: translateY(-1px);
-}
-
-.flux-login__submit:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-    transform: none;
-}
-
-.flux-login__error {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem;
-    margin-top: 1rem;
-    background: rgba(248, 113, 113, 0.1);
-    border: 1px solid rgba(248, 113, 113, 0.3);
-    border-radius: 0.5rem;
-    color: rgba(248, 113, 113, 0.9);
-    font-size: 0.9rem;
-}
-
-:root[data-theme="light"] .flux-login__error {
-    background: rgba(220, 38, 38, 0.1);
-    border-color: rgba(220, 38, 38, 0.3);
-    color: rgba(220, 38, 38, 0.9);
-}
-
-.flux-login__error-icon {
-    font-size: 1rem;
-}
-
-.flux-login__footer {
-    margin-top: 1.5rem;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-
-.flux-login__link {
-    color: rgba(59, 130, 246, 0.9);
-    text-decoration: none;
-    font-size: 0.9rem;
-    font-weight: 500;
-    transition: color 200ms ease;
-}
-
-.flux-login__link:hover {
-    color: rgba(37, 99, 235, 1);
-    text-decoration: underline;
-}
-
-.flux-login__separator {
-    color: var(--text-muted);
-    font-size: 0.9rem;
-}
-
-.flux-spinner {
-    width: 1rem;
-    height: 1rem;
-    border: 2px solid transparent;
-    border-top: 2px solid currentColor;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
diff --git a/src/core/src/AXOpen.Core.Blazor/wwwroot/fluxion/utilities.css b/src/core/src/AXOpen.Core.Blazor/wwwroot/fluxion/utilities.css
deleted file mode 100644
index 7901f580f..000000000
--- a/src/core/src/AXOpen.Core.Blazor/wwwroot/fluxion/utilities.css
+++ /dev/null
@@ -1,594 +0,0 @@
-/* Fluxion Utility Classes
- * Reusable utility classes for common patterns across components
- */
-
-/* ===== BUTTON UTILITIES ===== */
-
-/* Base button */
-.flux-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.65rem 1rem;
-    border-radius: 0.75rem;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-    font-weight: 600;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    cursor: pointer;
-    transition: transform 140ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
-}
-
-.flux-btn:hover:not(:disabled),
-.flux-btn:focus-visible {
-    transform: translateY(-1px);
-    border-color: rgba(148, 163, 184, 0.45);
-    outline: none;
-}
-
-:root[data-theme="light"] .flux-btn:hover:not(:disabled),
-:root[data-theme="light"] .flux-btn:focus-visible {
-    background: rgba(226, 232, 240, 0.85);
-    border-color: rgba(100, 116, 139, 0.5);
-}
-
-.flux-btn:focus-visible {
-    outline: 2px solid rgba(148, 163, 184, 0.55);
-    outline-offset: 2px;
-}
-
-.flux-btn:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-    transform: none;
-}
-
-/* Primary button */
-.flux-btn--primary {
-    background: #6366f1;
-    color: #ffffff;
-    border-color: #4f46e5;
-}
-
-:root[data-theme="dark"] .flux-btn--primary {
-    background: rgba(79, 70, 229, 0.85);
-    border-color: rgba(99, 102, 241, 0.65);
-}
-
-.flux-btn--primary:hover:not(:disabled),
-.flux-btn--primary:focus-visible {
-    background: #4f46e5;
-    border-color: #4338ca;
-}
-
-:root[data-theme="dark"] .flux-btn--primary:hover:not(:disabled),
-:root[data-theme="dark"] .flux-btn--primary:focus-visible {
-    background: rgba(67, 56, 202, 0.95);
-}
-
-/* Success button */
-.flux-btn--success {
-    background: #22c55e;
-    color: #ffffff;
-    border-color: #16a34a;
-}
-
-:root[data-theme="dark"] .flux-btn--success {
-    background: rgba(34, 197, 94, 0.85);
-    border-color: rgba(74, 222, 128, 0.65);
-}
-
-.flux-btn--success:hover:not(:disabled),
-.flux-btn--success:focus-visible {
-    background: #16a34a;
-    border-color: #15803d;
-}
-
-/* Danger button */
-.flux-btn--danger {
-    background: #ef4444;
-    color: #ffffff;
-    border-color: #dc2626;
-}
-
-:root[data-theme="dark"] .flux-btn--danger {
-    background: rgba(239, 68, 68, 0.85);
-    border-color: rgba(248, 113, 113, 0.65);
-}
-
-.flux-btn--danger:hover:not(:disabled),
-.flux-btn--danger:focus-visible {
-    background: #dc2626;
-    border-color: #b91c1c;
-}
-
-/* Ghost button (minimal) */
-.flux-btn--ghost {
-    background: transparent;
-    border-color: transparent;
-}
-
-.flux-btn--ghost:hover:not(:disabled) {
-    background: var(--bg-tertiary);
-    border-color: var(--border-secondary);
-}
-
-/* Button sizes */
-.flux-btn--sm {
-    padding: 0.45rem 0.75rem;
-    font-size: 0.75rem;
-}
-
-.flux-btn--lg {
-    padding: 0.85rem 1.25rem;
-    font-size: 1rem;
-}
-
-/* Button shapes */
-.flux-btn--pill {
-    border-radius: 999px;
-}
-
-.flux-btn--square {
-    padding: 0.65rem;
-    aspect-ratio: 1;
-}
-
-/* Icon button */
-.flux-btn--icon {
-    width: 2.25rem;
-    height: 2.25rem;
-    padding: 0;
-    border-radius: 0.65rem;
-}
-
-.flux-btn--icon-sm {
-    width: 1.75rem;
-    height: 1.75rem;
-}
-
-.flux-btn--icon-lg {
-    width: 2.75rem;
-    height: 2.75rem;
-}
-
-/* ===== STATE UTILITIES ===== */
-
-.flux-state--active {
-    border-color: rgba(148, 163, 184, 0.65);
-    box-shadow: var(--shadow-elevated);
-}
-
-:root[data-theme="dark"] .flux-state--active {
-    background: linear-gradient(145deg, rgba(51, 65, 85, 0.65), rgba(15, 23, 42, 0.85));
-}
-
-:root[data-theme="light"] .flux-state--active {
-    background: #6366f1;
-    color: #ffffff;
-    border-color: #4f46e5;
-}
-
-/* ===== CARD UTILITIES ===== */
-
-.flux-card {
-    border-radius: 1rem;
-    border: 1px solid var(--border-secondary);
-    background: var(--bg-tertiary);
-    padding: 1rem;
-    transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
-}
-
-.flux-card--elevated {
-    box-shadow: var(--shadow-elevated);
-}
-
-.flux-card--interactive {
-    cursor: pointer;
-}
-
-.flux-card--interactive:hover {
-    border-color: var(--border-primary);
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-elevated);
-}
-
-/* ===== LAYOUT UTILITIES ===== */
-
-.flux-flex {
-    display: flex;
-}
-
-.flux-flex--center {
-    align-items: center;
-    justify-content: center;
-}
-
-.flux-flex--between {
-    justify-content: space-between;
-}
-
-.flux-flex--col {
-    flex-direction: column;
-}
-
-.flux-gap--xs { gap: 0.25rem; }
-.flux-gap--sm { gap: 0.5rem; }
-.flux-gap--md { gap: 0.75rem; }
-.flux-gap--lg { gap: 1rem; }
-.flux-gap--xl { gap: 1.5rem; }
-.flux-gap--2xl { gap: 2rem; }
-
-/* ===== TYPOGRAPHY UTILITIES ===== */
-
-.flux-text--uppercase {
-    text-transform: uppercase;
-}
-
-.flux-text--tracking-wide {
-    letter-spacing: 0.05em;
-}
-
-.flux-text--tracking-wider {
-    letter-spacing: 0.08em;
-}
-
-.flux-text--tracking-widest {
-    letter-spacing: 0.12em;
-}
-
-.flux-text--primary {
-    color: var(--text-primary);
-}
-
-.flux-text--muted {
-    color: var(--text-muted);
-}
-
-.flux-font--semibold {
-    font-weight: 600;
-}
-
-.flux-font--bold {
-    font-weight: 700;
-}
-
-/* ===== BADGE UTILITIES ===== */
-
-.flux-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem 0.65rem;
-    border-radius: 999px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-tertiary);
-    color: var(--text-primary);
-    transition: background 300ms ease, border-color 300ms ease;
-}
-
-.flux-badge--primary {
-    background: rgba(99, 102, 241, 0.2);
-    border-color: rgba(99, 102, 241, 0.4);
-    color: #a5b4fc;
-}
-
-:root[data-theme="light"] .flux-badge--primary {
-    background: rgba(99, 102, 241, 0.15);
-    color: #4338ca;
-}
-
-.flux-badge--success {
-    background: rgba(34, 197, 94, 0.2);
-    border-color: rgba(34, 197, 94, 0.4);
-    color: #86efac;
-}
-
-:root[data-theme="light"] .flux-badge--success {
-    background: rgba(34, 197, 94, 0.15);
-    color: #15803d;
-}
-
-.flux-badge--warning {
-    background: rgba(251, 191, 36, 0.2);
-    border-color: rgba(251, 191, 36, 0.4);
-    color: #fcd34d;
-}
-
-:root[data-theme="light"] .flux-badge--warning {
-    background: rgba(251, 191, 36, 0.15);
-    color: #b45309;
-}
-
-.flux-badge--danger {
-    background: rgba(239, 68, 68, 0.2);
-    border-color: rgba(239, 68, 68, 0.4);
-    color: #fca5a5;
-}
-
-:root[data-theme="light"] .flux-badge--danger {
-    background: rgba(239, 68, 68, 0.15);
-    color: #991b1b;
-}
-
-/* ===== FOCUS UTILITIES ===== */
-
-.flux-focus-ring:focus-visible {
-    outline: 2px solid rgba(148, 163, 184, 0.55);
-    outline-offset: 2px;
-}
-
-.flux-focus-ring--primary:focus-visible {
-    outline-color: rgba(99, 102, 241, 0.6);
-}
-
-/* ===== TRANSITION UTILITIES ===== */
-
-.flux-transition {
-    transition: all 200ms ease;
-}
-
-.flux-transition--fast {
-    transition: all 140ms ease;
-}
-
-.flux-transition--slow {
-    transition: all 300ms ease;
-}
-
-.flux-transition--theme {
-    transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
-}
-
-/* ===== BORDER UTILITIES ===== */
-
-.flux-rounded--sm { border-radius: 0.5rem; }
-.flux-rounded--md { border-radius: 0.75rem; }
-.flux-rounded--lg { border-radius: 1rem; }
-.flux-rounded--xl { border-radius: 1.25rem; }
-.flux-rounded--2xl { border-radius: 1.5rem; }
-.flux-rounded--full { border-radius: 999px; }
-
-/* ===== SHADOW UTILITIES ===== */
-
-.flux-shadow--sm {
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.flux-shadow--md {
-    box-shadow: var(--shadow-elevated);
-}
-
-.flux-shadow--lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-
-/* ===== INTERACTIVE UTILITIES ===== */
-
-.flux-interactive {
-    cursor: pointer;
-    transition: transform 140ms ease, opacity 140ms ease;
-}
-
-.flux-interactive:hover {
-    transform: translateY(-1px);
-}
-
-.flux-interactive:active {
-    transform: translateY(0);
-}
-
-/* ===== ANIMATION UTILITIES ===== */
-
-.flux-pulse {
-    animation: flux-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes flux-pulse {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.5;
-    }
-}
-
-.flux-spin {
-    animation: flux-spin 1s linear infinite;
-}
-
-@keyframes flux-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* ===== ACCESSIBILITY UTILITIES ===== */
-
-.flux-sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-}
-
-/* ===== FORM UTILITIES ===== */
-
-.flux-input {
-    padding: 0.35rem 0.75rem;
-    border-radius: 0.5rem;
-    border: 1px solid var(--border-primary);
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    font-size: 0.875rem;
-    transition: border-color 200ms ease, background 300ms ease;
-}
-
-.flux-input:focus {
-    outline: 2px solid rgba(99, 102, 241, 0.5);
-    outline-offset: 0;
-    border-color: rgba(99, 102, 241, 0.5);
-}
-
-.flux-input:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-/* Compact field variant */
-.flux-field--compact {
-    gap: 0.2rem;
-}
-
-.flux-field--compact .flux-field__label {
-    font-size: 0.7rem;
-    font-weight: 600;
-}
-
-.flux-field--compact .flux-field__label-hint {
-    font-size: 0.65rem;
-}
-
-.flux-field--compact .flux-field__control {
-    padding: 0.2rem 0.4rem;
-    gap: 0.4rem;
-    border-radius: 0.5rem;
-}
-
-.flux-field--compact .flux-input {
-    font-size: 0.8rem;
-}
-
-.flux-field--compact .flux-field__affix {
-    font-size: 0.7rem;
-}
-
-.flux-field--compact .flux-field__description {
-    font-size: 0.68rem;
-}
-
-.flux-field--compact .flux-field__validation {
-    font-size: 0.65rem;
-}
-
-/* ===== DIVIDER UTILITIES ===== */
-
-.flux-divider {
-    border: 0;
-    border-top: 1px solid var(--border-secondary);
-    margin: 1rem 0;
-    transition: border-color 300ms ease;
-}
-
-.flux-divider--vertical {
-    border-top: 0;
-    border-left: 1px solid var(--border-secondary);
-    margin: 0 1rem;
-    height: auto;
-}
-
-/* ===== CONTAINER UTILITIES ===== */
-
-.flux-container {
-    width: 100%;
-    max-width: 1280px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-
-.flux-container--sm {
-    max-width: 640px;
-}
-
-.flux-container--md {
-    max-width: 768px;
-}
-
-.flux-container--lg {
-    max-width: 1024px;
-}
-
-/* ===== SPACING UTILITIES ===== */
-
-.flux-p--xs { padding: 0.25rem; }
-.flux-p--sm { padding: 0.5rem; }
-.flux-p--md { padding: 0.75rem; }
-.flux-p--lg { padding: 1rem; }
-.flux-p--xl { padding: 1.5rem; }
-.flux-p--2xl { padding: 2rem; }
-
-.flux-m--xs { margin: 0.25rem; }
-.flux-m--sm { margin: 0.5rem; }
-.flux-m--md { margin: 0.75rem; }
-.flux-m--lg { margin: 1rem; }
-.flux-m--xl { margin: 1.5rem; }
-.flux-m--2xl { margin: 2rem; }
-
-/* ===== ALARM/STATUS BORDER UTILITIES ===== */
-
-.flux-border--info {
-    border: 1px solid rgba(59, 130, 246, 0.5);
-}
-
-.flux-border--warning {
-    border: 2px solid rgba(251, 191, 36, 0.6);
-}
-
-.flux-border--danger {
-    border: 2px solid rgba(239, 68, 68, 0.7);
-}
-
-.flux-shadow--glow-info {
-    box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
-}
-
-.flux-shadow--glow-warning {
-    box-shadow: 0 0 16px rgba(251, 191, 36, 0.4);
-}
-
-.flux-shadow--glow-danger {
-    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
-}
-
-:root[data-theme="light"] .flux-border--info {
-    border-color: rgba(37, 99, 235, 0.4);
-}
-
-:root[data-theme="light"] .flux-border--warning {
-    border-color: rgba(217, 119, 6, 0.5);
-}
-
-:root[data-theme="light"] .flux-border--danger {
-    border-color: rgba(220, 38, 38, 0.6);
-}
-
-:root[data-theme="light"] .flux-shadow--glow-info {
-    box-shadow: 0 0 12px rgba(37, 99, 235, 0.2);
-}
-
-:root[data-theme="light"] .flux-shadow--glow-warning {
-    box-shadow: 0 0 16px rgba(217, 119, 6, 0.25);
-}
-
-:root[data-theme="light"] .flux-shadow--glow-danger {
-    box-shadow: 0 0 20px rgba(220, 38, 38, 0.3);
-}
-