/* _content/NextUI.Sites.Admin/Components/SiteMediaPickerDialog.razor.rz.scp.css */
.sites-media-picker-grid[b-3drwdh8dy5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--sx-spacing-s);
    max-height: 24rem;
    overflow-y: auto;
}

.sites-media-picker-card[b-3drwdh8dy5] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs);
    padding: var(--sx-spacing-xs);
    background: var(--sx-colorNeutralBackground2);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    cursor: pointer;
    text-align: start;
}

.sites-media-picker-card:hover[b-3drwdh8dy5] {
    border-color: var(--sx-colorBrandForeground1);
}

.sites-media-picker-card[b-3drwdh8dy5]  .sites-media-picker-thumb {
    width: 100%;
    height: 5rem;
    object-fit: cover;
    border-radius: var(--sx-borderRadiusSmall);
}

.sites-media-picker-name[b-3drwdh8dy5] {
    font-size: var(--sx-type-caption-font-size);
    color: var(--sx-colorNeutralForeground2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/NextUI.Sites.Admin/Pages/SiteAnalyticsPage.razor.rz.scp.css */
.sites-analytics-actions[b-9r0vnrjeub] {
    margin-bottom: var(--sx-spacing-layout-gap);
}

.sites-analytics-cards[b-9r0vnrjeub] {
    margin-bottom: var(--sx-spacing-section-gap);
}

.sites-analytics-card[b-9r0vnrjeub] {
    flex: 1 1 0;
    padding: var(--sx-spacing-layout-gap);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    background: var(--sx-colorNeutralBackground2);
}

.sites-analytics-tables[b-9r0vnrjeub] {
    margin-bottom: var(--sx-spacing-section-gap);
    align-items: flex-start;
}

.sites-analytics-rank[b-9r0vnrjeub] {
    flex: 1 1 0;
    min-width: 0;
}

.sites-analytics-table[b-9r0vnrjeub] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sx-fontSizeBase300);
}

.sites-analytics-table th[b-9r0vnrjeub],
.sites-analytics-table td[b-9r0vnrjeub] {
    text-align: left;
    padding: var(--sx-spacing-component-gap) var(--sx-spacing-layout-gap);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
    vertical-align: top;
}

.sites-analytics-table th[b-9r0vnrjeub] {
    color: var(--sx-colorNeutralForeground2);
    font-weight: var(--sx-fontWeightSemibold);
}

.sites-analytics-key[b-9r0vnrjeub] {
    font-family: var(--sx-fontFamilyMonospace);
    color: var(--sx-colorNeutralForeground1);
    word-break: break-all;
}

.sites-analytics-trend[b-9r0vnrjeub] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sites-analytics-bar-row[b-9r0vnrjeub] {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-component-gap);
    padding: 0.125rem 0;
}

.sites-analytics-bar-date[b-9r0vnrjeub] {
    flex: 0 0 3.5rem;
    color: var(--sx-colorNeutralForeground3);
    font-size: var(--sx-fontSizeBase200);
}

.sites-analytics-bar[b-9r0vnrjeub] {
    display: inline-block;
    height: 0.75rem;
    min-width: 0.125rem;
    border-radius: var(--sx-borderRadiusSmall);
    background: var(--sx-colorBrandBackground1);
}

.sites-analytics-bar-val[b-9r0vnrjeub] {
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
}
/* _content/NextUI.Sites.Admin/Pages/SiteBackupPage.razor.rz.scp.css */
/* Backup & Restore page uses NextUI SxCard / SxDataGrid for all layout — no custom table styles needed. */
/* _content/NextUI.Sites.Admin/Pages/SiteCollectionsPage.razor.rz.scp.css */
.sites-collections-actions[b-jxl3bsfcfj] {
    padding: var(--sx-spacing-m) var(--sx-spacing-m) 0;
}

.sites-collections-layout[b-jxl3bsfcfj] {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--sx-spacing-m);
    padding: var(--sx-spacing-m);
    align-items: start;
}

@media (max-width: 70rem) {
    .sites-collections-layout[b-jxl3bsfcfj] {
        grid-template-columns: 1fr;
    }
}

.sites-collections-main[b-jxl3bsfcfj]  .sites-editor-media-thumb {
    width: 4rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--sx-borderRadiusSmall);
    border: 1px solid var(--sx-colorNeutralStroke2);
}

.sites-collections-main[b-jxl3bsfcfj]  .sites-editor-list-item {
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    padding: var(--sx-spacing-s);
}
/* _content/NextUI.Sites.Admin/Pages/SiteEditorPage.razor.rz.scp.css */
/* The target file-browse dialog body: give the hosted SxFileManager a sensible, responsive width. */
.sites-editor-file-browser[b-l0yow96527] {
    width: min(80vw, 48rem);
    max-width: 100%;
}

/* Fill the remaining page height so the resizable splitter has a real height to divide.
   --sx-dock-collapsed-size sets the width of a collapsed column's strip (default token is 0). */
.sites-editor-layout[b-l0yow96527] {
    flex: 1 1 auto;
    min-height: 0;
    min-block-size: 30rem;
    padding: var(--sx-spacing-m);
    --sx-dock-collapsed-size: 3rem;
}

/* Embedded in the workspace: the workspace already pads the content area, so drop the editor's own
   layout padding — otherwise the two layers stack into an oversized gap above/around the columns. */
.sites-editor-layout[data-embedded][b-l0yow96527] {
    padding: 0;
}

/* Splitter divider + drag handle come from the built-in SplitterAppearance.Handle. We only tune
   visibility: no handle at rest, the grip fades in on hover of a draggable bar (the thin line stays). */
.sites-editor-layout[b-l0yow96527]  .sx-multi-splitter-handle {
    opacity: 0;
    transition: opacity var(--sx-durationFaster, 0.1s) ease;
}

.sites-editor-layout[b-l0yow96527]  .sx-multi-splitter-bar:not(.sx-is-disabled):hover .sx-multi-splitter-handle,
.sites-editor-layout[b-l0yow96527]  .sx-multi-splitter-bar.sx-is-active .sx-multi-splitter-handle {
    opacity: 1;
}

/* ── A column: pill header + independently scrolling body ─────────────────────── */
.sites-editor-col[b-l0yow96527] {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    min-height: 0;
    min-width: 0;
}

/* Capsule/pill title bar: icon at the left, bold title, round collapse button at the right. No underline. */
.sites-editor-col-head[b-l0yow96527] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    /* Uniform header height across all columns so their tops line up (content alone made them uneven). */
    min-height: var(--sx-control-height-md);
    gap: var(--sx-spacing-s);
    margin: var(--sx-spacing-xs) var(--sx-spacing-xs) var(--sx-spacing-s);
    padding: var(--sx-spacing-xs) var(--sx-spacing-xs) var(--sx-spacing-xs) var(--sx-spacing-m);
    background: var(--sx-colorNeutralBackground3);
    border-radius: var(--sx-radius-pill, 999px);
}

/* The title is an SxTypography (its own CSS scope), so pierce with ::deep from the head div —
   a bare .sites-editor-col-head-title rule would carry THIS page's scope attr and never match. */
.sites-editor-col-head[b-l0yow96527]  .sites-editor-col-head-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--sx-fontWeightBold, 700) !important;
}

.sites-editor-collapse-btn[b-l0yow96527] {
    flex: 0 0 auto;
}

.sites-editor-col-body[b-l0yow96527] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--sx-spacing-s);
}

/* ── Collapsed column: a thin vertical capsule with a round toggle at the top and a rotated title ── */
.sites-editor-strip[b-l0yow96527] {
    block-size: 100%;
    /* Narrower than the collapsed panel so the auto side margins leave a gutter — adjacent collapsed
       strips then read as separate pills instead of touching. */
    inline-size: calc(var(--sx-dock-collapsed-size) - var(--sx-spacing-s));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sx-spacing-s);
    padding-block: var(--sx-spacing-s);
    margin: var(--sx-spacing-xs) auto;
    cursor: pointer;
    color: var(--sx-colorNeutralForeground2);
    background: var(--sx-colorNeutralBackground3);
    border-radius: var(--sx-radius-pill, 999px);
    transition: background var(--sx-durationFaster, 0.1s) ease, color var(--sx-durationFaster, 0.1s) ease;
}

.sites-editor-strip:hover[b-l0yow96527] {
    color: var(--sx-colorNeutralForeground1);
    background: var(--sx-colorNeutralBackground3Hover, var(--sx-colorNeutralBackground1Hover));
}

.sites-editor-strip-title[b-l0yow96527] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-weight: var(--sx-fontWeightBold, 700);
    font-size: var(--sx-type-caption-font-size);
}

/* ── Pages list: fills the column. Two-line rows (title + URL subtitle, bigger icon) now come from
   SxNavMenu's native ItemLayout=TwoLine + per-link Subtitle — no per-page CSS hack needed. ── */
.sites-editor-pagenav[b-l0yow96527] {
    inline-size: 100%;
}

/* ── Release detail card (History view) sits flush under its row. ── */
.sites-editor-publish[b-l0yow96527]  .sites-editor-release-detail {
    inline-size: 100%;
    margin-block-end: var(--sx-spacing-s);
}

.sites-editor-publish[b-l0yow96527]  .sites-editor-release-row {
    cursor: pointer;
}

/* ── Per-release page diff (P8) ── */
.sites-editor-release-diff[b-l0yow96527] {
    inline-size: 100%;
    margin-block-start: var(--sx-spacing-s);
    border-block-start: 1px solid var(--sx-colorNeutralStroke2);
    padding-block-start: var(--sx-spacing-s);
}

.sites-editor-diff-row[b-l0yow96527] {
    inline-size: 100%;
    padding-block: var(--sx-spacing-xxs, 0.125rem);
    cursor: pointer;
}

/* Unified line diff: monospace block, per-line color (added green, removed red, context muted). */
.sites-editor-diff-pre[b-l0yow96527] {
    margin: var(--sx-spacing-xs) 0 var(--sx-spacing-s);
    padding: var(--sx-spacing-s);
    background: var(--sx-colorNeutralBackground3);
    border-radius: var(--sx-borderRadiusMedium);
    font-family: var(--sx-fontFamilyMonospace, monospace);
    font-size: var(--sx-fontSizeBase200);
    line-height: var(--sx-lineHeightBase200);
    white-space: pre-wrap;
    word-break: break-word;
    max-block-size: 24rem;
    overflow: auto;
}

/* Each diff line is its own full-width block so the git-convention tint fills the whole row (not just the text).
   The <pre> preserves leading whitespace within each line. */
.sites-editor-diff-line[b-l0yow96527] {
    display: block;
    padding-inline: var(--sx-spacing-xs);
    min-block-size: var(--sx-lineHeightBase200);
}

/* Added (+) lines: green text on a light green band, like git/GitHub. */
.sites-editor-diff-add[b-l0yow96527] {
    color: var(--sx-colorStatusSuccessForeground);
    background: var(--sx-colorStatusSuccessBackground);
}

/* Removed (-) lines: red text on a light red band. */
.sites-editor-diff-del[b-l0yow96527] {
    color: var(--sx-colorStatusDangerForeground);
    background: var(--sx-colorStatusDangerBackground);
}

/* Context lines: muted, no band. */
.sites-editor-diff-ctx[b-l0yow96527] {
    color: var(--sx-colorNeutralForeground2);
}

/* Hunk header (@@ -a,b +c,d @@): a tinted band marking each changed region (collapsed context between hunks). */
.sites-editor-diff-hunk[b-l0yow96527] {
    margin-block: var(--sx-spacing-xs);
    color: var(--sx-colorBrandForeground2, var(--sx-colorBrandForeground1));
    background: var(--sx-colorNeutralBackground4, var(--sx-colorNeutralBackground3));
    font-weight: var(--sx-fontWeightSemibold);
}

/* ── History redesign (Part 3): time-grouped list + per-page change icons + line-diff surface ──
   NOTE on selectors: these classes sit on RAW HTML elements written directly in SiteEditorPage.razor, so they
   carry this component's CSS-isolation scope attribute and must be matched with PLAIN scoped selectors. Do NOT
   prefix them with `.sites-editor-publish ::deep` — `.sites-editor-publish` is an SxStack (a child component)
   whose root does not carry the scope attribute, so that prefix never matches. Only classes on child components
   (e.g. an SxIcon's Class) need `::deep` from a raw-HTML scoped ancestor. */
/* Heading row: "History (N)" on the left, the Collapse-all / Expand-all control pinned right. */
.sites-history-head[b-l0yow96527] {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-s);
    inline-size: 100%;
}

.sites-history-group[b-l0yow96527] {
    inline-size: 100%;
    margin-block-end: var(--sx-spacing-l);
}

/* Group header ("Today" / "June 2026"): a small-caps label, a hairline rule that fills the row, and a count
   pill on the right. Doubles as a collapse toggle (whole bucket) and is sticky so the current time bucket
   stays visible while scrolling a long history. */
.sites-history-group-header[b-l0yow96527] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-s);
    padding: var(--sx-spacing-xs) 0;
    margin-block-end: var(--sx-spacing-xs);
    background: var(--sx-colorNeutralBackground1);
    cursor: pointer;
}

.sites-history-group-header:hover .sites-history-group-label[b-l0yow96527] {
    color: var(--sx-colorNeutralForeground1);
}

/* The group caret is an SxIcon (child component) → reach it via ::deep from the raw header element. */
.sites-history-group-header[b-l0yow96527]  .sites-history-group-caret {
    flex: 0 0 auto;
    color: var(--sx-colorNeutralForeground3);
}

.sites-history-group-label[b-l0yow96527] {
    font-size: var(--sx-fontSizeBase200);
    font-weight: var(--sx-fontWeightSemibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sx-colorNeutralForeground3);
    white-space: nowrap;
}

.sites-history-group-rule[b-l0yow96527] {
    flex: 1 1 auto;
    block-size: 1px;
    background: var(--sx-colorNeutralStroke2);
}

.sites-history-group-count[b-l0yow96527] {
    flex: 0 0 auto;
    min-inline-size: 1.5rem;
    padding: 0.0625rem var(--sx-spacing-xs);
    border-radius: var(--sx-borderRadiusCircular, 999px);
    background: var(--sx-colorNeutralBackground3);
    color: var(--sx-colorNeutralForeground3);
    font-size: var(--sx-fontSizeBase100);
    text-align: center;
}

/* The group's releases sit in a rounded, hairline-bordered container; rows are separated by inner dividers. */
.sites-history-group-body[b-l0yow96527] {
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    overflow: hidden;
}

.sites-history-item + .sites-history-item[b-l0yow96527] {
    border-block-start: 1px solid var(--sx-colorNeutralStroke3, var(--sx-colorNeutralStroke2));
}

.sites-history-row[b-l0yow96527] {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-s);
    padding: var(--sx-spacing-s) var(--sx-spacing-m);
    cursor: pointer;
    transition: background var(--sx-durationFaster, 100ms) ease;
}

.sites-history-row:hover[b-l0yow96527] {
    background: var(--sx-colorNeutralBackground1Hover, var(--sx-colorNeutralBackground2));
}

.sites-history-item.is-open > .sites-history-row[b-l0yow96527] {
    background: var(--sx-colorNeutralBackground2);
}

/* The caret is an SxIcon (child component) → reach it via ::deep from the raw row element. */
.sites-history-row[b-l0yow96527]  .sites-history-caret {
    flex: 0 0 auto;
    color: var(--sx-colorNeutralForeground3);
}

/* The release number as a monospace chip — the anchor of each row. */
.sites-history-rel[b-l0yow96527] {
    flex: 0 0 auto;
    min-inline-size: 2.5rem;
    padding: 0.0625rem var(--sx-spacing-xs);
    border-radius: var(--sx-borderRadiusSmall);
    background: var(--sx-colorNeutralBackground3);
    color: var(--sx-colorNeutralForeground2);
    font-family: var(--sx-fontFamilyMonospace, monospace);
    font-size: var(--sx-fontSizeBase200);
    text-align: center;
}

/* Two-line meta cell: time over author. */
.sites-history-meta[b-l0yow96527] {
    display: flex;
    flex-direction: column;
    line-height: var(--sx-lineHeightBase200);
    min-inline-size: 0;
}

.sites-history-when[b-l0yow96527] {
    font-size: var(--sx-fontSizeBase300);
    color: var(--sx-colorNeutralForeground1);
}

.sites-history-by[b-l0yow96527] {
    font-size: var(--sx-fontSizeBase100);
    color: var(--sx-colorNeutralForeground3);
}

/* The per-row ⋮ actions menu sits at the row's end; keep it from shrinking. */
.sites-history-row-menu[b-l0yow96527] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

/* Per-page change icon (SxIcon) — new=green, removed=red, modified=amber. Reached via ::deep from the raw row. */
.sites-editor-diff-row[b-l0yow96527]  .sites-editor-diff-icon--added {
    color: var(--sx-colorStatusSuccessForeground);
}

.sites-editor-diff-row[b-l0yow96527]  .sites-editor-diff-icon--removed {
    color: var(--sx-colorStatusDangerForeground);
}

.sites-editor-diff-row[b-l0yow96527]  .sites-editor-diff-icon--modified {
    color: var(--sx-colorStatusWarningForeground);
}

/* "open diff" hint icon (SxIcon) — faint by default, brightens on row hover. */
.sites-editor-diff-row[b-l0yow96527]  .sites-editor-diff-open-hint {
    color: var(--sx-colorNeutralForeground4, var(--sx-colorNeutralForeground3));
    opacity: 0.6;
}

.sites-editor-diff-row:hover[b-l0yow96527]  .sites-editor-diff-open-hint {
    opacity: 1;
    color: var(--sx-colorBrandForeground1);
}

/* The page whose line diff is currently open in the drawer/dialog. */
.sites-editor-diff-row--active[b-l0yow96527] {
    background: var(--sx-colorNeutralBackground2);
    border-radius: var(--sx-borderRadiusMedium);
}

/* In the drawer/dialog the surface scrolls, so the diff block fills it (no nested scroll cap). */
.sites-editor-line-diff-pre[b-l0yow96527] {
    max-block-size: none;
    margin: 0;
}

/* The release-detail card (an SxCard child) sits flush inside the group body — reach it via ::deep from the
   raw history-item element (CSS isolation would otherwise scope the SxCard side too and never match). */
.sites-history-item[b-l0yow96527]  .sites-editor-release-detail {
    margin-block-start: 0;
    border-radius: 0;
}

/* ── Publish workspace (right area when the Publish tab is active) ── */
.sites-editor-publish[b-l0yow96527] {
    inline-size: 100%;
}

.sites-editor-publish-when[b-l0yow96527] {
    padding: var(--sx-spacing-xs) var(--sx-spacing-s);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    background: var(--sx-colorNeutralBackground1);
    color: var(--sx-colorNeutralForeground1);
}

/* Determinate progress bar shown while a background publish job runs (P3). */
.sites-editor-publish-progress[b-l0yow96527] {
    inline-size: 100%;
    block-size: 0.375rem;
    border-radius: var(--sx-borderRadiusMedium);
    background: var(--sx-colorNeutralBackground3);
    overflow: hidden;
}

.sites-editor-publish-progress-fill[b-l0yow96527] {
    block-size: 100%;
    background: var(--sx-colorBrandBackground1);
    border-radius: var(--sx-borderRadiusMedium);
    transition: width var(--sx-durationNormal, 0.2s) ease;
}

/* Each release row spans the full width so the Current badge / Rollback button sit at the right. */
.sites-editor-publish[b-l0yow96527]  .sites-editor-release-row {
    inline-size: 100%;
    padding-block: var(--sx-spacing-xs);
    border-block-end: 1px solid var(--sx-colorNeutralStroke2);
}

/* ── Publish targets block (top of the Publish workspace): the targets list + add form ── */
.sites-editor-targets[b-l0yow96527],
.sites-editor-publish-actions[b-l0yow96527] {
    inline-size: 100%;
}

/* One target row as a card: full width, comfortable padding, subtle separation from neighbours. */
.sites-editor-publish[b-l0yow96527]  .sites-editor-target-card {
    inline-size: 100%;
}

/* The built-in "Local site" card gets a subtle tint so it reads as the always-on local destination. */
.sites-editor-publish[b-l0yow96527]  .sites-editor-local-card {
    background: var(--sx-colorNeutralBackground2);
}

/* Title bar: a single line that never wraps — checkbox, name (ellipsis), spacer, Open-site + ⋮ at the right. */
.sites-editor-target-titlebar[b-l0yow96527] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--sx-spacing-s);
    inline-size: 100%;
    min-inline-size: 0;
}

/* The target name takes the slack but truncates rather than wrapping, keeping the title on one line. */
.sites-editor-target-name[b-l0yow96527] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
}

/* The read-display properties sit just under the title; the per-target backup checkbox below them gets
   clear vertical breathing room (it used to look crammed against the content). */
.sites-editor-target-props[b-l0yow96527] {
    margin-block-start: var(--sx-spacing-xs);
}

.sites-editor-target-backup[b-l0yow96527] {
    margin-block-start: var(--sx-spacing-s);
    padding-block-start: var(--sx-spacing-s);
    border-block-start: 1px solid var(--sx-colorNeutralStroke2);
}

/* Per-target delivery results: a ✓/✗ per target after a publish-now completes. */
.sites-editor-deliver-ok[b-l0yow96527] {
    color: var(--sx-colorStatusSuccessForeground, var(--sx-colorPaletteGreenForeground1));
}

.sites-editor-deliver-fail[b-l0yow96527] {
    color: var(--sx-colorStatusDangerForeground, var(--sx-colorPaletteRedForeground1));
}

/* The collapsible "Add target" form sits in its own flat-ish card so it never dominates the list. */
.sites-editor-publish[b-l0yow96527]  .sites-editor-target-add {
    inline-size: 100%;
    background: var(--sx-colorNeutralBackground2);
}

/* ── Blocks (column 2): full-width cards, grip-only drag, collapsible ─────────── */
.sites-editor-block-drag[b-l0yow96527] {
    inline-size: 100%;
    border-radius: var(--sx-borderRadiusMedium);
    transition: outline-color var(--sx-durationFaster, 0.1s) ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.sites-editor-block-dragover[b-l0yow96527] {
    outline-color: var(--sx-colorBrandStroke1, var(--sx-colorBrandBackground1));
}

.sites-editor-block-drag[b-l0yow96527]  .sites-editor-block {
    inline-size: 100%;
}

/* Everything inside a block fills the column width — block fields, nested card frames (list-item
   cards + section children), and every field control. Anchored on .sites-editor-block-drag (this
   page's own scope) so ::deep actually pierces; a .sites-editor-block anchor carried the wrong
   scope (that class lives in SxCard's bundle) and never matched, leaving controls squished.
   Vertical stacks default to align-items:flex-start, so without an explicit width their children
   shrink and the controls' own width:100% resolves against a narrow box — force the stacks wide. */
.sites-editor-block-drag[b-l0yow96527]  .sx-stack--vertical,
.sites-editor-block-drag[b-l0yow96527]  .sx-card,
.sites-editor-block-drag[b-l0yow96527]  .sx-input-group,
.sites-editor-block-drag[b-l0yow96527]  .sx-textarea-group,
.sites-editor-block-drag[b-l0yow96527]  .sx-select-group {
    inline-size: 100%;
    min-inline-size: 0;
}

/* Section block + its nested children also fill the width (the bordered wrappers). */
.sites-editor-block-drag[b-l0yow96527]  .sites-editor-section,
.sites-editor-block-drag[b-l0yow96527]  .sites-editor-section-child {
    inline-size: 100%;
}

/* The block/section-child header is an SxStack (own scope) — pierce with ::deep so it spans the
   full row width; otherwise the flex spacer has no slack and the tools never push to the right. */
.sites-editor-col-body[b-l0yow96527]  .sites-editor-block-head {
    inline-size: 100%;
}

.sites-editor-block-spacer[b-l0yow96527] {
    flex: 1 1 auto;
}

.sites-editor-block-handle[b-l0yow96527] {
    display: inline-flex;
    align-items: center;
    cursor: grab;
    color: var(--sx-colorNeutralForeground3);
    padding-inline: var(--sx-spacing-xs);
}

.sites-editor-block-handle:active[b-l0yow96527] {
    cursor: grabbing;
}

/* Section block + its nested child blocks fill the full width. */
.sites-editor-section[b-l0yow96527],
.sites-editor-section-child[b-l0yow96527] {
    inline-size: 100%;
}

.sites-editor-section[b-l0yow96527] {
    border-inline-start: 2px solid var(--sx-colorBrandStroke1, var(--sx-colorBrandBackground1));
    padding-inline-start: var(--sx-spacing-s);
}

.sites-editor-section-child[b-l0yow96527] {
    border: 1px dashed var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    padding: var(--sx-spacing-s);
}

/* ── List bar: the "Blocks (N)" / "Cards (N)" header strip — light tinted background, label left,
   collapse-all double-arrow right-aligned. Used for both the block list and each List field. ── */
.sites-editor-col-body[b-l0yow96527]  .sites-editor-listbar {
    inline-size: 100%;
    padding: var(--sx-spacing-xs) var(--sx-spacing-s);
    background: var(--sx-colorNeutralBackground3);
    border-radius: var(--sx-borderRadiusMedium);
}

/* Clickable block/card title: flat (no button chrome), single-line, the whole thing toggles collapse. */
.sites-editor-col-body[b-l0yow96527]  .sites-editor-block-title {
    min-width: 0;
    justify-content: flex-start;
    gap: var(--sx-spacing-xs);
    padding-inline: var(--sx-spacing-xs);
}

.sites-editor-col-body[b-l0yow96527]  .sites-editor-card-title {
    flex: 0 1 auto;
}

.sites-editor-card-icon[b-l0yow96527] {
    color: var(--sx-colorNeutralForeground3);
    flex: 0 0 auto;
}

/* Card name: single line, truncates when long. */
.sites-editor-card-name[b-l0yow96527] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--sx-fontWeightMedium, 600);
}

/* ── List field ("Cards"): the list + each card fill the column width; cards reorder via drag. ── */
.sites-editor-col-body[b-l0yow96527]  .sites-editor-list {
    inline-size: 100%;
}

.sites-editor-card-drag[b-l0yow96527] {
    inline-size: 100%;
    border-radius: var(--sx-borderRadiusMedium);
    transition: outline-color var(--sx-durationFaster, 0.1s) ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.sites-editor-card-drag[b-l0yow96527]  .sites-editor-list-item {
    inline-size: 100%;
}

.sites-editor-col-body[b-l0yow96527]  .sites-editor-addcard {
    inline-size: 100%;
}

.sites-editor-list-item[b-l0yow96527] {
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    padding: var(--sx-spacing-s);
}

/* Add-block / insert-reusable row spans the full column width — the type select fills the slack and
   the adaptive buttons (right-aligned) collapse their labels to icons rather than overflowing.
   ::deep from the own-scope col-body because the row is an SxStack (its own CSS scope). */
.sites-editor-col-body[b-l0yow96527]  .sites-editor-addblock {
    inline-size: 100%;
    flex-wrap: nowrap;
    min-width: 0;
}

.sites-editor-col-body[b-l0yow96527]  .sites-editor-addblock-select {
    flex: 1 1 auto;
    min-width: 0;
}

.sites-editor-col-body[b-l0yow96527]  .sites-editor-addblock-select .sx-select-group {
    inline-size: 100%;
    min-width: 0;
}

.sites-editor-col-body[b-l0yow96527]  .sites-editor-addblock .sx-button {
    flex: 0 0 auto;
}

/* ── Preview (column 3): device/entry pickers use SxSelect AutoWidth (fit-content); cap + ellipsis ── */
.sites-editor-col-head[b-l0yow96527]  .sites-editor-preview-select {
    max-inline-size: 13rem;
}

.sites-editor-col-head[b-l0yow96527]  .sites-editor-preview-select .sx-select-value-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sites-editor-preview-body[b-l0yow96527] {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sites-editor-preview-frame[b-l0yow96527] {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    background: var(--sx-colorNeutralBackground1);
    display: block;
    flex: 1 1 auto;
}

/* Fit mode: the stage is a size container; the device scales down (never up) to fit, centred. */
.sites-editor-device-stage[b-l0yow96527] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--sx-spacing-m);
    background: var(--sx-colorNeutralBackground3);
    container-type: size;
}

.sites-editor-device[b-l0yow96527] {
    flex: 0 0 auto;
    inline-size: var(--dev-w);
    block-size: var(--dev-h);
    transform: scale(min(1, calc(100cqw / var(--dev-w)), calc(100cqh / var(--dev-h))));
    transform-origin: center center;
    overflow: hidden;
    background: var(--sx-colorNeutralBackground1);
    border: 0.5rem solid var(--sx-colorNeutralForeground1);
    box-shadow: var(--sx-shadow16, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25));
}

.sites-editor-device-frame[b-l0yow96527] {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    display: block;
    background: #fff;
}

.sites-editor-col-body[b-l0yow96527]  .sites-editor-media-thumb {
    width: 4rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--sx-borderRadiusSmall);
    border: 1px solid var(--sx-colorNeutralStroke2);
}

/* ── Version-history dialog: content fills the large dialog width ── */
.sites-editor-version-body[b-l0yow96527] {
    inline-size: 100%;
}

/* The preview card and its read-only textarea span the full dialog width. */
.sites-editor-version-body[b-l0yow96527]  .sx-card,
.sites-editor-version-body[b-l0yow96527]  .sx-textarea,
.sites-editor-version-body[b-l0yow96527]  .sx-textarea-root {
    inline-size: 100%;
}

/* ── Narrow screens: stack the three columns vertically instead of horizontal scroll ── */
@media (max-width: 60rem) {
    .sites-editor-layout[b-l0yow96527] {
        min-block-size: 0;
        overflow-y: auto;
        padding: var(--sx-spacing-s);
    }

    .sites-editor-layout[b-l0yow96527]  .sx-multi-splitter {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100%;
    }

    .sites-editor-layout[b-l0yow96527]  .sx-multi-splitter-panel {
        flex: 0 0 auto !important;
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        block-size: auto !important;
        min-block-size: 22rem;
    }

    .sites-editor-layout[b-l0yow96527]  .sx-multi-splitter-bar {
        display: none !important;
    }
}
/* _content/NextUI.Sites.Admin/Pages/SiteFormSubmissionsPage.razor.rz.scp.css */
.sites-forms-actions[b-eb8kcuzcu6] {
    margin-bottom: var(--sx-spacing-layout-gap);
}

.sites-forms-table[b-eb8kcuzcu6] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sx-fontSizeBase300);
}

.sites-forms-table th[b-eb8kcuzcu6],
.sites-forms-table td[b-eb8kcuzcu6] {
    text-align: left;
    padding: var(--sx-spacing-component-gap) var(--sx-spacing-layout-gap);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
    vertical-align: top;
}

.sites-forms-table th[b-eb8kcuzcu6] {
    color: var(--sx-colorNeutralForeground2);
    font-weight: var(--sx-fontWeightSemibold);
}

.sites-forms-table code[b-eb8kcuzcu6] {
    font-family: var(--sx-fontFamilyMonospace);
    color: var(--sx-colorNeutralForeground1);
}

.sites-forms-data[b-eb8kcuzcu6] {
    display: block;
    max-width: 32rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.sites-forms-sr[b-eb8kcuzcu6] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* _content/NextUI.Sites.Admin/Pages/SiteLicensesPage.razor.rz.scp.css */
.sites-licenses-actions[b-b1fe2bnb4q] {
    margin-bottom: var(--sx-spacing-layout-gap);
}

.sites-licenses-stats[b-b1fe2bnb4q] {
    margin-bottom: var(--sx-spacing-section-gap);
}

.sites-licenses-stat[b-b1fe2bnb4q] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs);
    min-width: 6rem;
}

.sites-licenses-form[b-b1fe2bnb4q] {
    margin-bottom: var(--sx-spacing-section-gap);
}

.sites-licenses-section-title[b-b1fe2bnb4q] {
    margin-bottom: var(--sx-spacing-component-gap);
}

.sites-licenses-table[b-b1fe2bnb4q] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sx-fontSizeBase300);
    margin-bottom: var(--sx-spacing-section-gap);
}

.sites-licenses-table th[b-b1fe2bnb4q],
.sites-licenses-table td[b-b1fe2bnb4q] {
    text-align: left;
    padding: var(--sx-spacing-component-gap) var(--sx-spacing-layout-gap);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
    vertical-align: top;
}

.sites-licenses-table th[b-b1fe2bnb4q] {
    color: var(--sx-colorNeutralForeground2);
    font-weight: var(--sx-fontWeightSemibold);
}

.sites-licenses-table code[b-b1fe2bnb4q] {
    font-family: var(--sx-fontFamilyMonospace);
    color: var(--sx-colorNeutralForeground1);
}

.sites-licenses-sr[b-b1fe2bnb4q] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* _content/NextUI.Sites.Admin/Pages/SiteMediaPage.razor.rz.scp.css */
.sites-media-actions[b-g6e7gy4ec1] {
    padding: var(--sx-spacing-m) var(--sx-spacing-m) 0;
}

.sites-media-layout[b-g6e7gy4ec1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--sx-spacing-m);
    padding: var(--sx-spacing-m);
    align-items: start;
}

.sites-media-grid[b-g6e7gy4ec1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--sx-spacing-m);
}

.sites-media-card[b-g6e7gy4ec1] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs);
    padding: var(--sx-spacing-s);
    background: var(--sx-colorNeutralBackground2);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    cursor: pointer;
    text-align: start;
}

.sites-media-card-selected[b-g6e7gy4ec1] {
    border-color: var(--sx-colorBrandForeground1);
    outline: 1px solid var(--sx-colorBrandForeground1);
}

.sites-media-card[b-g6e7gy4ec1]  .sites-media-thumb {
    width: 100%;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--sx-borderRadiusSmall);
}

.sites-media-name[b-g6e7gy4ec1] {
    font-size: var(--sx-type-caption-font-size);
    color: var(--sx-colorNeutralForeground2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sites-media-details[b-g6e7gy4ec1]  .sites-media-preview {
    width: 100%;
    max-height: 14rem;
    object-fit: contain;
    border-radius: var(--sx-borderRadiusMedium);
}

@media (max-width: 70rem) {
    .sites-media-layout[b-g6e7gy4ec1] {
        grid-template-columns: 1fr;
    }
}
/* _content/NextUI.Sites.Admin/Pages/SiteNavigationPage.razor.rz.scp.css */
.sites-nav-actions[b-9wmqbhymzs] {
    margin-bottom: var(--sx-spacing-layout-gap);
}

.sites-nav-row[b-9wmqbhymzs],
.sites-footer-col[b-9wmqbhymzs] {
    margin-bottom: var(--sx-spacing-component-gap);
}

.sites-nav-child[b-9wmqbhymzs] {
    margin-top: var(--sx-spacing-component-gap);
    padding-left: var(--sx-spacing-section-gap);
}

.sites-nav-social-head[b-9wmqbhymzs] {
    margin-top: var(--sx-spacing-layout-gap);
}
/* _content/NextUI.Sites.Admin/Pages/SiteOrdersPage.razor.rz.scp.css */
.sites-orders-actions[b-abreky3k2c] {
    margin-bottom: var(--sx-spacing-layout-gap);
}

.sites-orders-table[b-abreky3k2c] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sx-fontSizeBase300);
}

.sites-orders-table th[b-abreky3k2c],
.sites-orders-table td[b-abreky3k2c] {
    text-align: left;
    padding: var(--sx-spacing-component-gap) var(--sx-spacing-layout-gap);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
    vertical-align: top;
}

.sites-orders-table th[b-abreky3k2c] {
    color: var(--sx-colorNeutralForeground2);
    font-weight: var(--sx-fontWeightSemibold);
}

.sites-orders-table code[b-abreky3k2c] {
    font-family: var(--sx-fontFamilyMonospace);
    color: var(--sx-colorNeutralForeground1);
}

.sites-orders-email[b-abreky3k2c] {
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
}

.sites-orders-sr[b-abreky3k2c] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* _content/NextUI.Sites.Admin/Pages/SiteRedirectsPage.razor.rz.scp.css */
.sites-redirects-actions[b-69or42jwr2] {
    margin-bottom: var(--sx-spacing-layout-gap);
}

.sites-redirects-form[b-69or42jwr2] {
    margin-bottom: var(--sx-spacing-section-gap);
}

.sites-redirects-table[b-69or42jwr2] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sx-fontSizeBase300);
}

.sites-redirects-table th[b-69or42jwr2],
.sites-redirects-table td[b-69or42jwr2] {
    text-align: left;
    padding: var(--sx-spacing-component-gap) var(--sx-spacing-layout-gap);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
    vertical-align: middle;
}

.sites-redirects-table th[b-69or42jwr2] {
    color: var(--sx-colorNeutralForeground2);
    font-weight: var(--sx-fontWeightSemibold);
}

.sites-redirects-table code[b-69or42jwr2] {
    font-family: var(--sx-fontFamilyMonospace);
    color: var(--sx-colorNeutralForeground1);
}

.sites-redirects-sr[b-69or42jwr2] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* _content/NextUI.Sites.Admin/Pages/SiteWorkspacePage.razor.rz.scp.css */
/* Fill the remaining page height so the resizable splitter has a real height to divide.
   --sx-dock-collapsed-size sets the width of the collapsed rail strip. */
.sites-workspace-layout[b-ioal6vzr6p] {
    flex: 1 1 auto;
    min-height: 0;
    min-block-size: 30rem;
    padding: var(--sx-spacing-s);
    --sx-dock-collapsed-size: 3rem;
}

/* Splitter divider + drag handle: hidden at rest, grip fades in on hover (matches the editor). */
.sites-workspace-layout[b-ioal6vzr6p]  .sx-multi-splitter-handle {
    opacity: 0;
    transition: opacity var(--sx-durationFaster, 0.1s) ease;
}

.sites-workspace-layout[b-ioal6vzr6p]  .sx-multi-splitter-bar:not(.sx-is-disabled):hover .sx-multi-splitter-handle,
.sites-workspace-layout[b-ioal6vzr6p]  .sx-multi-splitter-bar.sx-is-active .sx-multi-splitter-handle {
    opacity: 1;
}

/* ── Catalog rail (master): capsule header + independently scrolling body ─────── */
.sites-workspace-rail[b-ioal6vzr6p] {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    min-height: 0;
    min-width: 0;
}

/* Capsule/pill column header: collapse button at the left, bold title. Shared visual language
   with the editor's column heads. */
.sites-workspace-col-head[b-ioal6vzr6p] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--sx-control-height-md);
    gap: var(--sx-spacing-s);
    margin: var(--sx-spacing-xs) var(--sx-spacing-xs) var(--sx-spacing-s);
    padding: var(--sx-spacing-xs) var(--sx-spacing-xs) var(--sx-spacing-xs) var(--sx-spacing-m);
    background: var(--sx-colorNeutralBackground3);
    border-radius: var(--sx-radius-pill, 999px);
}

.sites-workspace-col-head[b-ioal6vzr6p]  .sites-workspace-col-head-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--sx-fontWeightBold, 700) !important;
}

.sites-workspace-collapse-btn[b-ioal6vzr6p] {
    flex: 0 0 auto;
}

/* Per-feature capsule column header for single-view features (stays pinned while the body scrolls). */
.sites-workspace-feature-head[b-ioal6vzr6p] {
    position: sticky;
    top: 0;
    z-index: 1;
    flex: 0 0 auto;
    margin: var(--sx-spacing-xs) var(--sx-spacing-m) var(--sx-spacing-s);
}

.sites-workspace-rail-body[b-ioal6vzr6p] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    padding: var(--sx-spacing-xs) var(--sx-spacing-s) var(--sx-spacing-s);
}

.sites-workspace-rail-group[b-ioal6vzr6p] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs);
}

/* Static section caption above each group (SxTypography has its own scope → pierce with ::deep). */
.sites-workspace-rail-group[b-ioal6vzr6p]  .sites-workspace-rail-group-title {
    padding: 0 var(--sx-spacing-s);
    color: var(--sx-colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Collapsed rail strip: a thin vertical column of icon buttons, groups split by dividers ──── */
.sites-workspace-strip[b-ioal6vzr6p] {
    block-size: 100%;
    inline-size: var(--sx-dock-collapsed-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sx-spacing-xs);
    padding: var(--sx-spacing-xs) 0;
    overflow: auto;
}

.sites-workspace-strip-expand[b-ioal6vzr6p] {
    flex: 0 0 auto;
    margin-bottom: var(--sx-spacing-xs);
}

.sites-workspace-strip-btn[b-ioal6vzr6p] {
    flex: 0 0 auto;
}

.sites-workspace-strip-divider[b-ioal6vzr6p] {
    flex: 0 0 auto;
    inline-size: 55%;
    block-size: 1px;
    background: var(--sx-colorNeutralStroke2, rgba(0, 0, 0, 0.1));
    margin: var(--sx-spacing-xs) 0;
}

/* ── Feature host (detail): fills the panel, scrolls independently ────────────── */
.sites-workspace-detail[b-ioal6vzr6p] {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    min-height: 0;
    min-width: 0;
    overflow: auto;
}

/* Placeholder — centered icon + label for any feature not yet wired. */
.sites-workspace-placeholder[b-ioal6vzr6p] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sx-spacing-s);
    color: var(--sx-colorNeutralForeground3);
}
/* _content/NextUI.Sites.Admin/Pages/XilisoftBridgePage.razor.rz.scp.css */
.xilisoft-bridge-actions[b-a6bgrlxrwe] {
    margin-bottom: var(--sx-spacing-component-gap);
}

.xilisoft-bridge-kpis[b-a6bgrlxrwe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bridge-kpi[b-a6bgrlxrwe] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon value"
        "label label";
    align-items: center;
    gap: var(--sx-spacing-xs) var(--sx-spacing-s);
    min-height: 6rem;
    padding: var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bridge-kpi .sx-icon[b-a6bgrlxrwe] {
    grid-area: icon;
    color: var(--sx-colorBrandForeground1);
}

.xilisoft-bridge-kpi-value[b-a6bgrlxrwe] {
    grid-area: value;
    font-size: var(--sx-fontSizeHero700);
    line-height: 1;
    font-weight: var(--sx-fontWeightSemibold);
    color: var(--sx-colorNeutralForeground1);
}

.xilisoft-bridge-kpi .sx-typography[b-a6bgrlxrwe] {
    grid-area: label;
    color: var(--sx-colorNeutralForeground3);
}

.xilisoft-bridge-band[b-a6bgrlxrwe] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bridge-band-header[b-a6bgrlxrwe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sx-spacing-m);
    flex-wrap: wrap;
}

.xilisoft-bridge-status-grid[b-a6bgrlxrwe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bridge-status-item[b-a6bgrlxrwe] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs);
    min-width: 0;
}

.xilisoft-bridge-status-item span[b-a6bgrlxrwe] {
    color: var(--sx-colorNeutralForeground1);
    overflow-wrap: anywhere;
}

.xilisoft-bridge-domain-grid[b-a6bgrlxrwe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bridge-domain[b-a6bgrlxrwe],
.xilisoft-bridge-task[b-a6bgrlxrwe] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    min-width: 0;
    padding: var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusMedium);
    background: var(--sx-colorNeutralBackground2);
}

.xilisoft-bridge-domain-title[b-a6bgrlxrwe],
.xilisoft-bridge-task-head[b-a6bgrlxrwe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sx-spacing-s);
    flex-wrap: wrap;
}

.xilisoft-bridge-domain p[b-a6bgrlxrwe],
.xilisoft-bridge-task p[b-a6bgrlxrwe] {
    margin: 0;
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bridge-domain dl[b-a6bgrlxrwe] {
    display: grid;
    gap: var(--sx-spacing-s);
    margin: 0;
}

.xilisoft-bridge-domain dt[b-a6bgrlxrwe] {
    color: var(--sx-colorNeutralForeground3);
    font-size: var(--sx-fontSizeBase200);
}

.xilisoft-bridge-domain dd[b-a6bgrlxrwe] {
    margin: 0;
    color: var(--sx-colorNeutralForeground1);
}

.xilisoft-bridge-filter-row[b-a6bgrlxrwe] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sx-spacing-s);
}

.xilisoft-bridge-table-wrap[b-a6bgrlxrwe] {
    width: 100%;
    overflow-x: auto;
}

.xilisoft-bridge-table[b-a6bgrlxrwe] {
    width: 100%;
    min-width: 58rem;
    border-collapse: collapse;
    font-size: var(--sx-fontSizeBase300);
}

.xilisoft-bridge-table-compact[b-a6bgrlxrwe] {
    min-width: 42rem;
}

.xilisoft-bridge-sql-table[b-a6bgrlxrwe] {
    min-width: 72rem;
}

.xilisoft-bridge-contract-table[b-a6bgrlxrwe] {
    min-width: 92rem;
}

.xilisoft-bridge-table th[b-a6bgrlxrwe],
.xilisoft-bridge-table td[b-a6bgrlxrwe] {
    text-align: left;
    vertical-align: top;
    padding: var(--sx-spacing-s) var(--sx-spacing-m);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bridge-table th[b-a6bgrlxrwe] {
    color: var(--sx-colorNeutralForeground2);
    font-weight: var(--sx-fontWeightSemibold);
    white-space: nowrap;
}

.xilisoft-bridge-table td[b-a6bgrlxrwe] {
    color: var(--sx-colorNeutralForeground1);
}

.xilisoft-bridge-table code[b-a6bgrlxrwe] {
    font-family: var(--sx-fontFamilyMonospace);
    color: var(--sx-colorNeutralForeground1);
    overflow-wrap: anywhere;
}

.xilisoft-bridge-table td span[b-a6bgrlxrwe] {
    color: var(--sx-colorNeutralForeground3);
    font-size: var(--sx-fontSizeBase200);
}

.xilisoft-bridge-warning-list[b-a6bgrlxrwe] {
    display: grid;
    gap: var(--sx-spacing-s);
}

.xilisoft-bridge-task-grid[b-a6bgrlxrwe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bridge-task span[b-a6bgrlxrwe] {
    color: var(--sx-colorNeutralForeground3);
    font-size: var(--sx-fontSizeBase200);
}

@media (max-width: 720px) {
    .xilisoft-bridge-band[b-a6bgrlxrwe] {
        padding: var(--sx-spacing-m);
    }

    .xilisoft-bridge-kpi-value[b-a6bgrlxrwe] {
        font-size: var(--sx-fontSizeHero600);
    }
}
/* _content/NextUI.Sites.Admin/Pages/XilisoftBssPage.razor.rz.scp.css */
.xilisoft-bss-actions[b-svk1zof3hv] {
    margin-bottom: var(--sx-spacing-s);
}

.xilisoft-bss-legacy-shell[b-svk1zof3hv] {
    display: block;
    min-width: 0;
    min-height: calc(100vh - 12rem);
}

.xilisoft-bss-legacy-content[b-svk1zof3hv] {
    min-width: 0;
    min-height: 0;
    padding: var(--sx-spacing-m);
    overflow: auto;
}

.xilisoft-bss-legacy-page[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    min-width: 0;
}

.xilisoft-bss-legacy-title-row[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-legacy-title[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-order-count-summary[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    white-space: nowrap;
}

.xilisoft-bss-title-actions[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-live-refresh[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xs);
    min-width: 0;
    padding-bottom: var(--sx-spacing-xs);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
}

.xilisoft-bss-live-refresh-dot[b-svk1zof3hv] {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--sx-colorStatusWarning);
}

.xilisoft-bss-live-refresh-dot.is-connected[b-svk1zof3hv] {
    background: var(--sx-colorStatusSuccess);
}

.xilisoft-bss-live-refresh-dot.is-disconnected[b-svk1zof3hv] {
    background: var(--sx-colorStatusDanger);
}

.xilisoft-bss-live-refresh span[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-live-refresh-error[b-svk1zof3hv] {
    color: var(--sx-colorStatusDanger);
}

.xilisoft-bss-filter-disclosure[b-svk1zof3hv] {
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-filter-summary[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
    min-height: 3rem;
    padding: 0 var(--sx-spacing-l);
    cursor: pointer;
    color: var(--sx-colorNeutralForeground1);
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-filter-summary span[b-svk1zof3hv] {
    display: inline-flex;
    align-items: center;
    gap: var(--sx-spacing-xs);
    min-width: 0;
}

.xilisoft-bss-filter-summary small[b-svk1zof3hv] {
    min-width: 0;
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    font-weight: var(--sx-fontWeightRegular);
    overflow-wrap: anywhere;
    text-align: right;
}

.xilisoft-bss-filter-disclosure[open] .xilisoft-bss-filter-summary[b-svk1zof3hv] {
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-legacy-filter-card[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    align-items: end;
    gap: var(--sx-spacing-s);
    padding: var(--sx-spacing-l);
}

.xilisoft-bss-legacy-actions[b-svk1zof3hv] {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xs);
    grid-column: 1 / -1;
}

.xilisoft-bss-legacy-file-button[b-svk1zof3hv] {
    border-color: var(--sx-colorBrandStroke1);
    color: var(--sx-colorBrandForeground1);
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-legacy-loading[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-s);
    min-height: 3rem;
    color: var(--sx-colorNeutralForeground1);
}

.xilisoft-bss-legacy-empty[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-legacy-empty-state[b-svk1zof3hv] {
    min-height: clamp(24rem, 66vh, 36rem);
}

.xilisoft-bss-legacy-table-wrap[b-svk1zof3hv] {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-legacy-table[b-svk1zof3hv] {
    width: 100%;
    min-width: 52rem;
}

.xilisoft-bss-dashboard-stats[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--sx-spacing-l) var(--sx-spacing-xl);
}

.xilisoft-bss-dashboard-stat[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: var(--sx-spacing-s);
    min-height: 4.75rem;
}

.xilisoft-bss-dashboard-stat strong[b-svk1zof3hv] {
    display: block;
    margin-top: var(--sx-spacing-xxs);
    font-size: var(--sx-fontSizeBase400);
    line-height: 1.1;
}

.xilisoft-bss-dashboard-section[b-svk1zof3hv] {
    display: grid;
    gap: var(--sx-spacing-m);
    margin-top: var(--sx-spacing-xl);
}

.xilisoft-bss-dashboard-actions[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sx-spacing-s);
    margin-top: var(--sx-spacing-l);
}

.xilisoft-bss-order-detail-summary[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sx-spacing-l);
}

.xilisoft-bss-order-detail-section[b-svk1zof3hv] {
    min-width: 0;
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-order-detail-block[b-svk1zof3hv] {
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-order-detail-fields[b-svk1zof3hv],
.xilisoft-bss-email-detail-fields[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--sx-spacing-xs) var(--sx-spacing-m);
    margin: var(--sx-spacing-s) 0 0;
}

.xilisoft-bss-order-detail-fields dt[b-svk1zof3hv],
.xilisoft-bss-email-detail-fields dt[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
}

.xilisoft-bss-order-detail-fields dd[b-svk1zof3hv],
.xilisoft-bss-email-detail-fields dd[b-svk1zof3hv] {
    min-width: 0;
    margin: 0;
    color: var(--sx-colorNeutralForeground1);
    overflow-wrap: anywhere;
}

.xilisoft-bss-order-detail-money[b-svk1zof3hv] {
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-order-detail-profit[b-svk1zof3hv] {
    color: var(--sx-colorStatusSuccessForeground1, var(--sx-colorBrandForeground1));
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-email-detail-header[b-svk1zof3hv] {
    display: grid;
    gap: var(--sx-spacing-m);
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-email-detail-subject-row[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
    min-width: 0;
}

.xilisoft-bss-email-detail-subject-row > *:first-child[b-svk1zof3hv] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.xilisoft-bss-email-detail-badges[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xs);
}

.xilisoft-bss-email-detail-content[b-svk1zof3hv] {
    display: grid;
    gap: var(--sx-spacing-s);
    margin-top: var(--sx-spacing-xl);
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-email-detail-section-title[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-email-detail-body[b-svk1zof3hv] {
    max-height: 28rem;
    overflow: auto;
    margin: 0;
    padding: var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
    color: var(--sx-colorNeutralForeground1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.xilisoft-bss-email-detail-aux .xilisoft-bss-detail-panel[b-svk1zof3hv] {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.xilisoft-bss-link-button[b-svk1zof3hv] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sx-colorBrandForeground1);
    font: inherit;
    font-weight: var(--sx-fontWeightSemibold);
    text-align: left;
    cursor: pointer;
}

.xilisoft-bss-link-button:disabled[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForegroundDisabled);
    cursor: not-allowed;
}

.xilisoft-bss-legacy-secondary[b-svk1zof3hv] {
    margin-top: var(--sx-spacing-xl);
    padding-top: var(--sx-spacing-l);
    border-top: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-migration-details[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-migration-summary[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
    cursor: pointer;
}

.xilisoft-bss-migration-summary[b-svk1zof3hv]::-webkit-details-marker {
    display: none;
}

.xilisoft-bss-migration-details-body[b-svk1zof3hv] {
    margin-top: var(--sx-spacing-m);
}

.xilisoft-bss-summary-meta[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground3);
    font-size: var(--sx-fontSizeBase200);
    font-weight: var(--sx-fontWeightRegular);
    text-align: right;
}

.xilisoft-bss-orders-advanced-body[b-svk1zof3hv],
.xilisoft-bss-advanced-panel[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    min-width: 0;
}

.xilisoft-bss-product-search-card[b-svk1zof3hv] {
    max-width: 40rem;
}

.xilisoft-bss-user-search-card[b-svk1zof3hv] {
    max-width: 41rem;
}

.xilisoft-bss-audit-filter-card[b-svk1zof3hv] {
    max-width: 45rem;
}

.xilisoft-bss-sales-filter-card[b-svk1zof3hv] {
    max-width: 48rem;
}

.xilisoft-bss-olap-filter-card[b-svk1zof3hv] {
    max-width: 36rem;
}

.xilisoft-bss-olap-comparison-card[b-svk1zof3hv] {
    max-width: 24rem;
}

.xilisoft-bss-service-monitor-filter-card[b-svk1zof3hv] {
    max-width: 52rem;
}

.xilisoft-bss-sales-mode-actions[b-svk1zof3hv] {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xs);
    min-width: 0;
}

.xilisoft-bss-olap-tab-actions[b-svk1zof3hv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xs);
}

.xilisoft-bss-sales-summary[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-olap-summary[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-olap-comparison-summary[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-legacy-section[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-sales-summary-card[b-svk1zof3hv],
.xilisoft-bss-olap-summary-card[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sx-spacing-xxs);
    min-height: 5.5rem;
    padding: var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-sales-summary-card strong[b-svk1zof3hv],
.xilisoft-bss-olap-summary-card strong[b-svk1zof3hv] {
    font-size: var(--sx-fontSizeHero700);
    line-height: var(--sx-lineHeightHero700);
    font-weight: var(--sx-fontWeightSemibold);
    color: var(--sx-colorNeutralForeground1);
    overflow-wrap: anywhere;
}

.xilisoft-bss-sales-summary-card span[b-svk1zof3hv],
.xilisoft-bss-olap-summary-card span[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    text-align: center;
}

.xilisoft-bss-olap-comparison-cardlet[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    min-width: 0;
    padding: var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-olap-comparison-values[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-olap-comparison-values span[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: var(--sx-spacing-xxs);
}

.xilisoft-bss-olap-comparison-values strong[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground1);
    font-size: var(--sx-fontSizeHero700);
    line-height: var(--sx-lineHeightHero700);
    overflow-wrap: anywhere;
}

.xilisoft-bss-olap-comparison-values small[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-sales-trend-card[b-svk1zof3hv],
.xilisoft-bss-olap-chart-card[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-product-advanced-filter-card[b-svk1zof3hv] {
    margin-bottom: var(--sx-spacing-m);
}

.xilisoft-bss-user-advanced-filter-card[b-svk1zof3hv] {
    margin-bottom: var(--sx-spacing-m);
}

.xilisoft-bss-user-settings-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--sx-spacing-m);
    align-items: start;
}

.xilisoft-bss-legacy-user-settings .xilisoft-bss-legacy-title-row[b-svk1zof3hv] {
    align-items: flex-start;
    flex-wrap: wrap;
}

.xilisoft-bss-user-settings-card[b-svk1zof3hv] {
    display: grid;
    gap: var(--sx-spacing-m);
    min-width: 0;
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-user-settings-card[aria-label="Change Password"][b-svk1zof3hv] {
    grid-row: span 2;
}

.xilisoft-bss-user-settings-card-head[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    gap: var(--sx-spacing-m);
    min-width: 0;
}

.xilisoft-bss-user-settings-card-head > div[b-svk1zof3hv] {
    min-width: 0;
}

.xilisoft-bss-user-settings-card-head .sx-icon[b-svk1zof3hv] {
    flex: 0 0 auto;
    font-size: var(--sx-fontSizeBase600);
    color: var(--sx-colorBrandForeground1);
}

.xilisoft-bss-user-settings-fields[b-svk1zof3hv],
.xilisoft-bss-user-settings-password-grid[b-svk1zof3hv] {
    display: grid;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-user-settings-input[b-svk1zof3hv] {
    width: 100%;
    min-width: 0;
    padding: var(--sx-spacing-s) var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke1);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
    color: var(--sx-colorNeutralForeground2);
    font: inherit;
}

.xilisoft-bss-diagnostics-section[b-svk1zof3hv] {
    display: grid;
    gap: var(--sx-spacing-m);
    min-width: 0;
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-diagnostics-section-head[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-diagnostics-section-head > div[b-svk1zof3hv] {
    min-width: 0;
}

.xilisoft-bss-diagnostics-section-head .sx-icon[b-svk1zof3hv] {
    flex: 0 0 auto;
    color: var(--sx-colorBrandForeground1);
    font-size: var(--sx-fontSizeBase500);
}

.xilisoft-bss-diagnostics-health-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-diagnostics-health-card[b-svk1zof3hv] {
    display: grid;
    justify-items: center;
    gap: var(--sx-spacing-xs);
    min-width: 0;
    padding: var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
    text-align: center;
}

.xilisoft-bss-diagnostics-health-card .sx-icon[b-svk1zof3hv] {
    color: var(--sx-colorBrandForeground1);
    font-size: var(--sx-fontSizeBase600);
}

.xilisoft-bss-diagnostics-health-card span[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    overflow-wrap: anywhere;
}

.xilisoft-bss-diagnostics-info-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-diagnostics-api-list[b-svk1zof3hv] {
    display: grid;
    gap: var(--sx-spacing-xs);
}

.xilisoft-bss-diagnostics-api-item[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: auto minmax(13rem, .6fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--sx-spacing-s);
    min-width: 0;
    padding: var(--sx-spacing-s) var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
}

.xilisoft-bss-diagnostics-api-item code[b-svk1zof3hv],
.xilisoft-bss-diagnostics-api-item span[b-svk1zof3hv] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.xilisoft-bss-diagnostics-api-item code[b-svk1zof3hv] {
    color: var(--sx-colorBrandForeground1);
}

.xilisoft-bss-role-top-actions[b-svk1zof3hv] {
    justify-content: flex-start;
    grid-column: auto;
}

.xilisoft-bss-role-filter-card[b-svk1zof3hv] {
    grid-template-columns: minmax(12rem, 1.25fr) minmax(9rem, .5fr) auto;
}

.xilisoft-bss-role-name-cell[b-svk1zof3hv],
.xilisoft-bss-role-row-actions[b-svk1zof3hv],
.xilisoft-bss-role-permissions[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xxs);
    min-width: 0;
}

.xilisoft-bss-role-name-cell > span[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-role-mutation-card[b-svk1zof3hv],
.xilisoft-bss-audit-advanced-filter-card[b-svk1zof3hv] {
    margin-bottom: var(--sx-spacing-m);
}

.xilisoft-bss-role-permission-review[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-role-review-summary[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: minmax(9rem, .8fr) minmax(7rem, .4fr) minmax(8rem, .4fr) minmax(14rem, 1.2fr);
    gap: var(--sx-spacing-s);
    align-items: start;
}

.xilisoft-bss-role-review-summary > div[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    min-width: 0;
}

.xilisoft-bss-role-review-summary small[b-svk1zof3hv],
.xilisoft-bss-role-permission-grid-row small[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-role-review-summary strong[b-svk1zof3hv],
.xilisoft-bss-role-review-summary span[b-svk1zof3hv],
.xilisoft-bss-role-review-summary code[b-svk1zof3hv] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.xilisoft-bss-role-permission-grid[b-svk1zof3hv] {
    display: grid;
    gap: var(--sx-spacing-xxs);
}

.xilisoft-bss-role-permission-grid-row[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: minmax(10rem, .8fr) minmax(7rem, .4fr) minmax(8rem, .45fr) minmax(16rem, 1.1fr) minmax(16rem, 1.2fr);
    gap: var(--sx-spacing-s);
    align-items: start;
    padding: var(--sx-spacing-s);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-role-permission-grid-row > span[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    min-width: 0;
    overflow-wrap: anywhere;
}

.xilisoft-bss-role-permission-grid-head[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    font-weight: var(--sx-fontWeightSemibold);
    border-bottom-color: var(--sx-colorNeutralStroke1);
}

.xilisoft-bss-email-filter-card[b-svk1zof3hv] {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.xilisoft-bss-email-status-filter[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    min-width: 0;
}

.xilisoft-bss-filter-label[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-email-status-actions[b-svk1zof3hv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xxs);
}

.xilisoft-bss-email-advanced-filter-card[b-svk1zof3hv] {
    margin-bottom: var(--sx-spacing-m);
}

.xilisoft-bss-kpis[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-kpi[b-svk1zof3hv],
.xilisoft-bss-band[b-svk1zof3hv],
.xilisoft-bss-feature[b-svk1zof3hv] {
    border: 1px solid var(--sx-colorNeutralStroke2);
    background: var(--sx-colorNeutralBackground1);
    border-radius: var(--sx-radius-md);
}

.xilisoft-bss-kpi[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--sx-spacing-xs) var(--sx-spacing-s);
    min-height: 5.25rem;
    padding: var(--sx-spacing-m);
}

.xilisoft-bss-kpi strong[b-svk1zof3hv] {
    font-size: var(--sx-fontSizeBase500);
    line-height: 1;
}

.xilisoft-bss-kpi span[b-svk1zof3hv] {
    grid-column: 1 / -1;
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
}

.xilisoft-bss-band[b-svk1zof3hv] {
    padding: var(--sx-spacing-l);
}

.xilisoft-bss-band-header[b-svk1zof3hv],
.xilisoft-bss-feature-head[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
    margin-bottom: var(--sx-spacing-m);
}

.xilisoft-bss-header-actions[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xs);
}

.xilisoft-bss-badge-row[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xs);
}

.xilisoft-bss-status-grid[b-svk1zof3hv],
.xilisoft-bss-card-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-chart-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--sx-spacing-m);
    align-items: stretch;
}

.xilisoft-bss-chart[b-svk1zof3hv] {
    min-height: 18rem;
}

.xilisoft-bss-status-item[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    min-width: 0;
}

.xilisoft-bss-status-item span[b-svk1zof3hv],
.xilisoft-bss-feature span[b-svk1zof3hv],
.xilisoft-bss-feature small[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-acceptance-overview[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    margin-bottom: var(--sx-spacing-l);
    padding-bottom: var(--sx-spacing-l);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-acceptance-overview-main[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-acceptance-overview-metrics[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-human-review-brief[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    margin-bottom: var(--sx-spacing-l);
    padding-bottom: var(--sx-spacing-l);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-human-review-list[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-human-review-row[b-svk1zof3hv] {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--sx-spacing-xs);
    min-width: 0;
    padding: var(--sx-spacing-s);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-human-review-row > div[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    min-width: 0;
}

.xilisoft-bss-human-review-row strong[b-svk1zof3hv],
.xilisoft-bss-human-review-row small[b-svk1zof3hv],
.xilisoft-bss-human-review-row p[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-human-review-row p[b-svk1zof3hv] {
    margin: 0;
}

.xilisoft-bss-human-review-row small[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-business-overview[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    margin-bottom: var(--sx-spacing-l);
    padding-bottom: var(--sx-spacing-l);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-legacy-visual-review[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    margin-bottom: var(--sx-spacing-l);
    padding-bottom: var(--sx-spacing-l);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-visual-gallery[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-visual-card[b-svk1zof3hv] {
    display: grid;
    gap: var(--sx-spacing-m);
    min-width: 0;
    padding: var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-visual-card.is-blocked[b-svk1zof3hv] {
    border-color: var(--sx-colorStatusWarningBorder1, var(--sx-colorNeutralStroke2));
}

.xilisoft-bss-visual-card-head[b-svk1zof3hv],
.xilisoft-bss-visual-card-foot[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
    min-width: 0;
}

.xilisoft-bss-visual-card-head > div:first-child[b-svk1zof3hv],
.xilisoft-bss-visual-card-foot > span[b-svk1zof3hv],
.xilisoft-bss-visual-card-foot > strong[b-svk1zof3hv] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.xilisoft-bss-visual-card-head small[b-svk1zof3hv],
.xilisoft-bss-visual-card-foot span[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-visual-review-result[b-svk1zof3hv] {
    margin: 0;
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    line-height: var(--sx-lineHeightBase200);
    overflow-wrap: anywhere;
}

.xilisoft-bss-visual-checklist[b-svk1zof3hv] {
    display: grid;
    gap: var(--sx-spacing-xxs);
    margin: 0;
    padding-inline-start: var(--sx-spacing-l);
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    line-height: var(--sx-lineHeightBase200);
}

.xilisoft-bss-visual-checklist li[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-visual-checklist.is-table[b-svk1zof3hv] {
    min-width: min(24rem, 100%);
}

.xilisoft-bss-visual-card-foot strong[b-svk1zof3hv] {
    font-weight: var(--sx-fontWeightSemibold);
    color: var(--sx-colorNeutralForeground1);
}

.xilisoft-bss-route-link[b-svk1zof3hv] {
    color: var(--sx-colorBrandForeground1);
    font-weight: var(--sx-fontWeightSemibold);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.xilisoft-bss-route-link:hover[b-svk1zof3hv],
.xilisoft-bss-route-link:focus-visible[b-svk1zof3hv] {
    text-decoration: underline;
}

.xilisoft-bss-visual-pair[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sx-spacing-m);
    min-width: 0;
}

.xilisoft-bss-visual-pair figure[b-svk1zof3hv] {
    display: grid;
    grid-template-rows: auto auto minmax(2.5rem, auto);
    gap: var(--sx-spacing-xs);
    min-width: 0;
    margin: 0;
}

.xilisoft-bss-visual-pair figcaption[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-visual-pair a[b-svk1zof3hv] {
    display: block;
    min-width: 0;
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
    overflow: hidden;
}

.xilisoft-bss-visual-pair img[b-svk1zof3hv] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
}

.xilisoft-bss-visual-pair small[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    overflow-wrap: anywhere;
}

.xilisoft-bss-visual-placeholder[b-svk1zof3hv] {
    display: grid;
    place-items: center;
    min-height: 12rem;
    padding: var(--sx-spacing-m);
    border: 1px dashed var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
    color: var(--sx-colorNeutralForeground2);
    text-align: center;
}

.xilisoft-bss-business-list[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-business-row[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    min-width: 0;
    padding-block: var(--sx-spacing-s);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-business-row:first-child[b-svk1zof3hv] {
    padding-top: 0;
}

.xilisoft-bss-business-row-head[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-business-row-head > div:first-child[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    min-width: 0;
}

.xilisoft-bss-business-row-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sx-spacing-s) var(--sx-spacing-m);
    margin: 0;
}

.xilisoft-bss-business-row-grid > div[b-svk1zof3hv] {
    min-width: 0;
}

.xilisoft-bss-business-row-grid dt[b-svk1zof3hv] {
    margin-bottom: var(--sx-spacing-xxs);
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-business-row-grid dd[b-svk1zof3hv] {
    margin: 0;
}

.xilisoft-bss-business-overview strong[b-svk1zof3hv],
.xilisoft-bss-business-overview small[b-svk1zof3hv],
.xilisoft-bss-business-row-grid dd[b-svk1zof3hv] {
    overflow-wrap: break-word;
}

.xilisoft-bss-module-acceptance[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    margin-bottom: var(--sx-spacing-l);
    padding-bottom: var(--sx-spacing-l);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-module-acceptance-header[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-module-acceptance-list[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-module-acceptance-row[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    min-width: 0;
    padding-block: var(--sx-spacing-s);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-module-acceptance-row:first-child[b-svk1zof3hv] {
    padding-top: 0;
}

.xilisoft-bss-module-acceptance-row-head[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-module-acceptance-row-head > div:first-child[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    min-width: 0;
}

.xilisoft-bss-module-acceptance-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sx-spacing-s) var(--sx-spacing-m);
    margin: 0;
}

.xilisoft-bss-module-acceptance-grid > div[b-svk1zof3hv] {
    min-width: 0;
}

.xilisoft-bss-module-acceptance-grid dt[b-svk1zof3hv] {
    margin-bottom: var(--sx-spacing-xxs);
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-module-acceptance-grid dd[b-svk1zof3hv] {
    margin: 0;
}

.xilisoft-bss-module-acceptance strong[b-svk1zof3hv],
.xilisoft-bss-module-acceptance small[b-svk1zof3hv],
.xilisoft-bss-module-acceptance-grid dd[b-svk1zof3hv] {
    overflow-wrap: break-word;
}

.xilisoft-bss-operator-status-brief[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    margin-bottom: var(--sx-spacing-l);
    padding-bottom: var(--sx-spacing-l);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-operator-status-brief td[b-svk1zof3hv] {
    vertical-align: top;
}

.xilisoft-bss-operator-status-brief strong[b-svk1zof3hv],
.xilisoft-bss-operator-status-brief small[b-svk1zof3hv],
.xilisoft-bss-operator-status-brief td[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-workplan-snapshot[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    margin-bottom: var(--sx-spacing-l);
    padding-bottom: var(--sx-spacing-l);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-workplan-snapshot-header[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-workplan-progress-row[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) auto;
    align-items: center;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-workplan-progress[b-svk1zof3hv] {
    inline-size: 100%;
    block-size: var(--sx-spacing-s);
    accent-color: var(--sx-colorBrandForeground1);
}

.xilisoft-bss-workplan-progress-row span[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    overflow-wrap: anywhere;
}

.xilisoft-bss-workplan-snapshot-metrics[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-workplan-group-list[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-workplan-group[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs);
    min-width: 0;
    padding: var(--sx-spacing-s);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
}

.xilisoft-bss-workplan-group-header[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-workplan-group-header > div:first-child[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    min-width: 0;
}

.xilisoft-bss-workplan-group-items[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
}

.xilisoft-bss-workplan-group-item[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: minmax(7rem, 0.38fr) minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--sx-spacing-xs);
    min-width: 0;
}

.xilisoft-bss-workplan-group-header strong[b-svk1zof3hv],
.xilisoft-bss-workplan-group-header small[b-svk1zof3hv],
.xilisoft-bss-workplan-group-states[b-svk1zof3hv],
.xilisoft-bss-workplan-group-next[b-svk1zof3hv],
.xilisoft-bss-workplan-group-item code[b-svk1zof3hv],
.xilisoft-bss-workplan-group-item span[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-workplan-group-header small[b-svk1zof3hv],
.xilisoft-bss-workplan-group-states[b-svk1zof3hv],
.xilisoft-bss-workplan-group-next[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-workplan-priority-list[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-workplan-priority-item[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    min-width: 0;
    padding: var(--sx-spacing-s);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
}

.xilisoft-bss-workplan-priority-title[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-xs);
    min-width: 0;
}

.xilisoft-bss-workplan-priority-item strong[b-svk1zof3hv],
.xilisoft-bss-workplan-priority-item span[b-svk1zof3hv],
.xilisoft-bss-workplan-priority-item small[b-svk1zof3hv],
.xilisoft-bss-workplan-command span[b-svk1zof3hv],
.xilisoft-bss-workplan-command code[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-workplan-priority-item small[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-workplan-command-list[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs);
}

.xilisoft-bss-workplan-command[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: minmax(9rem, 0.32fr) minmax(0, 1fr);
    gap: var(--sx-spacing-s);
    align-items: start;
    min-width: 0;
    padding: var(--sx-spacing-s);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
}

.xilisoft-bss-review-guide[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    margin-bottom: var(--sx-spacing-l);
    padding-bottom: var(--sx-spacing-l);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-operational-state[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    margin-bottom: var(--sx-spacing-l);
    padding-bottom: var(--sx-spacing-l);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-operational-state-header[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-operational-state-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-overview-gap-list[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-overview-gap[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sx-spacing-xxs) var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-overview-gap span[b-svk1zof3hv],
.xilisoft-bss-overview-gap small[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-overview-gap span[b-svk1zof3hv],
.xilisoft-bss-overview-gap small[b-svk1zof3hv] {
    grid-column: 1 / -1;
}

@media (max-width: 48rem) {
    .xilisoft-bss-workplan-snapshot-header[b-svk1zof3hv],
    .xilisoft-bss-workplan-progress-row[b-svk1zof3hv] {
        grid-template-columns: 1fr;
    }

    .xilisoft-bss-workplan-snapshot-header[b-svk1zof3hv] {
        display: grid;
    }

    .xilisoft-bss-workplan-command[b-svk1zof3hv] {
        grid-template-columns: 1fr;
    }

    .xilisoft-bss-workplan-group-header[b-svk1zof3hv],
    .xilisoft-bss-workplan-group-item[b-svk1zof3hv] {
        grid-template-columns: 1fr;
    }

    .xilisoft-bss-workplan-group-header[b-svk1zof3hv] {
        display: grid;
    }

    .xilisoft-bss-visual-card-head[b-svk1zof3hv],
    .xilisoft-bss-visual-card-foot[b-svk1zof3hv],
    .xilisoft-bss-visual-pair[b-svk1zof3hv] {
        grid-template-columns: 1fr;
    }

    .xilisoft-bss-visual-card-head[b-svk1zof3hv],
    .xilisoft-bss-visual-card-foot[b-svk1zof3hv] {
        display: grid;
    }
}

.xilisoft-bss-feature[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs);
    min-height: 7rem;
    padding: var(--sx-spacing-m);
}

.xilisoft-bss-service-card[b-svk1zof3hv] {
    width: 100%;
    color: var(--sx-colorNeutralForeground1);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.xilisoft-bss-service-card.is-selected[b-svk1zof3hv] {
    border-color: var(--sx-colorBrandStroke1);
    background: var(--sx-colorBrandBackground2);
}

.xilisoft-bss-service-monitor-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-service-monitor-card[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    min-width: 0;
    min-height: 13rem;
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-left-width: .25rem;
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-service-monitor-card.is-selected[b-svk1zof3hv] {
    border-color: var(--sx-colorBrandStroke1);
    background: var(--sx-colorNeutralBackground1);
    box-shadow: 0 0 0 2px var(--sx-colorBrandStroke1);
}

.xilisoft-bss-service-monitor-card.is-running[b-svk1zof3hv] {
    border-left-color: var(--sx-colorPaletteGreenBorder1, var(--sx-colorStatusSuccessForeground1));
}

.xilisoft-bss-service-monitor-card.is-stopped[b-svk1zof3hv] {
    border-left-color: var(--sx-colorNeutralStroke1);
}

.xilisoft-bss-service-monitor-card.is-error[b-svk1zof3hv],
.xilisoft-bss-service-monitor-card.is-stale[b-svk1zof3hv] {
    border-left-color: var(--sx-colorPaletteRedBorder1, var(--sx-colorStatusDangerForeground1));
}

.xilisoft-bss-service-monitor-card.is-starting[b-svk1zof3hv],
.xilisoft-bss-service-monitor-card.is-stopping[b-svk1zof3hv] {
    border-left-color: var(--sx-colorPaletteYellowBorder1, var(--sx-colorStatusWarningForeground1));
}

.xilisoft-bss-settings-section[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    padding: var(--sx-spacing-l);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-md);
    background: var(--sx-colorNeutralBackground1);
}

.xilisoft-bss-settings-section-head[b-svk1zof3hv],
.xilisoft-bss-settings-section-title[b-svk1zof3hv],
.xilisoft-bss-settings-connection-cell[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-settings-section-head-actions[b-svk1zof3hv] {
    justify-content: space-between;
    align-items: flex-start;
}

.xilisoft-bss-settings-section-title[b-svk1zof3hv] {
    flex-wrap: wrap;
}

.xilisoft-bss-settings-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-settings-item[b-svk1zof3hv] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
}

.xilisoft-bss-settings-value[b-svk1zof3hv],
.xilisoft-bss-settings-message[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    overflow-wrap: anywhere;
}

.xilisoft-bss-settings-message[b-svk1zof3hv] {
    display: block;
    margin-top: var(--sx-spacing-xxs);
}

.xilisoft-bss-settings-coverage-body[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-l);
}

.xilisoft-bss-service-monitor-card-head[b-svk1zof3hv],
.xilisoft-bss-service-monitor-name[b-svk1zof3hv],
.xilisoft-bss-service-monitor-inline-state[b-svk1zof3hv],
.xilisoft-bss-service-monitor-actions[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-s);
    min-width: 0;
}

.xilisoft-bss-service-monitor-card-head[b-svk1zof3hv] {
    justify-content: space-between;
}

.xilisoft-bss-service-monitor-name strong[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-service-monitor-stats[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sx-spacing-xs);
    padding: var(--sx-spacing-s);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
}

.xilisoft-bss-service-monitor-route[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-service-monitor-route span[b-svk1zof3hv],
.xilisoft-bss-service-monitor-route small[b-svk1zof3hv] {
    overflow-wrap: anywhere;
}

.xilisoft-bss-service-error-preview[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    gap: var(--sx-spacing-xs);
    min-width: 0;
    padding: var(--sx-spacing-xs) var(--sx-spacing-s);
    border: 1px solid var(--sx-colorStatusDangerStroke1, var(--sx-colorPaletteRedBorder1));
    border-radius: var(--sx-radius-sm);
    color: var(--sx-colorStatusDangerForeground1);
    background: var(--sx-colorStatusDangerBackground1);
}

.xilisoft-bss-service-error-preview span[b-svk1zof3hv] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xilisoft-bss-service-monitor-actions[b-svk1zof3hv] {
    flex-wrap: wrap;
    margin-top: auto;
}

.xilisoft-bss-service-errors-panel[b-svk1zof3hv],
.xilisoft-bss-service-logs-panel[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    margin-top: var(--sx-spacing-l);
}

.xilisoft-bss-service-log-filter-card[b-svk1zof3hv] {
    align-items: end;
}

.xilisoft-bss-worker-signals[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-m);
    margin-bottom: var(--sx-spacing-l);
    padding-bottom: var(--sx-spacing-l);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-worker-signals-header[b-svk1zof3hv] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-worker-signals-grid[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--sx-spacing-m);
}

.xilisoft-bss-feature span[b-svk1zof3hv],
.xilisoft-bss-feature small[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-log-panel[b-svk1zof3hv] {
    margin-top: var(--sx-spacing-l);
}

.xilisoft-bss-detail-panel[b-svk1zof3hv] {
    margin-top: var(--sx-spacing-l);
    padding-top: var(--sx-spacing-l);
    border-top: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-detail-table[b-svk1zof3hv] {
    margin-top: var(--sx-spacing-m);
}

.xilisoft-bss-body-preview[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    margin-top: var(--sx-spacing-m);
}

.xilisoft-bss-email-body-preview[b-svk1zof3hv] {
    max-height: 18rem;
    overflow: auto;
    margin: 0;
    padding: var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-colorNeutralBackground2);
    color: var(--sx-colorNeutralForeground1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.xilisoft-bss-filterbar[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: end;
    gap: var(--sx-spacing-s);
    margin-bottom: var(--sx-spacing-m);
}

.xilisoft-bss-filter-check[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-xs);
    min-height: 2.25rem;
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
}

.xilisoft-bss-filter-actions[b-svk1zof3hv],
.xilisoft-bss-pager[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-xs);
    flex-wrap: wrap;
}

.xilisoft-bss-importbar[b-svk1zof3hv] {
    display: flex;
    align-items: center;
    gap: var(--sx-spacing-s);
    flex-wrap: wrap;
    margin: calc(-1 * var(--sx-spacing-xs)) 0 var(--sx-spacing-m);
}

.xilisoft-bss-file-button[b-svk1zof3hv] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sx-spacing-xs);
    min-height: 2.25rem;
    padding: 0 var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke1);
    border-radius: var(--sx-borderRadiusMedium);
    background: var(--sx-colorNeutralBackground1);
    color: var(--sx-colorNeutralForeground1);
    cursor: pointer;
    overflow: hidden;
}

.xilisoft-bss-file-button input[b-svk1zof3hv],
.xilisoft-bss-file-button[b-svk1zof3hv]  .xilisoft-bss-file-button-input {
    position: absolute;
    width: var(--sx-visually-hidden-size, 1px);
    height: var(--sx-visually-hidden-size, 1px);
    margin: var(--sx-visually-hidden-offset, -1px);
    padding: 0;
    overflow: hidden;
    clip-path: var(--sx-visually-hidden-clip, inset(50%));
    opacity: 0;
    cursor: pointer;
    white-space: nowrap;
}

.xilisoft-bss-file-button:has(input:disabled)[b-svk1zof3hv] {
    opacity: 0.55;
    cursor: not-allowed;
}

.xilisoft-bss-pager[b-svk1zof3hv] {
    justify-content: flex-end;
    margin-top: var(--sx-spacing-m);
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-pager span[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground1);
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-pager small[b-svk1zof3hv] {
    margin-right: var(--sx-spacing-xs);
}

.xilisoft-bss-migration-table[b-svk1zof3hv],
.xilisoft-bss-apply-table[b-svk1zof3hv],
.xilisoft-bss-run-log-table[b-svk1zof3hv] {
    margin-top: var(--sx-spacing-m);
}

.xilisoft-bss-run-gate[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    margin-top: var(--sx-spacing-m);
    padding-top: var(--sx-spacing-m);
    border-top: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-run-history[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-s);
    margin-top: var(--sx-spacing-l);
    padding-top: var(--sx-spacing-m);
    border-top: 1px solid var(--sx-colorNeutralStroke2);
}

.xilisoft-bss-migration-table code[b-svk1zof3hv] {
    font-size: var(--sx-fontSizeBase200);
}

.xilisoft-bss-table td small[b-svk1zof3hv] {
    display: block;
    margin-top: var(--sx-spacing-xxs);
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-audit-source-meta[b-svk1zof3hv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sx-spacing-xxs) var(--sx-spacing-s);
    max-width: 44rem;
    overflow-wrap: anywhere;
}

.xilisoft-bss-audit-source-item[b-svk1zof3hv] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sx-spacing-xxs);
}

.xilisoft-bss-audit-source-label[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground3);
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-audit-source-meta code[b-svk1zof3hv] {
    font-size: var(--sx-fontSizeBase200);
}

.xilisoft-bss-audit-evidence[b-svk1zof3hv] {
    margin-top: var(--sx-spacing-xs);
    max-width: 48rem;
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-audit-evidence summary[b-svk1zof3hv] {
    cursor: pointer;
    font-weight: var(--sx-fontWeightSemibold);
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-audit-evidence__body[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xs);
    padding-top: var(--sx-spacing-xs);
    min-width: 0;
}

.xilisoft-bss-audit-evidence__meta[b-svk1zof3hv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sx-spacing-xxs) var(--sx-spacing-s);
}

.xilisoft-bss-audit-evidence__redactions[b-svk1zof3hv] {
    margin: 0;
    padding-left: var(--sx-spacing-l);
    color: var(--sx-colorNeutralForeground3);
}

.xilisoft-bss-audit-evidence__json[b-svk1zof3hv] {
    margin: 0;
    max-width: 100%;
    max-height: 16rem;
    overflow: auto;
    padding: var(--sx-spacing-xs);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-borderRadiusSmall);
    background: var(--sx-colorNeutralBackground2);
    color: var(--sx-colorNeutralForeground2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.xilisoft-bss-audit-evidence__json code[b-svk1zof3hv],
.xilisoft-bss-audit-evidence__meta code[b-svk1zof3hv] {
    font-size: var(--sx-fontSizeBase200);
}

.xilisoft-bss-detail-line[b-svk1zof3hv] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-spacing-xxs);
    min-width: 14rem;
    margin-bottom: var(--sx-spacing-xs);
    overflow-wrap: anywhere;
}

.xilisoft-bss-log-exception[b-svk1zof3hv] {
    display: block;
    margin-top: var(--sx-spacing-xxs);
    color: var(--sx-colorPaletteRedForeground2, var(--sx-colorNeutralForeground2));
    overflow-wrap: anywhere;
}

.xilisoft-bss-view-tabs[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--sx-spacing-s);
}

.xilisoft-bss-tab[b-svk1zof3hv] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sx-spacing-xxs) var(--sx-spacing-s);
    align-items: center;
    min-height: 4.25rem;
    padding: var(--sx-spacing-s) var(--sx-spacing-m);
    border: 1px solid var(--sx-colorNeutralStroke2);
    border-radius: var(--sx-radius-sm, var(--sx-radius-md));
    background: var(--sx-colorNeutralBackground2);
    color: var(--sx-colorNeutralForeground1);
    text-align: left;
}

.xilisoft-bss-tab small[b-svk1zof3hv] {
    grid-column: 1 / -1;
    color: var(--sx-colorNeutralForeground2);
}

.xilisoft-bss-tab.is-selected[b-svk1zof3hv] {
    border-color: var(--sx-colorBrandStroke1);
    background: var(--sx-colorBrandBackground2);
}

.xilisoft-bss-tab:disabled[b-svk1zof3hv] {
    opacity: .55;
}

.xilisoft-bss-table-wrap[b-svk1zof3hv] {
    overflow-x: auto;
}

.xilisoft-bss-table[b-svk1zof3hv] {
    width: 100%;
    border-collapse: collapse;
    min-width: 48rem;
}

.xilisoft-bss-table-compact[b-svk1zof3hv] {
    min-width: 38rem;
}

.xilisoft-bss-table th[b-svk1zof3hv],
.xilisoft-bss-table td[b-svk1zof3hv] {
    padding: var(--sx-spacing-s);
    border-bottom: 1px solid var(--sx-colorNeutralStroke2);
    text-align: left;
    vertical-align: top;
}

.xilisoft-bss-table th[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    font-size: var(--sx-fontSizeBase200);
    font-weight: var(--sx-fontWeightSemibold);
}

.xilisoft-bss-empty[b-svk1zof3hv] {
    color: var(--sx-colorNeutralForeground2);
    text-align: center;
}

@media (max-width: 64rem) {
    .xilisoft-bss-filter-summary[b-svk1zof3hv] {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--sx-spacing-s) var(--sx-spacing-m);
    }

    .xilisoft-bss-filter-summary small[b-svk1zof3hv] {
        text-align: left;
    }

    .xilisoft-bss-legacy-filter-card[b-svk1zof3hv] {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--sx-spacing-m);
    }

    .xilisoft-bss-role-review-summary[b-svk1zof3hv],
    .xilisoft-bss-role-permission-grid-row[b-svk1zof3hv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .xilisoft-bss-order-detail-fields[b-svk1zof3hv],
    .xilisoft-bss-email-detail-fields[b-svk1zof3hv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .xilisoft-bss-email-detail-subject-row[b-svk1zof3hv],
    .xilisoft-bss-email-detail-section-title[b-svk1zof3hv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .xilisoft-bss-email-detail-badges[b-svk1zof3hv] {
        justify-content: flex-start;
    }

    .xilisoft-bss-email-filter-card[b-svk1zof3hv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .xilisoft-bss-sales-mode-actions[b-svk1zof3hv] {
        align-items: stretch;
    }

    .xilisoft-bss-sales-mode-actions > *[b-svk1zof3hv] {
        flex: 1 1 7rem;
    }

    .xilisoft-bss-sales-summary[b-svk1zof3hv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .xilisoft-bss-olap-tab-actions > *[b-svk1zof3hv] {
        flex: 1 1 9rem;
    }

    .xilisoft-bss-olap-summary[b-svk1zof3hv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .xilisoft-bss-olap-comparison-summary[b-svk1zof3hv],
    .xilisoft-bss-olap-comparison-values[b-svk1zof3hv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .xilisoft-bss-user-settings-grid[b-svk1zof3hv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .xilisoft-bss-user-settings-card[aria-label="Change Password"][b-svk1zof3hv] {
        grid-row: auto;
    }

    .xilisoft-bss-diagnostics-api-item[b-svk1zof3hv] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .xilisoft-bss-diagnostics-api-item span[b-svk1zof3hv] {
        grid-column: 1 / -1;
    }

    .xilisoft-bss-legacy-actions[b-svk1zof3hv] {
        justify-content: flex-start;
    }

    .xilisoft-bss-band[b-svk1zof3hv] {
        padding: var(--sx-spacing-m);
    }

    .xilisoft-bss-band-header[b-svk1zof3hv] {
        align-items: stretch;
        flex-direction: column;
    }

    .xilisoft-bss-pager[b-svk1zof3hv] {
        justify-content: flex-start;
    }

    .xilisoft-bss-chart-grid[b-svk1zof3hv] {
        grid-template-columns: minmax(0, 1fr);
    }
}