:root:root {
    --sx-sans: Inter, "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sx-mono: "JetBrains Mono", "SF Mono", Consolas, Menlo, "Sarasa Mono SC", "Noto Sans Mono CJK SC", monospace;
    --sx-xs: .75rem;
    --sx-sm: .8125rem;
    --sx-md: .875rem;
    --sx-lg: 1rem;
    --sx-xl: 1.25rem;
    --sx-space-1: 4px;
    --sx-space-2: 8px;
    --sx-space-3: 12px;
    --sx-space-4: 16px;
    --sx-space-5: 24px;
    --sx-space-6: 32px;
    --sx-radius-sm: 8px;
    --sx-radius-md: 10px;
    --sx-radius-lg: 14px;
    --sx-nav-width: 236px;
    --sx-nav-min-width: 60px;
    --sx-topbar-height: 60px;
    --sx-chat-sidebar-width: 288px;
    --sx-measure: 720px;
    --sx-tap: 32px;
}

html[data-theme="light"] {
    --sx-bg: #fff;
    --sx-panel: #fff;
    --sx-panel-2: #f7f7f9;
    --sx-field: #fff;
    --sx-line: #e3e3e8;
    --sx-line-2: #ededf1;
    --sx-line-strong: #8b8b99;
    --sx-ink: #1a1a21;
    --sx-ink-2: #43434e;
    --sx-ink-3: #5e5e6b;
    --sx-ink-4: #6f6f7c;
    --sx-accent: #4f46e5;
    --sx-accent-hover: #4338ca;
    --sx-selection: #f1f1f4;
    --sx-selection-2: #f7f7f9;
    --sx-ring: rgba(79, 70, 229, .22);
    --sx-danger: #c0331f;
    --sx-danger-bg: #fbedeb;
    --sx-shadow-1: 0 1px 2px rgba(20, 20, 33, .06);
    --sx-shadow-2: 0 12px 32px -16px rgba(20, 20, 33, .2);
}

html[data-theme="dark"] {
    --sx-bg: #131319;
    --sx-panel: #1a1a24;
    --sx-panel-2: #16161e;
    --sx-field: #131319;
    --sx-line: #2c2c3a;
    --sx-line-2: #232330;
    --sx-line-strong: #6c6c80;
    --sx-ink: #f0f0f5;
    --sx-ink-2: #c6c6d2;
    --sx-ink-3: #a0a0b0;
    --sx-ink-4: #8f8fa1;
    --sx-accent: #a69bff;
    --sx-accent-hover: #b8afff;
    --sx-selection: #26263a;
    --sx-selection-2: #1f1f2b;
    --sx-ring: rgba(166, 155, 255, .3);
    --sx-danger: #ff8a7a;
    --sx-danger-bg: #38191a;
    --sx-shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --sx-shadow-2: 0 12px 32px -16px rgba(0, 0, 0, .7);
}

:root:root {
    --bs-primary: var(--sx-accent);
    --bs-primary-rgb: 79, 70, 229;
    --bs-body-color: var(--sx-ink);
    --bs-body-bg: var(--sx-bg);
    --bs-border-color: var(--sx-line);
    --bs-link-color: var(--sx-accent);
    --bs-link-hover-color: var(--sx-accent-hover);
    --custom-brand: var(--sx-accent);
    --custom-barnd-rgb: 79, 70, 229;
    --el-color-primary: var(--sx-accent);
    --el-text-color-primary: var(--sx-ink);
    --el-text-color-regular: var(--sx-ink-2);
    --el-text-color-secondary: var(--sx-ink-3);
    --el-text-color-placeholder: var(--sx-ink-4);
    --el-border-color: var(--sx-line-strong);
    --el-border-color-light: var(--sx-line);
    --el-border-color-lighter: var(--sx-line-2);
    --el-bg-color: var(--sx-panel);
    --el-bg-color-page: var(--sx-bg);
    --el-fill-color: var(--sx-panel-2);
    --el-fill-color-light: var(--sx-panel-2);
    --el-fill-color-blank: var(--sx-panel);
    --el-font-family: var(--sx-sans);
    --chat-page-bg: var(--sx-bg);
    --chat-surface: var(--sx-panel);
    --chat-surface-solid: var(--sx-panel);
    --chat-surface-soft: var(--sx-panel-2);
    --chat-surface-muted: var(--sx-panel-2);
    --chat-border: var(--sx-line);
    --chat-border-strong: var(--sx-line-strong);
    --chat-shadow: none;
    --chat-shadow-soft: var(--sx-shadow-1);
    --chat-text: var(--sx-ink-2);
    --chat-text-muted: var(--sx-ink-4);
    --chat-title: var(--sx-ink);
    --chat-accent: var(--sx-accent);
    --chat-accent-soft: var(--sx-ring);
    --chat-accent-strong: var(--sx-ring);
    --chat-radius-lg: var(--sx-radius-lg);
    --chat-radius-md: var(--sx-radius-md);
    --chat-shell-gap: 0;
    --chat-sidebar-width: var(--sx-chat-sidebar-width);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.sx-application-layout,
body.sx-account-layout,
body.sx-empty-layout {
    color: var(--sx-ink);
    background: var(--sx-bg);
    font-family: var(--sx-sans);
    font-size: var(--sx-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.sx-application-layout { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, kbd, samp, [class*="mono"] { font-family: var(--sx-mono); }
:focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 2px; }

.sx-skip-link {
    position: fixed;
    top: -60px;
    left: 12px;
    z-index: 1200;
    padding: 10px 16px;
    border-radius: var(--sx-radius-sm);
    color: #fff;
    background: var(--sx-accent);
    text-decoration: none;
    transition: top .16s ease;
}
.sx-skip-link:focus { top: 12px; color: #fff; }

.sx-app-shell {
    display: grid;
    grid-template-columns: var(--sx-nav-width) minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    background: var(--sx-bg);
    transition: grid-template-columns .18s ease;
}
.sx-app-shell.is-nav-collapsed { grid-template-columns: var(--sx-nav-min-width) minmax(0, 1fr); }

.sx-sidebar {
    z-index: 30;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    color: var(--sx-ink-2);
    background: var(--sx-panel);
    border-right: 1px solid var(--sx-line);
}
.sx-nav-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--sx-topbar-height);
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--sx-line);
    flex: none;
}
.sx-brand {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 10px;
    color: var(--sx-ink);
    text-decoration: none;
}
.sx-brand:hover { color: var(--sx-ink); }
.sx-brand img {
    display: none;
}
.sx-brand::before,
.sx-account-brand::before {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: currentColor;
    content: "";
    -webkit-mask: url("/themes/systex/icons/brand-mark.svg") center / contain no-repeat;
    mask: url("/themes/systex/icons/brand-mark.svg") center / contain no-repeat;
}
.sx-brand span {
    overflow: hidden;
    font-family: var(--sx-mono);
    font-size: var(--sx-xs);
    font-weight: 600;
    letter-spacing: .18em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.sx-icon-button {
    display: inline-grid;
    width: var(--sx-tap);
    height: var(--sx-tap);
    min-width: var(--sx-tap);
    padding: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--sx-radius-sm);
    color: var(--sx-ink-4);
    background: transparent;
    cursor: pointer;
}
.sx-icon-button:hover { color: var(--sx-ink-2); background: var(--sx-panel-2); }
.sx-navigation { min-height: 0; flex: 1; overflow-y: auto; padding: 12px 8px; scrollbar-width: thin; }
.sx-navigation::-webkit-scrollbar { width: 8px; }
.sx-navigation::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: var(--sx-line); background-clip: content-box; }
.sx-nav-list, .sx-nav-children { margin: 0; padding: 0; list-style: none; }
.sx-nav-item { min-width: 0; }
.sx-nav-link {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 36px;
    margin: 0 0 2px;
    padding: 0 12px;
    align-items: center;
    gap: 11px;
    border: 0;
    border-radius: var(--sx-radius-sm);
    color: var(--sx-ink-2);
    background: transparent;
    font-size: var(--sx-md);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color .14s ease, background .14s ease;
}
.sx-nav-link:hover { color: var(--sx-ink); background: var(--sx-panel-2); }
.sx-nav-icon { display: inline-grid; width: 17px; flex: none; place-items: center; color: var(--sx-ink-4); }
.sx-nav-icon i {
    width: 17px;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    -webkit-text-stroke: .15px currentColor;
}
.sx-navigation .sx-nav-icon > i.fa-comment-o,
.sx-navigation .sx-nav-icon > i.fa-comments,
.sx-navigation .sx-nav-icon > i.fa-folder-o,
.sx-navigation .sx-nav-icon > i.fa-folder-open,
.sx-navigation .sx-nav-icon > i.fa-robot,
.sx-navigation .sx-nav-icon > i.fa-book,
.sx-navigation .sx-nav-icon > i.fa-list-ul,
.sx-navigation .sx-nav-icon > i.fa-sitemap,
.sx-navigation .sx-nav-icon > i.fa-project-diagram,
.sx-navigation .sx-nav-icon > i.fa-sliders,
.sx-navigation .sx-nav-icon > i.fa-id-card-o,
.sx-navigation .sx-nav-icon > i.fa-cog,
.sx-navigation .sx-nav-icon > i.fa-globe,
.sx-navigation .sx-nav-icon > i.fa-bookmark-o,
.sx-navigation .sx-nav-icon > i.fa-language {
    display: block;
    width: 17px;
    height: 17px;
    background: currentColor;
    font-size: 0;
    -webkit-mask: var(--sx-nav-icon-url) center / contain no-repeat;
    mask: var(--sx-nav-icon-url) center / contain no-repeat;
}
.sx-navigation .sx-nav-icon > i.fa-comment-o { --sx-nav-icon-url: url("./icons/nav-chat.svg"); }
.sx-navigation .sx-nav-icon > i.fa-comments { --sx-nav-icon-url: url("./icons/nav-chat.svg"); }
.sx-navigation .sx-nav-icon > i.fa-folder-o { --sx-nav-icon-url: url("./icons/nav-project.svg"); }
.sx-navigation .sx-nav-icon > i.fa-folder-open { --sx-nav-icon-url: url("./icons/nav-project.svg"); }
.sx-navigation .sx-nav-icon > i.fa-robot { --sx-nav-icon-url: url("./icons/nav-agent.svg"); }
.sx-navigation .sx-nav-icon > i.fa-book { --sx-nav-icon-url: url("./icons/nav-knowledge.svg"); }
.sx-navigation .sx-nav-icon > i.fa-list-ul { --sx-nav-icon-url: url("./icons/nav-knowledge.svg"); }
.sx-navigation .sx-nav-icon > i.fa-sitemap { --sx-nav-icon-url: url("./icons/nav-workflow.svg"); }
.sx-navigation .sx-nav-icon > i.fa-project-diagram { --sx-nav-icon-url: url("./icons/nav-workflow.svg"); }
.sx-navigation .sx-nav-icon > i.fa-sliders { --sx-nav-icon-url: url("./icons/nav-model.svg"); }
.sx-navigation .sx-nav-icon > i.fa-id-card-o { --sx-nav-icon-url: url("./icons/nav-identity.svg"); }
.sx-navigation .sx-nav-icon > i.fa-cog { --sx-nav-icon-url: url("./icons/nav-settings.svg"); }
.sx-navigation .sx-nav-icon > i.fa-globe { --sx-nav-icon-url: url("./icons/nav-chat.svg"); }
.sx-navigation .sx-nav-icon > i.fa-bookmark-o { --sx-nav-icon-url: url("./icons/nav-audit.svg"); }
.sx-navigation .sx-nav-icon > i.fa-language { --sx-nav-icon-url: url("./icons/nav-translate.svg"); }
.sx-nav-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-nav-chevron { flex: none; color: var(--sx-ink-4); font-size: 12px; transition: transform .18s ease; }
.sx-nav-item.is-open > .sx-nav-toggle-item .sx-nav-chevron { transform: rotate(90deg); }
.sx-nav-children { display: none; }
.sx-nav-item.is-open > .sx-nav-children { display: block; }
.sx-nav-item--depth-0 > .sx-nav-toggle-item {
    min-height: 28px;
    padding: 8px 12px 4px;
    color: var(--sx-ink-4);
    font-size: var(--sx-xs);
    cursor: default;
}
.sx-nav-item--depth-0 > .sx-nav-toggle-item:hover { color: var(--sx-ink-4); background: transparent; }
.sx-nav-item--depth-0 > .sx-nav-toggle-item .sx-nav-icon,
.sx-nav-item--depth-0 > .sx-nav-toggle-item .sx-nav-chevron { display: none; }
.sx-nav-item--depth-0 > .sx-nav-children { display: block; }
.sx-nav-item--depth-1 .sx-nav-link { padding-left: 12px; }
.sx-nav-item--depth-1 > .sx-nav-children {
    margin: 2px 0 8px 20px;
    padding: 2px 0 2px 14px;
    border-left: 1px solid var(--sx-line);
}
.sx-nav-item--depth-2 .sx-nav-link,
.sx-nav-item--depth-3 .sx-nav-link {
    min-height: 32px;
    margin: 0;
    padding: 0 10px;
    gap: 0;
    color: var(--sx-ink-3);
    font-size: var(--sx-sm);
    font-weight: 400;
}
.sx-nav-item--depth-2 .sx-nav-link:hover,
.sx-nav-item--depth-3 .sx-nav-link:hover { color: var(--sx-ink); background: var(--sx-panel-2); }
.sx-nav-item--depth-2.is-active > .sx-nav-link,
.sx-nav-item--depth-3.is-active > .sx-nav-link {
    color: var(--sx-accent);
    background: var(--sx-selection);
    font-weight: 600;
}
.sx-nav-item--depth-2.is-active > .sx-nav-link::before,
.sx-nav-item--depth-3.is-active > .sx-nav-link::before { display: none; }
.sx-nav-item.is-active > .sx-nav-link,
.sx-nav-link[aria-current="page"] {
    color: var(--sx-accent);
    background: var(--sx-selection);
    font-weight: 600;
}
.sx-nav-item.is-active > .sx-nav-link::before,
.sx-nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sx-accent);
}
.sx-nav-item.is-active > .sx-nav-link .sx-nav-icon,
.sx-nav-link[aria-current="page"] .sx-nav-icon { color: var(--sx-accent); }
.sx-nav-footer { flex: none; padding: 8px; border-top: 1px solid var(--sx-line); }
.sx-nav-preferences {
    display: grid;
    flex: none;
    gap: 8px;
    padding: 10px 8px;
    border-top: 1px solid var(--sx-line);
    border-bottom: 1px solid var(--sx-line);
    background: var(--sx-panel);
}
.sx-nav-preferences .sx-toolbar-list,
.sx-nav-preferences .sx-toolbar-item,
.sx-nav-preferences .sx-toolbar-dropdown { width: 100%; }
.sx-nav-preferences .sx-toolbar-button {
    width: 100%;
    justify-content: flex-start;
    border: 1px solid var(--sx-line);
    background: var(--sx-panel-2);
}
.sx-nav-preferences .sx-toolbar-button > span {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sx-nav-preferences .sx-toolbar-button.dropdown-toggle::after { margin-left: auto; }
.sx-nav-preferences .sx-theme-switch { display: flex; width: 100%; justify-content: stretch; }
.sx-nav-preferences .sx-theme-switch button { flex: 1 1 0; }

.sx-workspace { display: flex; min-width: 0; min-height: 0; flex-direction: column; background: var(--sx-bg); }
.sx-topbar {
    display: flex;
    height: var(--sx-topbar-height);
    min-height: var(--sx-topbar-height);
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    background: var(--sx-panel);
    border-bottom: 1px solid var(--sx-line);
}
.sx-nav-toggle { display: none; }
.sx-topbar-title {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    overflow: hidden;
    color: var(--sx-ink);
    font-size: var(--sx-xl);
    font-weight: 600;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sx-topbar-subtitle { min-width: 0; flex: 1; overflow: hidden; color: var(--sx-ink-4); font-size: var(--sx-sm); text-overflow: ellipsis; white-space: nowrap; }
.sx-topbar-tools { display: flex; margin-left: auto; align-items: center; gap: 8px; }
.sx-toolbar-list { display: flex; align-items: center; gap: 4px; }
.sx-toolbar-item { display: flex; align-items: center; }
.sx-theme-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--sx-line); border-radius: 999px; background: var(--sx-panel-2); }
.sx-theme-switch button { min-height: 26px; padding: 0 11px; border: 0; border-radius: 999px; color: var(--sx-ink-3); background: transparent; font-size: var(--sx-xs); cursor: pointer; }
.sx-theme-switch button[aria-pressed="true"] { color: var(--sx-accent); background: var(--sx-panel); font-weight: 600; box-shadow: var(--sx-shadow-1); }
.sx-app-content { min-width: 0; min-height: 0; flex: 1; overflow: auto; padding: 24px 32px; background: var(--sx-bg); }
.sx-app-content--fluid { display: flex; overflow: hidden; padding: 0; }
.sx-content-toolbar { display: flex; margin-bottom: 24px; align-items: center; justify-content: space-between; gap: 16px; }
.sx-content-toolbar h1 { margin: 0; font-size: var(--sx-xl); font-weight: 600; }
.sx-content-actions { display: flex; gap: 8px; }
.sx-page-alerts { position: relative; z-index: 20; }

.sx-toolbar-dropdown { width: 100%; }
.sx-toolbar-button {
    display: flex;
    min-height: 32px;
    padding: 0 8px;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--sx-radius-sm);
    color: var(--sx-ink-2);
    background: transparent;
    font-size: var(--sx-sm);
}
.sx-toolbar-button:hover, .sx-toolbar-button[aria-expanded="true"] { background: var(--sx-panel-2); }
.sx-user-button { width: 100%; text-align: left; }
.sx-user-avatar { display: inline-grid; width: 32px; height: 32px; flex: none; place-items: center; border: 1px solid var(--sx-line); border-radius: 50%; background: var(--sx-panel-2); font-family: var(--sx-mono); font-size: var(--sx-xs); font-weight: 600; }
.sx-user-name { min-width: 0; flex: 1; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sx-dropdown-menu { min-width: 210px; padding: 6px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-md); background: var(--sx-panel); box-shadow: var(--sx-shadow-2); }
.sx-dropdown-menu .dropdown-item { min-height: 34px; border-radius: 6px; color: var(--sx-ink-2); font-size: var(--sx-sm); }
.sx-dropdown-menu .dropdown-item:hover { color: var(--sx-ink); background: var(--sx-panel-2); }
.sx-dropdown-caption { padding: 6px 10px; color: var(--sx-ink-4); font-size: var(--sx-xs); }
.sx-sidebar-backdrop { display: none; }

.sx-app-shell.is-nav-collapsed .sx-brand,
.sx-app-shell.is-nav-collapsed .sx-nav-text,
.sx-app-shell.is-nav-collapsed .sx-nav-chevron,
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-0 > .sx-nav-toggle-item,
.sx-app-shell.is-nav-collapsed .sx-user-name,
.sx-app-shell.is-nav-collapsed .sx-user-button::after { display: none; }
.sx-app-shell.is-nav-collapsed .sx-nav-header { padding: 0; justify-content: center; }
.sx-app-shell.is-nav-collapsed .sx-nav-collapse { display: inline-grid; }
.sx-app-shell.is-nav-collapsed .sx-navigation { padding-inline: 8px; }
.sx-app-shell.is-nav-collapsed .sx-nav-link { justify-content: center; padding: 0; }
.sx-app-shell.is-nav-collapsed .sx-nav-item.is-active > .sx-nav-link::before { left: -8px; }
.sx-app-shell.is-nav-collapsed .sx-user-button { justify-content: center; padding: 0; }

.sx-app-shell.is-nav-collapsed .sx-sidebar,
.sx-app-shell.is-nav-collapsed .sx-navigation { overflow: visible; }
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-1 { position: relative; }
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-1 > .sx-nav-toggle-item { cursor: pointer; }
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-1 > .sx-nav-children {
    position: absolute;
    top: -6px;
    left: calc(100% + 8px);
    z-index: 80;
    display: none;
    min-width: 176px;
    padding: 6px;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-md);
    background: var(--sx-panel);
    box-shadow: var(--sx-shadow-2);
}
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-1:hover > .sx-nav-children,
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-1:focus-within > .sx-nav-children,
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-1.is-open > .sx-nav-children { display: block; }
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-1 > .sx-nav-children .sx-nav-link {
    min-height: 34px;
    justify-content: flex-start;
    padding: 0 10px;
    gap: 8px;
}
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-1 > .sx-nav-children .sx-nav-text { display: block; }
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-1 > .sx-nav-children .sx-nav-icon { display: none; }
.sx-app-shell.is-nav-collapsed .sx-nav-item--depth-1 > .sx-nav-children .sx-nav-link::before { display: none; }
.sx-app-shell.is-nav-collapsed .sx-nav-preferences {
    position: relative;
    padding: 8px;
}
.sx-app-shell.is-nav-collapsed .sx-nav-preferences .sx-toolbar-button {
    width: 44px;
    justify-content: center;
    padding: 0;
    font-size: 0;
}
.sx-app-shell.is-nav-collapsed .sx-nav-preferences .sx-toolbar-button span { display: none; }
.sx-app-shell.is-nav-collapsed .sx-nav-preferences .sx-theme-switch {
    position: absolute;
    left: calc(100% + 8px);
    bottom: 8px;
    z-index: 80;
    display: none;
    width: 176px;
    padding: 4px;
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-radius-md);
    background: var(--sx-panel);
    box-shadow: var(--sx-shadow-2);
}
.sx-app-shell.is-nav-collapsed .sx-nav-preferences:hover .sx-theme-switch,
.sx-app-shell.is-nav-collapsed .sx-nav-preferences:focus-within .sx-theme-switch { display: flex; }

/* Keep collapsed submenus inside the navigation rail by temporarily peeking the full sidebar. */
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover),
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within),
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) {
    grid-template-columns: var(--sx-nav-width) minmax(0, 1fr);
}
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-sidebar,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-sidebar,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-sidebar {
    overflow: hidden;
}
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-navigation,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-navigation,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-navigation {
    overflow-x: hidden;
    overflow-y: auto;
}
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-brand,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-brand,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-brand { display: flex; }
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-text,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-text,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-text { display: block; }
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-chevron,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-chevron,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-chevron { display: inline-flex; }
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-item--depth-0 > .sx-nav-toggle-item,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-item--depth-0 > .sx-nav-toggle-item,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-item--depth-0 > .sx-nav-toggle-item { display: flex; }
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-link,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-link,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-link {
    justify-content: flex-start;
    padding-inline: 12px;
}
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-item--depth-1,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-item--depth-1,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-item--depth-1 { position: static; }
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-item--depth-1 > .sx-nav-children,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-item--depth-1 > .sx-nav-children,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-item--depth-1 > .sx-nav-children {
    top: auto;
    left: auto;
    z-index: auto;
    min-width: 0;
    padding: 2px 0 2px 14px;
    border: 0;
    border-left: 1px solid var(--sx-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: static;
}
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-item--depth-1:hover > .sx-nav-children,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-item--depth-1:focus-within > .sx-nav-children,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-item--depth-1.is-open > .sx-nav-children { display: block; }
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-item--depth-1 > .sx-nav-children .sx-nav-link,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-item--depth-1 > .sx-nav-children .sx-nav-link,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-item--depth-1 > .sx-nav-children .sx-nav-link {
    min-height: 32px;
    gap: 11px;
    padding-inline: 12px;
}
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-user-name,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-user-name,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-user-name { display: block; }
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-user-button,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-user-button,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-user-button {
    justify-content: flex-start;
    padding-inline: 8px;
}
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-preferences,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-preferences,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-preferences {
    padding: 10px 8px;
}
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-preferences .sx-toolbar-button,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-preferences .sx-toolbar-button,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-preferences .sx-toolbar-button {
    width: 100%;
    justify-content: flex-start;
    padding-inline: 8px;
    font-size: var(--sx-sm);
}
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-preferences .sx-toolbar-button span,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-preferences .sx-toolbar-button span,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-preferences .sx-toolbar-button span { display: block; }
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-preferences .sx-theme-switch,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-preferences .sx-theme-switch,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-preferences .sx-theme-switch {
    position: static;
    display: flex;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* The collapsed language control keeps its globe icon and drops the text/chevron. */
.sx-app-shell.is-nav-collapsed .sx-nav-preferences .sx-toolbar-button > i {
    display: inline-grid;
    width: 17px;
    min-width: 17px;
    height: 17px;
    place-items: center;
    font-size: 14px;
    line-height: 1;
}
.sx-app-shell.is-nav-collapsed .sx-nav-preferences .sx-toolbar-button.dropdown-toggle::after { display: none; }

/* Keep the hover peek's vertical hit targets stable. The Copilot section
   heading is useful in the full rail, but revealing it while the pointer is
   over a collapsed item shifts every item underneath the pointer. */
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:hover) .sx-nav-item--depth-0 > .sx-nav-toggle-item,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1:focus-within) .sx-nav-item--depth-0 > .sx-nav-toggle-item,
.sx-app-shell.is-nav-collapsed:has(.sx-nav-item--depth-1.is-open > .sx-nav-children) .sx-nav-item--depth-0 > .sx-nav-toggle-item {
    display: none;
}

.btn-primary, .bg-primary { background-color: var(--sx-accent) !important; border-color: var(--sx-accent) !important; }
.btn-primary:hover { background-color: var(--sx-accent-hover) !important; border-color: var(--sx-accent-hover) !important; }
.btn-outline-primary {
    color: var(--sx-accent) !important;
    border-color: var(--sx-accent) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    color: var(--sx-bg) !important;
    background-color: var(--sx-accent) !important;
    border-color: var(--sx-accent) !important;
}
.btn-outline-secondary {
    color: var(--sx-ink-3) !important;
    border-color: var(--sx-line-strong) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    color: var(--sx-ink) !important;
    background-color: var(--sx-panel-2) !important;
    border-color: var(--sx-line-strong) !important;
}
.form-control, .form-select, .el-input__wrapper, .el-textarea__inner { border-color: var(--sx-line-strong); border-radius: var(--sx-radius-sm); background: var(--sx-field); box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: var(--sx-accent); box-shadow: 0 0 0 3px var(--sx-ring); }
.card, .modal-content { border-color: var(--sx-line); border-radius: var(--sx-radius-lg); background: var(--sx-panel); box-shadow: none; }
.table { --bs-table-color: var(--sx-ink-2); --bs-table-bg: var(--sx-panel); --bs-table-border-color: var(--sx-line); }
.table > thead { background: var(--sx-panel-2); }

.sx-account-layout { min-height: 100dvh; background: var(--sx-panel-2); }
.sx-account-language { position: fixed; top: 20px; right: 24px; z-index: 10; }
.sx-account-shell { display: grid; min-height: 100dvh; place-items: center; padding: 72px 24px 32px; }
.sx-account-column { width: min(100%, 480px); }
.sx-account-brand { display: flex; margin-bottom: 18px; align-items: center; justify-content: center; gap: 10px; color: var(--sx-ink); font-family: var(--sx-mono); font-size: var(--sx-sm); font-weight: 600; letter-spacing: .16em; text-decoration: none; }
.sx-account-brand img { display: none; }
.sx-account-brand::before { width: 26px; height: 26px; }
.sx-account-content { padding: 28px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius-lg); background: var(--sx-panel); box-shadow: var(--sx-shadow-2); }
.sx-tenant-switch { margin-bottom: 12px; text-align: center; color: var(--sx-ink-3); font-size: var(--sx-sm); }
.sx-empty-layout { min-height: 100dvh; }
.sx-empty-content { min-height: 100dvh; }

@media (max-width: 991px) {
    .sx-app-shell { grid-template-columns: minmax(0, 1fr); }
    .sx-sidebar { position: fixed; inset: 0 auto 0 0; width: min(286px, 88vw); transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--sx-shadow-2); }
    .sx-app-shell.is-nav-open .sx-sidebar { transform: translateX(0); }
    .sx-sidebar-backdrop { position: fixed; inset: 0; z-index: 20; border: 0; background: rgba(15, 15, 22, .42); }
    .sx-app-shell.is-nav-open .sx-sidebar-backdrop { display: block; }
    .sx-nav-toggle { display: inline-grid; }
    .sx-nav-collapse { display: none; }
    .sx-topbar { padding: 0 16px; }
    .sx-theme-switch { display: none; }
}

@media (max-width: 576px) {
    .sx-topbar { height: 52px; min-height: 52px; gap: 8px; padding: 0 10px; }
    .sx-topbar-title { font-size: 1rem; }
    .sx-topbar-subtitle { display: none; }
    .sx-app-content { padding: 16px; }
    .sx-app-content--fluid { padding: 0; }
    .sx-account-content { padding: 22px 18px; }
}