/*
 * Designer shared interface system
 * -------------------------------
 * This file is the only page-level visual language in the application. Feature
 * styles may describe a reusable control (for example a searchable select or a
 * column-filter popover), but modules must not introduce their own theme.
 */
:root {
    color-scheme: light dark;
    --ds-blue: #0a6ed1;
    --ds-blue-hover: #075fb6;
    --ds-blue-soft: rgba(10, 110, 209, .1);
    --ds-green: #198754;
    --ds-green-soft: rgba(25, 135, 84, .11);
    --ds-orange: #c86400;
    --ds-orange-soft: rgba(200, 100, 0, .11);
    --ds-red: #c7352d;
    --ds-red-soft: rgba(199, 53, 45, .1);
    --ds-purple: #7656c8;
    --ds-purple-soft: rgba(118, 86, 200, .11);
    --ds-yellow: #a66f00;
    --ds-yellow-soft: rgba(218, 151, 0, .13);
    --ds-action-blue-ink: #075fb6;
    --ds-action-blue-fill: rgba(10, 110, 209, .1);
    --ds-action-blue-line: rgba(10, 110, 209, .3);
    --ds-action-green-ink: #126a42;
    --ds-action-green-fill: rgba(25, 135, 84, .11);
    --ds-action-green-line: rgba(25, 135, 84, .3);
    --ds-action-purple-ink: #6748b8;
    --ds-action-purple-fill: rgba(118, 86, 200, .11);
    --ds-action-purple-line: rgba(118, 86, 200, .3);
    --ds-action-orange-ink: #9a4e00;
    --ds-action-orange-fill: rgba(200, 100, 0, .11);
    --ds-action-orange-line: rgba(200, 100, 0, .3);
    --ds-action-red-ink: #a72d26;
    --ds-action-red-fill: rgba(199, 53, 45, .1);
    --ds-action-red-line: rgba(199, 53, 45, .3);
    --ds-bg: #e4e8ed;
    --ds-bg-deep: #d4dae1;
    --ds-surface: rgba(252, 253, 255, .96);
    --ds-surface-solid: #fbfcfe;
    --ds-surface-muted: #f1f4f7;
    --ds-surface-subtle: rgba(238, 242, 246, .86);
    --ds-glass: rgba(249, 251, 254, .82);
    --ds-text: #171a20;
    --ds-text-secondary: #626b77;
    --ds-text-tertiary: #87909d;
    --ds-border: rgba(55, 65, 79, .12);
    --ds-border-strong: rgba(55, 65, 79, .19);
    --ds-highlight: rgba(255, 255, 255, .82);
    --ds-shadow-workbench: 0 24px 64px rgba(31, 41, 55, .14);
    --ds-shadow-float: 0 20px 52px rgba(28, 38, 52, .2);
    --ds-shadow-control: 0 4px 12px rgba(31, 41, 55, .07);
    --ds-radius-xs: .48rem;
    --ds-radius-sm: .68rem;
    --ds-radius: .86rem;
    --ds-radius-lg: 1.15rem;
    --ds-radius-xl: 1.35rem;
    --ds-content-max: 1440px;
    --ds-pagination-inline-safe: clamp(1rem, 1vw, 1.25rem);
    --ds-ease: cubic-bezier(.23, 1, .32, 1);
    --ds-press-duration: 130ms;
    --ds-float-duration: 175ms;

    /* Compatibility aliases used by older templates while they migrate. */
    --ds-accent: var(--ds-blue);
    --ds-accent-hover: var(--ds-blue-hover);
    --ds-win-bg: var(--ds-bg);
    --ds-win-surface: var(--ds-surface-solid);
    --ds-win-border: var(--ds-border);
    --ds-win-text: var(--ds-text);
    --ds-win-text-secondary: var(--ds-text-secondary);
}

html {
    min-height: 100%;
    background: var(--ds-bg);
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--ds-text);
    background:
        radial-gradient(circle at 7% -10%, rgba(213, 234, 255, .92), transparent 31rem),
        radial-gradient(circle at 102% 105%, rgba(239, 225, 205, .66), transparent 36rem),
        linear-gradient(145deg, var(--ds-bg-deep), #eef1f5 55%, #d9dee4) fixed !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.bg-light {
    background-color: var(--ds-bg) !important;
}

main.ds-page {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 1.35rem 1.35rem 2rem !important;
}

body.ds-has-sidebar main.ds-app-main {
    width: auto;
    max-width: none;
    margin-inline: 0;
}

.ds-app-main > header:first-child,
.ds-page-heading,
.ds-list-heading {
    margin-bottom: 1rem;
}

.ds-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    min-width: 0;
    flex-wrap: wrap;
}

.ds-page-heading > * {
    min-width: 0;
}

.ds-page-heading__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex: 0 0 auto;
    margin-left: auto;
    flex-wrap: wrap;
}

.ds-app-main h1,
.ds-page-title {
    min-width: 0;
    margin: 0;
    color: var(--ds-text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.018em;
    overflow-wrap: anywhere;
}

.ds-app-main h2,
.ds-section-title {
    color: var(--ds-text);
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.012em;
}

.ds-app-main :is(.text-muted, .text-secondary) {
    color: var(--ds-text-secondary) !important;
}

.ds-content-note {
    margin: -.15rem 0 1rem;
    padding: .65rem .8rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text-secondary);
    background: var(--ds-surface-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

.ds-empty-state {
    display: grid;
    min-height: 9rem;
    place-items: center;
    padding: 1.5rem;
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius);
    color: var(--ds-text-secondary);
    background: var(--ds-surface-muted);
    font-size: .875rem;
}

/* Shared surfaces and sections. */
.card,
.ds-panel {
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
    box-shadow: 0 1px 2px rgba(31, 41, 55, .035), inset 0 1px var(--ds-highlight);
}

.card-header,
.ds-panel__hd {
    padding: .78rem 1rem;
    color: var(--ds-text);
    border-bottom: 1px solid var(--ds-border);
    border-radius: var(--ds-radius) var(--ds-radius) 0 0 !important;
    background: var(--ds-surface-muted) !important;
    font-weight: 650;
}

.card-header.bg-white {
    background: var(--ds-surface-muted) !important;
}

.card-body,
.ds-panel__bd {
    color: var(--ds-text);
}

.list-group-item {
    color: var(--ds-text);
    border-color: var(--ds-border);
    background: transparent;
}

.ds-toolbar,
.ds-list-toolbar {
    display: flex;
    min-width: 0;
    padding: .55rem .7rem;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface-muted);
}

.ds-list-search-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem;
    border: 1px solid var(--ds-border-color, rgba(15, 23, 42, .1));
    border-radius: .85rem;
    background: var(--ds-surface, rgba(255, 255, 255, .92));
}

.ds-list-search-toolbar .form-control {
    min-width: 0;
    max-width: 32rem;
}

@media (max-width: 575.98px) {
    .ds-list-search-toolbar .form-control { max-width: none; }
}

.ds-list-toolbar__start,
.ds-list-toolbar__end {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .5rem;
}

.ds-list-toolbar__start {
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.ds-list-keyword-search {
    flex: 0 1 34rem;
    min-width: min(21rem, 100%);
    margin: 0;
}

.ds-list-keyword-search .input-group-text {
    color: var(--ds-text-muted);
    background: var(--ds-surface);
}

@media (max-width: 575.98px) {
    .ds-list-keyword-search {
        flex-basis: 100%;
        min-width: 17rem;
    }
}

.ds-list-toolbar__start::-webkit-scrollbar {
    display: none;
}

.ds-list-toolbar__end {
    flex: 0 0 auto;
}

.ds-list-heading {
    margin: 0 !important;
    padding: 1rem 1.1rem !important;
    border-bottom: 1px solid var(--ds-border);
}

.ds-list-heading > .d-flex,
.ds-list-heading.d-flex {
    margin: 0;
}

.ds-list-page-size {
    margin: 0 !important;
    padding: 0;
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

.ds-page-size-control,
.ds-list-page-size .form-select {
    width: auto !important;
    min-width: 4.5rem;
}

.ds-jump-page-control {
    width: 4.25rem;
}

[data-ds-width="select"] { width: 42px; }
[data-ds-width="index"] { width: 70px; }
[data-ds-width="index-wide"] { width: 72px; }
[data-ds-width="jump"] { width: 4.25rem; }
[data-ds-width="page-size"] { width: auto; min-width: 4.5rem; }
[data-ds-width="file"] { max-width: 260px; }
[data-ds-width="search"] { min-width: 260px; max-width: 320px; }
[data-ds-width="content"] { min-width: 160px; }
[data-ds-width="url"] { min-width: 200px; }
[data-ds-width="error-card"] { max-width: 620px; }
[data-ds-width="text-preview"] { max-width: 220px; }
[data-ds-min-width="profit-table"] { min-width: 6040px; }
[data-ds-size="icon-20"] { width: 20px; height: 20px; }
[data-ds-text="pre-wrap"] { white-space: pre-wrap; }
[data-ds-text="activity-json"] { max-width: 42rem; white-space: pre-wrap; }
[data-ds-media="brand-preview"] { max-width: 180px; max-height: 36px; padding: 4px; border: 1px solid var(--ds-border); border-radius: .4rem; background: var(--ds-surface-solid); object-fit: contain; }

.ds-list-more__trigger {
    display: inline-grid;
    width: 2.35rem;
    min-width: 2.35rem;
    height: 2.35rem;
    min-height: 2.35rem;
    padding: 0;
    place-items: center;
    border-radius: .7rem;
}

.ds-list-more__menu {
    width: min(30rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: min(39rem, calc(100vh - 6rem));
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    transform-origin: calc(100% - 1rem) top;
}

.ds-list-more-panel {
    display: grid;
    min-width: 0;
}

.ds-list-more-section {
    min-width: 0;
    padding: .875rem;
}

.ds-list-more-section + .ds-list-more-section {
    border-top: 1px solid var(--ds-border);
}

.ds-list-more__heading {
    display: flex;
    min-width: 0;
    margin: 0 0 .625rem;
    padding: 0;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 0;
}

.ds-list-more__heading > div {
    display: grid;
    min-width: 0;
    gap: .1rem;
}

.ds-list-more__heading :is(strong, .fw-semibold) {
    min-width: 0;
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
}

.ds-list-more__heading :is(small, .ds-list-more-section__caption) {
    min-width: 0;
    color: var(--ds-text-tertiary);
    font-size: .72rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: normal;
}

.ds-list-more__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

.ds-list-more__item,
.ds-list-more__item > :is(a, button, form),
.ds-list-more__item form > :is(a, button) {
    width: 100%;
}

.ds-list-more__item :is(.btn, a.btn) {
    display: inline-flex;
    min-width: 0;
    min-height: 2.5rem;
    align-items: center;
    justify-content: flex-start;
    gap: .4rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
}

.ds-list-more__views:not(:empty) {
    min-width: 0;
}

.ds-list-more__import-section:not(.ds-list-more-section) {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--ds-border);
}

.ds-list-more__section-heading {
    display: flex;
    align-items: center;
    gap: .42rem;
    margin-bottom: .55rem;
    color: var(--ds-text-secondary);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .015em;
}

.ds-list-more__section-heading > i {
    color: var(--ds-blue);
    font-size: .86rem;
}

.ds-list-more__import {
    margin: 0;
    border: 0;
    border-radius: var(--ds-radius);
    background: var(--ds-surface-muted);
    box-shadow: inset 0 0 0 1px var(--ds-border);
}

.ds-list-more__import .ds-list-more__import-body {
    display: grid !important;
    gap: .6rem !important;
    padding: .7rem !important;
}

.ds-list-more__import form[data-import-module] {
    display: flex !important;
    width: 100%;
    flex-wrap: wrap !important;
    flex-grow: 0 !important;
    gap: .45rem !important;
}

.ds-list-more__import form[data-import-module] input[type="file"] {
    width: 100%;
    max-width: none;
    flex: 1 1 14rem;
}

.ds-list-more__import form[data-import-module] :is(button, .btn) {
    flex: 0 0 auto;
}

/* Controls: clear hierarchy, immediate press response, no decorative bounce. */
.btn {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    vertical-align: middle;
    border-radius: var(--ds-radius-sm);
    font-weight: 550;
    text-align: center;
    box-shadow: var(--ds-shadow-control), inset 0 1px rgba(255, 255, 255, .38);
    transition: transform var(--ds-press-duration) var(--ds-ease), color 160ms ease,
        background-color 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.btn.btn-sm {
    min-height: 1.875rem;
}

.btn > :is(i, svg) {
    flex: 0 0 auto;
}

.btn:active:not(:disabled) {
    transform: scale(.97);
}

.btn-primary {
    --bs-btn-bg: var(--ds-blue);
    --bs-btn-border-color: rgba(6, 83, 165, .38);
    --bs-btn-hover-bg: var(--ds-blue-hover);
    --bs-btn-hover-border-color: var(--ds-blue-hover);
    --bs-btn-active-bg: var(--ds-blue-hover);
    --bs-btn-active-border-color: var(--ds-blue-hover);
    box-shadow: 0 8px 18px rgba(10, 110, 209, .19), inset 0 1px rgba(255, 255, 255, .28);
}

.btn-outline-primary {
    --bs-btn-color: var(--ds-blue);
    --bs-btn-border-color: rgba(10, 110, 209, .3);
    --bs-btn-hover-bg: var(--ds-blue-soft);
    --bs-btn-hover-color: var(--ds-blue);
    --bs-btn-hover-border-color: rgba(10, 110, 209, .42);
    --bs-btn-active-bg: var(--ds-blue-soft);
    --bs-btn-active-color: var(--ds-blue);
}

.btn-outline-secondary,
.btn-secondary {
    --bs-btn-color: var(--ds-text-secondary);
    --bs-btn-bg: var(--ds-surface-solid);
    --bs-btn-border-color: var(--ds-border-strong);
    --bs-btn-hover-color: var(--ds-text);
    --bs-btn-hover-bg: var(--ds-surface-muted);
    --bs-btn-hover-border-color: var(--ds-border-strong);
    --bs-btn-active-bg: var(--ds-surface-subtle);
}

.btn-outline-danger {
    --bs-btn-color: var(--ds-red);
    --bs-btn-border-color: rgba(199, 53, 45, .28);
    --bs-btn-hover-color: var(--ds-red);
    --bs-btn-hover-bg: var(--ds-red-soft);
    --bs-btn-hover-border-color: rgba(199, 53, 45, .4);
    --bs-btn-active-bg: var(--ds-red-soft);
}

.btn-success {
    --bs-btn-bg: var(--ds-green);
    --bs-btn-border-color: rgba(18, 106, 66, .42);
    --bs-btn-hover-bg: #147548;
    --bs-btn-hover-border-color: #147548;
    --bs-btn-active-bg: #106a40;
    --bs-btn-active-border-color: #106a40;
}

.btn-outline-success {
    --bs-btn-color: var(--ds-action-green-ink);
    --bs-btn-border-color: var(--ds-action-green-line);
    --bs-btn-hover-color: var(--ds-action-green-ink);
    --bs-btn-hover-bg: var(--ds-action-green-fill);
    --bs-btn-hover-border-color: rgba(25, 135, 84, .42);
    --bs-btn-active-color: var(--ds-action-green-ink);
    --bs-btn-active-bg: var(--ds-action-green-fill);
}

.btn-info,
.btn-outline-info {
    --bs-btn-color: var(--ds-action-purple-ink);
    --bs-btn-bg: var(--ds-action-purple-fill);
    --bs-btn-border-color: var(--ds-action-purple-line);
    --bs-btn-hover-color: var(--ds-action-purple-ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ds-purple) 16%, transparent);
    --bs-btn-hover-border-color: rgba(118, 86, 200, .42);
    --bs-btn-active-color: var(--ds-action-purple-ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--ds-purple) 19%, transparent);
}

.btn-warning,
.btn-outline-warning {
    --bs-btn-color: var(--ds-action-orange-ink);
    --bs-btn-bg: var(--ds-action-orange-fill);
    --bs-btn-border-color: var(--ds-action-orange-line);
    --bs-btn-hover-color: var(--ds-action-orange-ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ds-orange) 16%, transparent);
    --bs-btn-hover-border-color: rgba(200, 100, 0, .42);
    --bs-btn-active-color: var(--ds-action-orange-ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--ds-orange) 19%, transparent);
}

.btn-danger {
    --bs-btn-bg: var(--ds-red);
    --bs-btn-border-color: rgba(167, 45, 38, .42);
    --bs-btn-hover-bg: #b52e27;
    --bs-btn-hover-border-color: #b52e27;
    --bs-btn-active-bg: #a82a24;
    --bs-btn-active-border-color: #a82a24;
}

.btn-outline-dark,
.btn-dark {
    --bs-btn-color: var(--ds-text-secondary);
    --bs-btn-bg: var(--ds-surface-solid);
    --bs-btn-border-color: var(--ds-border-strong);
    --bs-btn-hover-color: var(--ds-text);
    --bs-btn-hover-bg: var(--ds-surface-muted);
    --bs-btn-hover-border-color: var(--ds-border-strong);
    --bs-btn-active-bg: var(--ds-surface-subtle);
}

/*
 * Business-action contract. Tone communicates meaning; prominence communicates
 * hierarchy. Templates keep their Bootstrap classes for compatibility while
 * these semantic modifiers provide one shared visual language.
 */
.ds-action {
    --ds-action-accent: var(--ds-text-secondary);
    --ds-action-ink: var(--ds-text-secondary);
    --ds-action-fill: var(--ds-surface-solid);
    --ds-action-line: var(--ds-border-strong);
    color: var(--ds-action-ink) !important;
    border-color: var(--ds-action-line) !important;
    background: var(--ds-action-fill) !important;
    text-decoration: none !important;
}

.ds-action--neutral {
    --ds-action-accent: var(--ds-text-secondary);
    --ds-action-ink: var(--ds-text-secondary);
    --ds-action-fill: var(--ds-surface-solid);
    --ds-action-line: var(--ds-border-strong);
}

.ds-action--primary {
    --ds-action-accent: var(--ds-blue);
    --ds-action-ink: var(--ds-action-blue-ink);
    --ds-action-fill: var(--ds-action-blue-fill);
    --ds-action-line: var(--ds-action-blue-line);
}

.ds-action--positive {
    --ds-action-accent: var(--ds-green);
    --ds-action-ink: var(--ds-action-green-ink);
    --ds-action-fill: var(--ds-action-green-fill);
    --ds-action-line: var(--ds-action-green-line);
}

.ds-action--transfer {
    --ds-action-accent: var(--ds-purple);
    --ds-action-ink: var(--ds-action-purple-ink);
    --ds-action-fill: var(--ds-action-purple-fill);
    --ds-action-line: var(--ds-action-purple-line);
}

.ds-action--warning {
    --ds-action-accent: var(--ds-orange);
    --ds-action-ink: var(--ds-action-orange-ink);
    --ds-action-fill: var(--ds-action-orange-fill);
    --ds-action-line: var(--ds-action-orange-line);
}

.ds-action--danger {
    --ds-action-accent: var(--ds-red);
    --ds-action-ink: var(--ds-action-red-ink);
    --ds-action-fill: var(--ds-action-red-fill);
    --ds-action-line: var(--ds-action-red-line);
}

.ds-action:hover:not(:disabled):not(.disabled) {
    color: var(--ds-action-ink) !important;
    border-color: color-mix(in srgb, var(--ds-action-accent) 42%, transparent) !important;
    background: color-mix(in srgb, var(--ds-action-accent) 15%, var(--ds-surface-solid)) !important;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--ds-action-accent) 12%, transparent),
        inset 0 1px rgba(255, 255, 255, .38);
}

.ds-action--prominent {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--ds-action-accent) 78%, #000) !important;
    background: var(--ds-action-accent) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ds-action-accent) 24%, transparent),
        inset 0 1px rgba(255, 255, 255, .24);
}

.ds-action--prominent:hover:not(:disabled):not(.disabled) {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--ds-action-accent) 72%, #000) !important;
    background: color-mix(in srgb, var(--ds-action-accent) 88%, #000) !important;
}

.ds-action:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ds-action-accent) 27%, transparent);
    outline-offset: 2px;
}

.btn:disabled,
.btn.disabled {
    box-shadow: none;
    opacity: .48;
}

.form-label {
    margin-bottom: .35rem;
    color: var(--ds-text);
    font-size: .875rem;
    font-weight: 600;
}

.form-control,
.form-select,
.ts-control {
    min-height: 2.35rem;
    color: var(--ds-text);
    border-color: var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
    background-color: var(--ds-surface-solid);
    box-shadow: inset 0 1px 2px rgba(31, 41, 55, .035);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.form-control::placeholder {
    color: var(--ds-text-tertiary);
}

.form-control:focus,
.form-select:focus,
.ts-wrapper.focus .ts-control {
    color: var(--ds-text);
    border-color: var(--ds-blue);
    background-color: var(--ds-surface-solid);
    box-shadow: 0 0 0 3px rgba(10, 110, 209, .16);
}

.form-check-input {
    border-color: var(--ds-border-strong);
}

.form-check-input:checked,
.form-check-input:indeterminate {
    border-color: var(--ds-blue);
    background-color: var(--ds-blue);
}

/* Alerts remain inside the workspace and use quiet semantic surfaces. */
.alert {
    padding: .65rem .8rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: none;
}

.alert-success { color: #17643f; background: var(--ds-green-soft); border-color: rgba(25, 135, 84, .22); }
.alert-warning { color: #805000; background: var(--ds-yellow-soft); border-color: rgba(166, 111, 0, .24); }
.alert-danger { color: #962820; background: var(--ds-red-soft); border-color: rgba(199, 53, 45, .22); }
.alert-info { color: #075aaf; background: var(--ds-blue-soft); border-color: rgba(10, 110, 209, .22); }

/* Shared dense data table. */
.table-responsive,
.ds-wide-table-wrap,
.ds-data-table-scroll {
    position: relative;
    margin: 0;
    overflow: auto;
    border-radius: 0;
    scrollbar-color: rgba(94, 104, 118, .35) transparent;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ds-text);
    --bs-table-border-color: var(--ds-border);
    margin-bottom: 0;
    color: var(--ds-text);
    font-size: .8125rem;
    line-height: 1.35;
}

.table thead,
.table .table-light {
    --bs-table-bg: var(--ds-surface-muted);
    --bs-table-color: var(--ds-text-secondary);
}

.table thead th {
    height: 2.55rem;
    padding: .48rem .7rem;
    color: var(--ds-text-secondary);
    border-bottom-color: var(--ds-border-strong);
    background: var(--ds-surface-muted);
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .008em;
    vertical-align: middle;
    white-space: nowrap;
}

.table tbody tr {
    min-height: 46px;
    transition: background-color 150ms ease;
}

.table tbody td {
    height: 46px;
    padding: .5rem .7rem;
    color: var(--ds-text);
    border-bottom-color: var(--ds-border);
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(113, 124, 139, .025);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: rgba(10, 110, 209, .052);
    --bs-table-hover-color: var(--ds-text);
}

.table :is(code, time),
.ds-tabular,
[data-column-key*="date"],
[data-column-key*="time"],
[data-column-key*="sku"],
[data-column-key*="amount"],
[data-column-key*="number"] {
    font-variant-numeric: tabular-nums;
}

.table a:not(.btn) {
    color: var(--ds-blue);
    text-decoration: none;
    text-underline-offset: .16em;
}

.ds-cell-empty {
    color: var(--ds-text-tertiary);
}

.ds-row-actions,
.table td:last-child > .d-flex,
.table td:last-child > .btn-group {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.ds-row-actions__group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    white-space: nowrap;
}

.ds-row-actions :is(form.d-inline, .ds-row-actions__group > form.d-inline),
.table td:last-child > form.d-inline {
    display: inline-flex !important;
    margin: 0;
    vertical-align: middle;
}

.table .btn-sm,
.ds-row-action {
    min-height: 1.875rem;
    padding: .22rem .55rem;
    border-radius: .55rem;
    font-size: .75rem;
    line-height: 1.15;
    white-space: nowrap;
}

/* Semantic chips: text is always present, color is supporting information. */
.badge,
.ds-status-chip {
    display: inline-flex;
    min-height: 1.45rem;
    padding: .2rem .48rem;
    align-items: center;
    gap: .32rem;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    background: var(--ds-surface-muted);
    color: var(--ds-text-secondary);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
}

.ds-status-chip::before {
    width: .38rem;
    height: .38rem;
    flex: 0 0 .38rem;
    border-radius: 999px;
    background: currentColor;
    content: "";
}

.badge.bg-success, .ds-status-success { color: #176d45 !important; border-color: rgba(25,135,84,.2); background: var(--ds-green-soft) !important; }
.badge.bg-danger, .ds-status-danger { color: #ad2f27 !important; border-color: rgba(199,53,45,.2); background: var(--ds-red-soft) !important; }
.badge.bg-warning, .ds-status-warning { color: #8a5700 !important; border-color: rgba(200,100,0,.22); background: var(--ds-orange-soft) !important; }
.badge.bg-primary, .badge.bg-info, .ds-status-progress { color: #075fb6 !important; border-color: rgba(10,110,209,.2); background: var(--ds-blue-soft) !important; }
.badge.bg-secondary, .ds-status-neutral { color: var(--ds-text-secondary) !important; border-color: var(--ds-border); background: var(--ds-surface-muted) !important; }
.ds-status-transfer { color: #6748b7 !important; border-color: rgba(118,86,200,.22); background: var(--ds-purple-soft) !important; }

/* Filters, pagination and floating layers. */
details.ds-filter-panel,
main.ds-page--list details {
    border: 0;
    border-bottom: 1px solid var(--ds-border);
    border-radius: 0;
    background: var(--ds-surface-subtle);
}

main.ds-page--list details > summary {
    min-height: 2.65rem;
    padding: .55rem .8rem;
    color: var(--ds-text-secondary);
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 600;
}

.ds-list-pagination {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    margin: 0;
    padding: .65rem max(var(--ds-pagination-inline-safe), env(safe-area-inset-right));
    padding-left: max(var(--ds-pagination-inline-safe), env(safe-area-inset-left));
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    border-top: 1px solid var(--ds-border);
}

.ds-pagination__summary {
    color: var(--ds-text-tertiary);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ds-pagination__controls,
.ds-pagination__pages,
.ds-pagination__numbers,
.ds-pagination__jump,
.ds-pagination__jump-label {
    display: flex;
    min-width: 0;
    align-items: center;
}

.ds-pagination__controls {
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .45rem .65rem;
}

.ds-pagination__pages,
.ds-pagination__numbers {
    gap: .22rem;
}

.ds-pagination__numbers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-pagination__numbers > li {
    display: flex;
}

.ds-pagination__numbers--mobile {
    display: none;
}

.ds-pagination__control {
    display: inline-flex;
    width: auto;
    min-width: 2rem;
    min-height: 2rem;
    padding: .3rem .5rem;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    color: var(--ds-text-secondary) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: .58rem !important;
    background: var(--ds-surface-solid) !important;
    box-shadow: none !important;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: transform var(--ds-press-duration) var(--ds-ease), color 150ms ease,
        background-color 160ms ease, border-color 160ms ease;
}

.ds-pagination__direction {
    padding-inline: .6rem;
}

.ds-pagination__control.is-current {
    color: #fff !important;
    border-color: var(--ds-blue) !important;
    background: var(--ds-blue) !important;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--ds-blue) 22%, transparent) !important;
}

.ds-pagination__control.is-disabled {
    color: var(--ds-text-tertiary) !important;
    background: var(--ds-surface-muted) !important;
    cursor: default;
    opacity: .72;
}

.ds-pagination__control:active:not(.is-disabled):not(.is-current) {
    transform: scale(.96);
}

.ds-pagination__control:focus-visible,
.ds-pagination__jump-input:focus-visible,
.ds-pagination__jump-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ds-blue) 25%, transparent);
    outline-offset: 2px;
}

.ds-pagination__ellipsis {
    display: inline-flex;
    min-width: 1.35rem;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.ds-pagination__jump {
    gap: .35rem;
    white-space: nowrap;
}

.ds-pagination__jump-label {
    gap: .3rem;
    color: var(--ds-text-tertiary);
    font-size: .78rem;
}

.ds-pagination__jump-input {
    width: 4.25rem;
    min-height: 2rem;
    padding-block: .3rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ds-pagination__jump-button {
    min-width: 2.75rem;
    min-height: 2rem;
    padding: .3rem .55rem;
    font-size: .78rem;
}

@media (hover: hover) and (pointer: fine) {
    .ds-pagination__control[href]:hover,
    .ds-pagination__jump-button:hover {
        color: var(--ds-blue) !important;
        border-color: color-mix(in srgb, var(--ds-blue) 34%, var(--ds-border)) !important;
        background: color-mix(in srgb, var(--ds-blue) 9%, var(--ds-surface-solid)) !important;
    }
}

@media (max-width: 575.98px) {
    .ds-list-pagination {
        align-items: flex-start;
        padding: .7rem max(.75rem, env(safe-area-inset-right));
        padding-left: max(.75rem, env(safe-area-inset-left));
    }

    .ds-pagination__summary,
    .ds-pagination__controls {
        width: 100%;
    }

    .ds-pagination__controls {
        margin-left: 0;
        gap: .5rem;
    }

    .ds-pagination__pages,
    .ds-pagination__jump {
        max-width: 100%;
    }

    .ds-pagination__numbers--desktop {
        display: none;
    }

    .ds-pagination__numbers--mobile {
        display: flex;
    }

    .ds-pagination__control,
    .ds-pagination__ellipsis,
    .ds-pagination__jump-input,
    .ds-pagination__jump-button {
        min-height: 2.5rem;
    }

    .ds-pagination__control {
        min-width: 2.5rem;
        padding: .45rem;
    }

    .ds-pagination__direction {
        width: 2.5rem;
    }

    .ds-pagination__direction-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .ds-pagination__jump {
        flex: 1 0 100%;
        justify-content: flex-end;
    }

    .ds-pagination__jump-input {
        width: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-pagination__control,
    .ds-pagination__jump-button {
        transform: none !important;
        transition-duration: .01ms !important;
    }
}

@media (prefers-contrast: more) {
    .ds-pagination__control,
    .ds-pagination__jump-input,
    .ds-pagination__jump-button {
        border-width: 2px !important;
        box-shadow: none !important;
    }
}

.dropdown-menu,
.modal-content,
.offcanvas,
.ds-floating-panel {
    color: var(--ds-text);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-glass);
    box-shadow: var(--ds-shadow-float), inset 0 1px var(--ds-highlight);
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
}

.dropdown-menu {
    padding: .45rem;
    transform-origin: var(--ds-popover-origin, top right);
}

.dropdown-item {
    min-height: 2.15rem;
    padding: .45rem .58rem;
    color: var(--ds-text-secondary);
    border-radius: .58rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--ds-text);
    background: var(--ds-blue-soft);
}

.modal-header,
.modal-footer {
    border-color: var(--ds-border);
}

.modal-backdrop.show,
.offcanvas-backdrop.show {
    opacity: .3;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Form/detail composition uses the same workbench and spacing rhythm. */
main.ds-page--form,
main.ds-page--detail {
    max-width: 1180px;
    margin-inline: auto;
}

main.ds-page--form > :is(.container, .container-fluid),
main.ds-page--detail > :is(.container, .container-fluid) {
    overflow: hidden;
    padding: 0 !important;
}

.ds-page--form .card,
.ds-page--detail .card {
    box-shadow: none;
}

.ds-form-section-title {
    margin: 1rem 0 .75rem;
    padding: .6rem .75rem;
    color: var(--ds-text);
    border: 0;
    border-bottom: 1px solid var(--ds-border);
    background: transparent;
    font-size: .95rem;
    font-weight: 650;
}

.ds-form-actions-sticky {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    margin: 1rem -1rem -1rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-glass);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Dashboard, authentication and error pages share the same material language. */
.ds-page--auth,
.ds-page--error {
    min-height: 100vh;
}

main.ds-page--auth,
main.ds-page--error {
    width: 100%;
    max-width: none;
    margin: 0;
}

main.ds-page--dashboard {
    background: transparent;
}

.ds-dashboard {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1.4rem;
    min-width: 0;
    padding: 1.15rem;
    background: var(--ds-surface-muted);
}

.ds-dashboard-section {
    display: grid;
    width: min(100%, 100rem);
    gap: .8rem;
    min-width: 0;
    margin-inline: auto;
}

.ds-dashboard-section__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
    min-width: 0;
}

.ds-dashboard-section__eyebrow,
.ds-dashboard-card__eyebrow,
.ds-dashboard-modal__eyebrow {
    display: block;
    margin-bottom: .12rem;
    color: var(--ds-text-tertiary);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.ds-dashboard-section__title {
    margin: 0;
    color: var(--ds-text);
    font-size: 1.05rem;
    font-weight: 680;
    line-height: 1.25;
    letter-spacing: -.014em;
}

.ds-dashboard-section__hint {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: var(--ds-text-tertiary);
    font-size: .75rem;
    line-height: 1.35;
}

.ds-dashboard-grid {
    display: grid;
    gap: .8rem;
    min-width: 0;
}

.ds-dashboard-grid--priority {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(10rem, auto);
}

.ds-dashboard-grid--priority > [data-dashboard-size="featured"] {
    grid-column: span 2;
    grid-row: span 2;
}

.ds-dashboard-grid--analytics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.ds-dashboard-card {
    --ds-dashboard-accent: var(--ds-blue);
    --ds-dashboard-accent-soft: var(--ds-blue-soft);
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface-solid);
    box-shadow: 0 9px 24px rgba(31, 41, 55, .055), inset 0 1px var(--ds-highlight);
    transition:
        transform var(--ds-press-duration) var(--ds-ease),
        opacity var(--ds-press-duration) ease,
        border-color var(--ds-float-duration) ease;
}

.ds-dashboard-card::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--ds-dashboard-accent);
    content: "";
    opacity: .74;
}

.ds-dashboard-card[data-ds-tone="danger"],
.ds-dashboard-count-badge[data-ds-tone="danger"] {
    --ds-dashboard-accent: var(--ds-red);
    --ds-dashboard-accent-soft: var(--ds-red-soft);
}

.ds-dashboard-card[data-ds-tone="warning"],
.ds-dashboard-count-badge[data-ds-tone="warning"] {
    --ds-dashboard-accent: var(--ds-orange);
    --ds-dashboard-accent-soft: var(--ds-orange-soft);
}

.ds-dashboard-card[data-ds-tone="success"],
.ds-dashboard-count-badge[data-ds-tone="success"] {
    --ds-dashboard-accent: var(--ds-green);
    --ds-dashboard-accent-soft: var(--ds-green-soft);
}

.ds-dashboard-card[data-ds-tone="info"],
.ds-dashboard-count-badge[data-ds-tone="info"] {
    --ds-dashboard-accent: var(--ds-blue);
    --ds-dashboard-accent-soft: var(--ds-blue-soft);
}

.ds-dashboard-card[data-ds-tone="reward"],
.ds-dashboard-count-badge[data-ds-tone="reward"] {
    --ds-dashboard-accent: var(--ds-purple);
    --ds-dashboard-accent-soft: var(--ds-purple-soft);
}

.ds-dashboard-count-badge[data-ds-tone="neutral"] {
    --ds-dashboard-accent: var(--ds-text-secondary);
    --ds-dashboard-accent-soft: var(--ds-surface-subtle);
}

.ds-dashboard-card__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: 1rem 1rem .7rem;
}

.ds-dashboard-card__icon,
.ds-dashboard-empty__icon {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    color: var(--ds-dashboard-accent);
    border-radius: .72rem;
    background: var(--ds-dashboard-accent-soft);
    font-size: 1rem;
}

.ds-dashboard-card__heading {
    min-width: 0;
}

.ds-dashboard-card__title {
    margin: 0;
    overflow: hidden;
    color: var(--ds-text);
    font-size: .93rem;
    font-weight: 670;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-dashboard-drag-handle {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    color: var(--ds-text-tertiary);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-xs);
    background: transparent;
    cursor: grab;
    opacity: .64;
    touch-action: none;
    transition:
        transform var(--ds-press-duration) var(--ds-ease),
        opacity var(--ds-press-duration) ease,
        color var(--ds-press-duration) ease,
        border-color var(--ds-press-duration) ease,
        background-color var(--ds-press-duration) ease;
}

.ds-dashboard-drag-handle:active {
    cursor: grabbing;
    transform: scale(.94);
}

.ds-dashboard-drag-handle:focus-visible {
    color: var(--ds-dashboard-accent);
    border-color: var(--ds-dashboard-accent);
    outline: 3px solid var(--ds-dashboard-accent-soft);
    outline-offset: 1px;
    background: var(--ds-dashboard-accent-soft);
    opacity: 1;
}

.ds-dashboard-card__metric {
    margin: .15rem 1rem 0;
    color: var(--ds-dashboard-accent);
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    font-weight: 720;
    line-height: 1;
    letter-spacing: -.042em;
    font-variant-numeric: tabular-nums;
}

.ds-dashboard-card__metric--amount {
    display: flex;
    align-items: baseline;
    gap: .35rem;
}

.ds-dashboard-card__metric--amount small {
    color: var(--ds-text-secondary);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 0;
}

.ds-dashboard-card__support {
    margin: .4rem 1rem .85rem;
    color: var(--ds-text-secondary);
    font-size: .76rem;
    line-height: 1.45;
}

.ds-dashboard-card__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 2.75rem;
    margin-top: auto;
    padding: .65rem 1rem;
    color: var(--ds-dashboard-accent);
    border-top: 1px solid var(--ds-border);
    background: transparent;
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
    transition: color var(--ds-press-duration) ease, background-color var(--ds-press-duration) ease;
}

.ds-dashboard-alert-list {
    display: grid;
    width: min(100%, 58rem);
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(4rem, 1fr);
    gap: .65rem;
    min-height: 0;
    margin-inline: auto;
    padding: .3rem 1rem 1rem;
}

.ds-dashboard-alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
    padding: .8rem .9rem;
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-muted);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition:
        color var(--ds-press-duration) ease,
        border-color var(--ds-press-duration) ease,
        background-color var(--ds-press-duration) ease;
}

.ds-dashboard-alert-row > span {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.ds-dashboard-alert-row > span i {
    color: var(--ds-text-tertiary);
}

.ds-dashboard-count-badge {
    min-width: 2rem;
    padding: .25rem .45rem;
    flex: 0 0 auto;
    color: var(--ds-dashboard-accent);
    border-radius: 999px;
    background: var(--ds-dashboard-accent-soft);
    font-size: .78rem;
    font-weight: 720;
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ds-dashboard-card--analytics {
    min-height: 18rem;
}

.ds-dashboard-filter {
    display: grid;
    gap: .7rem;
    margin-top: auto;
    padding: .8rem 1rem 1rem;
    border-top: 1px solid var(--ds-border);
}

.ds-dashboard-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.ds-dashboard-date-range > div {
    min-width: 0;
}

.ds-dashboard-date-range .form-control {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    color: var(--ds-text);
    border-color: var(--ds-border-strong);
    background: var(--ds-surface-solid);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.ds-dashboard-date-separator {
    color: var(--ds-text-tertiary);
    font-size: .72rem;
}

.ds-dashboard-filter__actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    flex-wrap: wrap;
}

.ds-dashboard-filter__actions .btn {
    min-height: 2rem;
}

.ds-dashboard-presets .btn.active {
    color: var(--ds-blue);
    border-color: rgba(10, 110, 209, .28);
    background: var(--ds-blue-soft);
}

.ds-dashboard-inline-link {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    min-height: 2rem;
    margin-left: auto;
    padding: .25rem .15rem;
    color: var(--ds-blue);
    font-size: .76rem;
    font-weight: 650;
    text-decoration: none;
}

.ds-dashboard-card.ds-dragging {
    z-index: 3;
    border-color: var(--ds-dashboard-accent);
    opacity: .62;
    transform: scale(.992);
}

.ds-dashboard-empty {
    min-height: 16rem;
    padding: 2rem;
    place-items: center;
    align-content: center;
    gap: .8rem;
    color: var(--ds-text-secondary);
    border: 1px dashed var(--ds-border-strong);
    border-radius: var(--ds-radius);
    background: var(--ds-surface-solid);
    text-align: center;
}

.ds-dashboard-empty:not([hidden]) {
    display: grid;
}

.ds-dashboard-empty__icon {
    --ds-dashboard-accent: var(--ds-blue);
    --ds-dashboard-accent-soft: var(--ds-blue-soft);
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.15rem;
}

.ds-dashboard-empty h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 680;
}

.ds-dashboard-empty p {
    margin: .25rem 0 0;
    font-size: .8rem;
}

.ds-dashboard-customize-trigger {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ds-dashboard-customize-group {
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.ds-dashboard-customize-group:last-child {
    margin-bottom: 0;
}

.ds-dashboard-customize-group legend {
    margin-bottom: .45rem;
    color: var(--ds-text-secondary);
    font-size: .75rem;
    font-weight: 700;
}

.ds-dashboard-customize-options {
    display: grid;
    gap: .4rem;
}

.ds-dashboard-customize-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 2.75rem;
    padding: .55rem .7rem;
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface-muted);
    cursor: pointer;
}

.ds-dashboard-customize-option > span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: .82rem;
    font-weight: 600;
}

.ds-dashboard-customize-option > span i {
    color: var(--ds-text-tertiary);
}

@media (max-width: 1199.98px) {
    .ds-dashboard-grid--priority,
    .ds-dashboard-grid--analytics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-dashboard-grid--priority > [data-dashboard-size="featured"] {
        grid-column: span 2;
        grid-row: auto;
    }
}

@media (max-width: 767.98px) {
    .ds-dashboard {
        gap: 1.15rem;
        padding: .85rem;
    }

    .ds-dashboard-section__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .ds-dashboard-grid--priority,
    .ds-dashboard-grid--analytics {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-dashboard-grid--priority > [data-dashboard-size="featured"] {
        grid-column: span 1;
    }

    .ds-dashboard-card--analytics {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .ds-dashboard-alert-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-dashboard-date-range {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-dashboard-date-separator {
        display: none;
    }

    .ds-dashboard-date-range .form-control,
    .ds-dashboard-filter__actions .btn,
    .ds-dashboard-inline-link {
        min-height: 2.5rem;
    }

    .ds-dashboard-inline-link {
        margin-left: 0;
        padding-inline: .35rem;
    }

    .ds-dashboard-section__hint {
        font-size: .72rem;
    }
}

@media (prefers-color-scheme: dark) {
    .ds-dashboard {
        background: rgba(21, 25, 31, .72);
    }

    .ds-dashboard-card {
        box-shadow: 0 10px 26px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .045);
    }
}

.ds-report-progress { min-width: 120px; max-width: 320px; height: 10px; }
.ds-report-platform-block { overflow: hidden; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface-solid); }
.ds-report-platform-title { margin: 0; padding: .65rem 1rem; border-bottom: 1px solid var(--ds-border); background: var(--ds-blue-soft); }
.ds-dash-filter-panel { border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface-muted); }
.ds-dash-footnote { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ds-border); }

.ds-error-page main.ds-app-main { display: grid; min-height: calc(100vh - 2rem); place-items: center; }
.ds-error-page main.ds-app-main > .card { width: min(100%, 620px); }

/* Reusable layout utilities retained for existing Thymeleaf views. */
.ds-page { padding: 1.25rem 1rem; }
.ds-page--wide { width: 100%; max-width: var(--ds-content-max); margin-inline: auto; }
.ds-page--narrow, .ds-page--form { width: 100%; max-width: 980px; margin-inline: auto; }
.ds-page--auth { width: 100%; max-width: 420px; margin-inline: auto; }
.ds-table-nowrap :is(th, td) { white-space: nowrap; }
.ds-table-compact { line-height: 1.2; }
.ds-table-compact > :not(caption) > * > * { padding-block: .4rem; }
.ds-cell-ellipsis { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ds-cell-ellipsis--xs { max-width: 120px; }
.ds-cell-ellipsis--sm { max-width: 180px; }
.ds-cell-ellipsis--md { max-width: 260px; }
.ds-cell-ellipsis--lg { max-width: 360px; }
.ds-field-filter-grid { --bs-gutter-x: .75rem; --bs-gutter-y: .65rem; }
.ds-field-filter-grid .form-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-field-filter-grid :is(.form-control-sm, .form-select-sm) { min-width: 0; }
.ds-data-table, .ds-report-settings-table { width: max-content; min-width: 100%; }
.ds-report-settings-table :is(th, td) { vertical-align: middle; }
.ds-report-settings-table td .ds-cell-ellipsis { max-width: 12rem; }

.badge-priority-URGENT, .badge-priority-P0 { color: #a72d26 !important; border-color: rgba(199,53,45,.22); background: var(--ds-red-soft) !important; }
.badge-priority-HIGH, .badge-priority-P1 { color: #9a4e00 !important; border-color: rgba(200,100,0,.22); background: var(--ds-orange-soft) !important; }
.badge-priority-MEDIUM, .badge-priority-P2 { color: #8a5d00 !important; border-color: rgba(166,111,0,.22); background: var(--ds-yellow-soft) !important; }
.badge-priority-P3 { color: #075fb6 !important; border-color: rgba(10,110,209,.2); background: var(--ds-blue-soft) !important; }
.badge-priority-LOW, .badge-priority-P4 { color: var(--ds-text-secondary) !important; border-color: var(--ds-border); background: var(--ds-surface-muted) !important; }
[class*="priority-field-"] { padding-left: .65rem; border-left: 3px solid var(--ds-border-strong); border-radius: .2rem; }
.priority-field-P0, .priority-field-URGENT { border-left-color: var(--ds-red); }
.priority-field-P1, .priority-field-HIGH { border-left-color: var(--ds-orange); }
.priority-field-P2, .priority-field-MEDIUM { border-left-color: var(--ds-yellow); }
.priority-field-P3 { border-left-color: var(--ds-blue); }
.priority-field-P4, .priority-field-LOW { border-left-color: var(--ds-text-tertiary); }

/* Report navigation inside a page follows the same source-list hierarchy. */
.ds-report-sidebar .card { overflow: hidden; }
.ds-report-sidebar .card-header { padding-bottom: .35rem; border-bottom: 0; background: transparent !important; }
.ds-report-sidebar-hd__label { margin: 0; padding: .2rem 0 .35rem .65rem; color: var(--ds-text-secondary); border-left: 3px solid var(--ds-blue); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ds-report-list-item { border-left: 3px solid transparent !important; transition: color 150ms ease, background-color 160ms ease, border-color 160ms ease; }
.ds-report-list-item.active { color: var(--ds-text) !important; border-left-color: var(--ds-blue) !important; background: var(--ds-blue-soft) !important; }
.ds-report-item-title { color: var(--ds-text); font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.ds-report-item-desc { margin-top: .2rem; color: var(--ds-text-secondary); font-size: .8125rem; line-height: 1.4; }

/* Permission management is a shared dense tree/detail component. */
.permission-panel { overflow: hidden; }
.permission-group-title { color: var(--ds-text-secondary); background: var(--ds-surface-muted); }
.permission-group-title strong::before { color: var(--ds-text-tertiary); content: "↳ "; }
.permission-module-row { display: grid; grid-template-columns: minmax(170px, 22%) 1fr; }
.permission-module-name { border-right: 1px solid var(--ds-border); background: var(--ds-surface-solid); }
.permission-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .35rem .8rem; align-items: start; }
.permission-item { display: flex; padding: .3rem .4rem; align-items: flex-start; gap: .45rem; border-radius: .42rem; }
.permission-code { font-size: .68rem; white-space: normal; word-break: break-all; }
.claim-settings { grid-column: 1 / -1; }
.claim-step { min-width: 0; }
.claim-step-title { float: none; width: auto; margin: 0 0 .65rem; font-size: .9rem; font-weight: 600; }
.claim-step-number { display: inline-flex; width: 1.45rem; height: 1.45rem; margin-right: .3rem; align-items: center; justify-content: center; color: #fff; border-radius: 50%; background: var(--ds-blue); font-size: .78rem; }
.claim-option-card { display: flex; margin: 0; padding: .7rem .8rem; align-items: flex-start; gap: .65rem; border: 1px solid var(--ds-border); border-radius: .62rem; background: var(--ds-surface-solid); cursor: pointer; transition: color 150ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.claim-option-card.is-selected { border-color: var(--ds-blue); background: var(--ds-blue-soft); box-shadow: 0 0 0 1px rgba(10,110,209,.1); }
.claim-option-card.is-disabled { cursor: not-allowed; opacity: .62; background: var(--ds-surface-muted); }
.claim-option-card .form-check-input { flex: 0 0 auto; margin-top: .2rem; }
.claim-option-title { display: block; color: var(--ds-text); font-size: .88rem; font-weight: 600; }
.claim-option-description { display: block; margin-top: .15rem; color: var(--ds-text-secondary); font-size: .76rem; line-height: 1.45; }
.role-permission-column { width: 220px; min-width: 220px; }
.role-permission-summary { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.role-permission-count { min-width: 92px; font-weight: 500; }
.role-permission-detail-category { overflow: hidden; border: 1px solid var(--ds-border); border-radius: .62rem; background: var(--ds-surface-solid); }
.role-permission-detail-category-title { padding: .75rem 1rem; cursor: pointer; background: var(--ds-surface-muted); font-weight: 600; user-select: none; }
.role-permission-detail-category[open] .role-permission-detail-category-title { border-bottom: 1px solid var(--ds-border); }
.role-permission-detail-group-title { display: flex; margin: .55rem 0 .15rem; padding: .45rem .6rem; align-items: center; justify-content: space-between; gap: .5rem; color: var(--ds-text-secondary); border-radius: .48rem; background: var(--ds-surface-muted); font-size: .86rem; font-weight: 600; }
.role-permission-detail-module { padding: .75rem 0; border-bottom: 1px solid var(--ds-border); }
.role-permission-detail-module:last-child { border-bottom: 0; }
.role-permission-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: .5rem; }
.role-permission-detail-item { min-width: 0; padding: .55rem .65rem; border: 1px solid var(--ds-border); border-radius: .48rem; background: var(--ds-surface); }
.role-permission-detail-label { display: block; font-size: .82rem; font-weight: 600; }
.role-permission-detail-code { display: block; margin-top: .15rem; color: var(--ds-text-secondary); font-size: .68rem; overflow-wrap: anywhere; white-space: normal; }

/* Compact user list remains a reusable fixed-layout table, not a page theme. */
#adminUserCompactTable { width: 100%; min-width: 930px; table-layout: fixed; }
#adminUserCompactTable :is(th, td) { overflow: hidden; vertical-align: middle; }
#adminUserCompactTable th { white-space: nowrap; }
#adminUserCompactTable .user-select-col { width: 40px; }
#adminUserCompactTable .user-username-col { width: 100px; }
#adminUserCompactTable .user-display-name-col { width: 96px; }
#adminUserCompactTable .user-group-col { width: 92px; }
#adminUserCompactTable .user-role-col { width: 142px; }
#adminUserCompactTable .user-permission-col { width: 190px; }
#adminUserCompactTable .user-state-col { width: 80px; }
#adminUserCompactTable .user-updated-col { width: 142px; }
#adminUserCompactTable .user-operation-col { width: 75px; }
#adminUserCompactTable .user-cell-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#adminUserCompactTable .user-detail-button { padding: .2rem .45rem; white-space: nowrap; }
#adminUserCompactTable .user-role-summary, #adminUserCompactTable .user-permission-actions { display: flex; min-width: 0; align-items: center; gap: .3rem; overflow: hidden; white-space: nowrap; }
#adminUserCompactTable .user-role-chip { display: inline-block; max-width: 48px; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#adminUserCompactTable .user-role-more, #adminUserCompactTable .user-no-role { flex: 0 0 auto; }
#adminUserCompactTable .user-permission-badge { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-operation-menu-portal { z-index: 1085; max-height: calc(100vh - 1rem); overflow-y: auto; }

/* Unified asynchronous import drawer, shared by every importing module. */
.ds-import-task-button { display: inline-flex; width: 100%; min-height: 38px; margin-bottom: .55rem; align-items: center; justify-content: center; border-radius: var(--ds-radius-sm); }
.ds-import-task-button.is-inline { width: auto; min-height: 0; margin-bottom: 0; flex: 0 0 auto; }
.ds-import-task-drawer { position: fixed; inset: .5rem .5rem .5rem auto; z-index: 1080; display: flex; visibility: hidden; width: min(440px, calc(100vw - 1rem)); flex-direction: column; color: var(--ds-text); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-lg); background: var(--ds-glass); box-shadow: var(--ds-shadow-float), inset 0 1px var(--ds-highlight); backdrop-filter: blur(26px) saturate(145%); -webkit-backdrop-filter: blur(26px) saturate(145%); opacity: 0; pointer-events: none; transform: translateX(calc(100% + 1rem)); transition: transform 180ms var(--ds-ease), opacity 160ms ease, visibility 0s linear 180ms; }
.ds-import-task-drawer.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0); transition: transform 180ms var(--ds-ease), opacity 160ms ease, visibility 0s linear 0s; }
.ds-import-task-backdrop { position: fixed; inset: 0; z-index: 1070; display: block; visibility: hidden; border: 0; background: rgba(10,14,20,.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 170ms ease, visibility 0s linear 170ms; }
.ds-import-task-backdrop.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 170ms ease, visibility 0s linear 0s; }
.ds-import-task-list { min-height: 0; padding: .75rem; overflow-y: auto; flex: 1; }
.ds-import-task-card { margin-bottom: .65rem; padding: .75rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface); }
.ds-import-task-card:last-child { margin-bottom: 0; }
.ds-import-task-title { min-width: 0; font-weight: 650; }
.ds-import-task-file { overflow: hidden; color: var(--ds-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.ds-import-task-progress { height: .55rem; }
.ds-import-task-indeterminate .progress-bar { width: 38%; animation: ds-import-task-slide 1.1s ease-in-out infinite alternate; }
@keyframes ds-import-task-slide { from { margin-left: 0; } to { margin-left: 62%; } }

@media (hover: hover) and (pointer: fine) {
    .table-hover > tbody > tr:hover > * { background: rgba(10, 110, 209, .052); }
    .ds-dashboard-drag-handle:hover { color: var(--ds-dashboard-accent); border-color: var(--ds-border); background: var(--ds-dashboard-accent-soft); opacity: 1; }
    .ds-dashboard-alert-row:hover { color: var(--ds-blue); border-color: rgba(10, 110, 209, .24); background: var(--ds-blue-soft); }
    .ds-dashboard-card__link:hover { color: var(--ds-dashboard-accent); background: var(--ds-dashboard-accent-soft); }
    .ds-dashboard-inline-link:hover { color: var(--ds-blue-hover); text-decoration: underline; }
    .table a:not(.btn):hover, .ds-login-help a:hover, .ds-captcha-refresh a:hover { text-decoration: underline; }
    .permission-item:hover, .claim-option-card:hover { border-color: rgba(10,110,209,.24); background: var(--ds-blue-soft); }
    .ds-report-list-item:not(.active):hover { background: rgba(10,110,209,.055) !important; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --ds-bg: #11151a;
        --ds-bg-deep: #0c1015;
        --ds-surface: rgba(28, 34, 42, .96);
        --ds-surface-solid: #1d232b;
        --ds-surface-muted: #242b34;
        --ds-surface-subtle: rgba(36, 43, 52, .88);
        --ds-glass: rgba(27, 33, 42, .88);
        --ds-text: #f3f5f8;
        --ds-text-secondary: #b1b8c3;
        --ds-text-tertiary: #838d9b;
        --ds-border: rgba(224, 231, 241, .11);
        --ds-border-strong: rgba(224, 231, 241, .18);
        --ds-action-blue-ink: #75b6f6;
        --ds-action-blue-fill: rgba(10, 110, 209, .2);
        --ds-action-blue-line: rgba(117, 182, 246, .32);
        --ds-action-green-ink: #72d5a3;
        --ds-action-green-fill: rgba(25, 135, 84, .2);
        --ds-action-green-line: rgba(114, 213, 163, .32);
        --ds-action-purple-ink: #b6a0f0;
        --ds-action-purple-fill: rgba(118, 86, 200, .21);
        --ds-action-purple-line: rgba(182, 160, 240, .32);
        --ds-action-orange-ink: #efbd67;
        --ds-action-orange-fill: rgba(200, 100, 0, .21);
        --ds-action-orange-line: rgba(239, 189, 103, .34);
        --ds-action-red-ink: #f08c85;
        --ds-action-red-fill: rgba(199, 53, 45, .2);
        --ds-action-red-line: rgba(240, 140, 133, .32);
        --ds-highlight: rgba(255, 255, 255, .055);
        --ds-shadow-workbench: 0 26px 68px rgba(0, 0, 0, .4);
        --ds-shadow-float: 0 24px 60px rgba(0, 0, 0, .48);
        --ds-shadow-control: 0 4px 12px rgba(0, 0, 0, .2);
    }

    body {
        background:
            radial-gradient(circle at 8% -12%, rgba(24, 62, 104, .5), transparent 31rem),
            radial-gradient(circle at 102% 106%, rgba(91, 62, 31, .28), transparent 36rem),
            linear-gradient(145deg, var(--ds-bg-deep), #171d24 56%, #10151b) fixed !important;
    }

    .alert-success { color: #75d8a6; }
    .alert-warning { color: #efbd67; }
    .alert-danger { color: #f08c85; }
    .alert-info { color: #7fbbf7; }
    .badge.bg-success, .ds-status-success { color: #72d5a3 !important; }
    .badge.bg-danger, .ds-status-danger { color: #ef8a83 !important; }
    .badge.bg-warning, .ds-status-warning { color: #e9b35b !important; }
    .badge.bg-primary, .badge.bg-info, .ds-status-progress { color: #75b6f6 !important; }
    .ds-status-transfer { color: #b6a0f0 !important; }
    .btn-close { filter: invert(1) grayscale(100%) brightness(180%); }
}

@media (max-width: 991.98px) {
    main.ds-page,
    body.ds-has-sidebar main.ds-app-main {
        padding: 4rem .75rem 1rem !important;
    }

    main.ds-page--list {
        margin: .5rem;
        padding-top: 0 !important;
    }

    .ds-list-toolbar { flex-wrap: nowrap; }
    .ds-list-toolbar__end { margin-left: auto; }
    .form-control, .form-select, .btn { min-height: 40px; }
}

@media (max-width: 575.98px) {
    main.ds-page--list > header,
    main.ds-page--list > .d-flex:first-child {
        padding: .8rem;
    }

    .table thead th, .table tbody td { padding-inline: .58rem; }

    .ds-list-more__menu {
        position: fixed !important;
        inset: auto .5rem calc(.5rem + env(safe-area-inset-bottom)) .5rem !important;
        width: auto;
        max-height: min(78vh, 40rem);
        margin: 0 !important;
        border-radius: 1.25rem;
        transform: translateY(1rem) scale(.99) !important;
        transform-origin: center bottom;
    }

    .ds-list-more__menu.show {
        transform: translateY(0) scale(1) !important;
    }

    .ds-list-more__actions { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .permission-module-row { grid-template-columns: 1fr; }
    .permission-module-name { border-right: 0; border-bottom: 1px solid var(--ds-border); }
    .role-permission-column { width: 180px; min-width: 180px; }
    .role-permission-detail-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }

    .btn, .table tbody tr, .ds-dashboard-card, .ds-dashboard-drag-handle {
        transition-duration: .01ms !important;
    }

    .btn:active:not(:disabled) {
        transform: none !important;
    }

    .ds-dashboard-card.ds-dragging,
    .ds-dashboard-drag-handle:active {
        transform: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root { --ds-surface: var(--ds-surface-solid); --ds-glass: var(--ds-surface-solid); }
    .ds-list-pagination { background: var(--ds-surface-solid); }
    .dropdown-menu, .modal-content, .offcanvas, .ds-floating-panel, .ds-form-actions-sticky {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .ds-dashboard { background: var(--ds-surface-muted); }
}

@media (prefers-contrast: more) {
    :root { --ds-border: currentColor; --ds-border-strong: currentColor; }
    .card, .ds-panel, .dropdown-menu, .modal-content, .offcanvas, .form-control, .form-select, .btn,
    .ds-dashboard-card, .ds-dashboard-alert-row, .ds-dashboard-customize-option {
        border-width: 2px;
    }
    :focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px !important; }
}

/* Shared Apple-style sidebar: the single navigation surface used across the application. */
body.ds-has-sidebar {
    --ds-shell-edge-gap: 10px;
    --ds-sidebar-width: 212px;
    --ds-sidebar-gutter: var(--ds-shell-edge-gap);
    --ds-sidebar-layout-width: 232px;
    --ds-sidebar-bg: rgba(242, 246, 251, .82);
    --ds-sidebar-bg-solid: #f1f5fa;
    --ds-sidebar-surface: rgba(255, 255, 255, .7);
    --ds-sidebar-surface-strong: rgba(255, 255, 255, .88);
    --ds-sidebar-tree-line: rgba(79, 94, 114, .2);
    --ds-sidebar-tree-line-nested: rgba(79, 94, 114, .13);
    --ds-sidebar-text: #1b2028;
    --ds-sidebar-muted: #606a78;
    --ds-sidebar-faint: #8791a0;
    --ds-sidebar-accent: #0a6ed1;
    --ds-sidebar-accent-soft: rgba(10, 110, 209, .1);
    --ds-sidebar-line: rgba(56, 67, 82, .12);
    --ds-sidebar-line-bright: rgba(255, 255, 255, .76);
    --ds-sidebar-shadow: 0 18px 44px rgba(33, 45, 61, .12);
    --ds-sidebar-ease: cubic-bezier(.23, 1, .32, 1);
    padding-left: var(--ds-sidebar-layout-width);
    transition: padding-left 200ms var(--ds-sidebar-ease);
}

@media (min-width: 992px) {
    body.ds-has-sidebar {
        padding-top: var(--ds-shell-edge-gap);
    }
}

body.ds-sidebar-collapsed.ds-has-sidebar {
    padding-left: 0;
}

.ds-sidebar-nav {
    position: fixed;
    inset: var(--ds-sidebar-gutter) auto var(--ds-sidebar-gutter) var(--ds-sidebar-gutter);
    z-index: 1040;
    display: block !important;
    width: var(--ds-sidebar-width);
    padding: .8rem .7rem 1rem;
    overflow: visible;
    color: var(--ds-sidebar-text);
    border: 1px solid var(--ds-sidebar-line-bright);
    border-radius: 20px;
    background: var(--ds-sidebar-bg) !important;
    box-shadow: var(--ds-sidebar-shadow), inset 0 1px rgba(255, 255, 255, .72);
    backdrop-filter: blur(30px) saturate(145%);
    -webkit-backdrop-filter: blur(30px) saturate(145%);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-optical-sizing: auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    transition: transform 200ms var(--ds-sidebar-ease), opacity 160ms ease;
}

.ds-sidebar-nav > .container-fluid {
    display: flex !important;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-width: none !important;
    margin-inline: 0 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    justify-content: flex-start;
}

.ds-sidebar-nav #navMain {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.ds-sidebar-collapsed .ds-sidebar-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(-100% - var(--ds-sidebar-gutter)));
}

.ds-sidebar-brand {
    display: flex;
    min-width: 0;
    min-height: 2.85rem;
    margin: 0 0 .72rem;
    padding: .22rem .3rem .78rem;
    align-items: center;
    gap: .62rem;
    overflow: hidden;
    color: var(--ds-sidebar-text) !important;
    border-bottom: 1px solid var(--ds-sidebar-line);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-sidebar-brand::before {
    content: "◈";
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .56);
    border-radius: .68rem;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .38), transparent 45%),
        linear-gradient(145deg, #4b98ea, #0961bf);
    box-shadow: 0 7px 18px rgba(18, 92, 173, .22), inset 0 1px rgba(255, 255, 255, .38);
    font-size: .86rem;
}

.ds-sidebar-nav .navbar-nav {
    width: 100%;
    min-height: 0;
    margin-bottom: 0;
    padding: 0 0 .3rem;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    flex-direction: column !important;
    gap: .2rem;
    scrollbar-color: rgba(96, 106, 120, .3) transparent;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.ds-sidebar-nav .navbar-nav::-webkit-scrollbar {
    width: 5px;
}

.ds-sidebar-nav .navbar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(96, 106, 120, .28);
}

.ds-sidebar-nav .nav-link,
.ds-sidebar-nav .dropdown-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .45rem;
    color: var(--ds-sidebar-muted) !important;
    border: 0;
    border-radius: .72rem;
    background: transparent !important;
    font-size: .875rem;
    line-height: 1.25;
    text-decoration: none;
    transition: color 150ms ease, background-color 170ms ease, transform 130ms var(--ds-sidebar-ease), box-shadow 170ms ease;
}

.ds-sidebar-nav .nav-link {
    min-height: 2.45rem;
    margin: 0 !important;
    padding: .5rem .62rem !important;
    justify-content: space-between;
}

.ds-sidebar-nav .dropdown-item {
    min-height: 2.18rem;
    padding: .44rem .54rem;
}

.ds-sidebar-nav .ds-nav-label {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .48rem;
}

.ds-sidebar-nav .ds-nav-label > span:last-child,
.ds-sidebar-nav .dropdown-item > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-sidebar-nav .ds-nav-icon {
    width: 1.05rem;
    flex: 0 0 1.05rem;
    color: currentColor;
    text-align: center;
    opacity: .82;
}

.ds-sidebar-nav .nav-link.active,
.ds-sidebar-nav .dropdown-item.active {
    color: var(--ds-sidebar-text) !important;
    background: var(--ds-sidebar-surface-strong) !important;
    box-shadow: 0 6px 16px rgba(45, 58, 74, .085), inset 0 1px rgba(255, 255, 255, .82);
    font-weight: 600;
}

.ds-sidebar-nav .nav-link.active .ds-nav-icon,
.ds-sidebar-nav .dropdown-item.active .ds-nav-icon {
    color: var(--ds-sidebar-accent);
    opacity: 1;
}

.ds-sidebar-nav .ds-submenu,
.ds-sidebar-nav .ds-submenu--nested {
    display: none;
    position: relative;
    margin: .12rem .08rem .28rem .52rem;
    padding: .04rem 0 .08rem .58rem;
    border: 0;
    border-left: 1px solid var(--ds-sidebar-tree-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ds-sidebar-nav .nav-item.is-open > .ds-submenu {
    display: block;
}

.ds-sidebar-nav .dropdown-item.ds-submenu-toggle {
    width: 100%;
    justify-content: space-between;
}

.ds-sidebar-nav .ds-submenu--nested {
    margin: .08rem 0 .18rem .66rem;
    padding: .04rem 0 .06rem .5rem;
    border-left-color: var(--ds-sidebar-tree-line-nested);
}

.ds-sidebar-nav .ds-submenu > li + li {
    margin-top: .02rem;
}

.ds-sidebar-nav .ds-submenu .dropdown-item {
    min-height: 1.98rem;
    padding: .34rem .42rem;
    border-radius: .58rem;
    font-size: .82rem;
}

.ds-sidebar-nav .ds-submenu > .nav-item > .ds-submenu-toggle {
    min-height: 2rem;
    color: var(--ds-sidebar-muted) !important;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .008em;
}

.ds-sidebar-nav .ds-submenu > .nav-item > .ds-submenu-toggle .ds-nav-icon {
    opacity: .68;
}

.ds-sidebar-nav .ds-submenu--nested .dropdown-item {
    min-height: 1.9rem;
    padding: .3rem .38rem;
    font-size: .82rem;
}

.ds-sidebar-nav .ds-submenu .dropdown-item:not(.ds-submenu-toggle) .ds-nav-icon {
    opacity: .62;
}

.ds-sidebar-nav .navbar-nav > .nav-item.is-open > .nav-link:not(.active) {
    color: var(--ds-sidebar-text) !important;
    font-weight: 580;
}

.ds-sidebar-nav .navbar-nav > .nav-item > .nav-link.ds-submenu-toggle.active {
    color: var(--ds-sidebar-text) !important;
    background: transparent !important;
    box-shadow: none;
    font-weight: 650;
}

.ds-sidebar-nav .nav-item.has-active-descendant > .ds-submenu-toggle {
    color: var(--ds-sidebar-text) !important;
    font-weight: 650;
}

.ds-sidebar-nav .nav-item.has-active-descendant > .ds-submenu-toggle .ds-nav-icon,
.ds-sidebar-nav .ds-submenu .dropdown-item.active .ds-nav-icon {
    color: var(--ds-sidebar-accent);
    opacity: 1;
}

.ds-sidebar-nav .ds-submenu .dropdown-item.active {
    position: relative;
    color: var(--ds-sidebar-text) !important;
    background: var(--ds-sidebar-surface-strong) !important;
    box-shadow: 0 3px 10px rgba(45, 58, 74, .075), inset 0 1px rgba(255, 255, 255, .72);
    font-weight: 600;
}

.ds-sidebar-nav .ds-submenu .dropdown-item.active::before {
    position: absolute;
    top: 50%;
    left: -.64rem;
    width: .18rem;
    height: .82rem;
    border-radius: 999px;
    background: var(--ds-sidebar-accent);
    content: "";
    transform: translateY(-50%);
}

.ds-sidebar-nav .ds-submenu-arrow,
.ds-sidebar-nav .ds-submenu-toggle > span:last-child:not(.ds-nav-label) {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--ds-sidebar-faint);
    transform-origin: center;
    transition: transform 180ms var(--ds-sidebar-ease), color 150ms ease;
}

.ds-sidebar-nav .nav-item.is-open > .ds-submenu-toggle .ds-submenu-arrow,
.ds-sidebar-nav .nav-item.is-open > .ds-submenu-toggle > span:last-child:not(.ds-nav-label) {
    transform: rotate(90deg);
}

.ds-sidebar-user {
    position: relative;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: .72rem;
    color: var(--ds-sidebar-muted);
    border-top: 1px solid var(--ds-sidebar-line);
}

.ds-sidebar-user .ds-import-task-button {
    width: 100%;
    margin-bottom: .45rem;
    border-color: var(--ds-sidebar-line);
    border-radius: .68rem;
    color: var(--ds-sidebar-muted);
    background: rgba(255, 255, 255, .38);
}

.ds-user-toggle {
    display: flex;
    width: 100%;
    min-height: 3.1rem;
    padding: .42rem .48rem;
    align-items: center;
    justify-content: space-between;
    color: var(--ds-sidebar-text);
    border: 1px solid var(--ds-sidebar-line);
    border-radius: .86rem;
    background: var(--ds-sidebar-surface);
    box-shadow: 0 4px 12px rgba(34, 47, 65, .065), inset 0 1px rgba(255, 255, 255, .6);
    text-align: left;
    transition: color 150ms ease, background-color 170ms ease, border-color 170ms ease, transform 130ms var(--ds-sidebar-ease);
}

.ds-user-anchor {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .52rem;
}

.ds-user-avatar {
    display: inline-flex;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 1.9rem;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .46);
    border-radius: 999px;
    background: linear-gradient(145deg, #8b74ff, #7053e8);
    box-shadow: 0 4px 10px rgba(98, 72, 205, .2), inset 0 1px rgba(255, 255, 255, .34);
    font-size: .75rem;
    font-weight: 700;
}

.ds-user-meta {
    min-width: 0;
    line-height: 1.18;
}

.ds-user-meta .ds-name {
    overflow: hidden;
    color: var(--ds-sidebar-text);
    font-size: .875rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-user-meta .ds-sub {
    color: var(--ds-sidebar-faint);
    font-size: .72rem;
}

.ds-user-toggle > .ms-2 {
    color: var(--ds-sidebar-faint);
    transition: transform 180ms var(--ds-sidebar-ease);
}

.ds-user-toggle[aria-expanded="true"] > .ms-2 {
    transform: rotate(180deg);
}

.ds-user-menu {
    position: absolute;
    inset: auto 0 calc(100% + .48rem);
    z-index: 1200;
    display: block;
    visibility: hidden;
    margin: 0;
    padding: .55rem;
    color: var(--ds-sidebar-text);
    border: 1px solid var(--ds-sidebar-line-bright);
    border-radius: .95rem;
    background: rgba(250, 252, 255, .94);
    box-shadow: 0 18px 42px rgba(27, 39, 56, .2), inset 0 1px rgba(255, 255, 255, .82);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(.3rem) scale(.985);
    transform-origin: center bottom;
    transition: opacity 160ms ease, transform 180ms var(--ds-sidebar-ease), visibility 0s linear 180ms;
}

.ds-user-menu.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 160ms ease, transform 180ms var(--ds-sidebar-ease), visibility 0s linear 0s;
}

body.ds-has-sidebar .ds-user-menu .btn,
body.ds-has-sidebar .ds-user-menu a {
    width: 100%;
    min-height: 2.2rem;
    margin-bottom: .3rem;
    border-radius: .62rem;
    box-shadow: none;
}

body.ds-has-sidebar .ds-user-menu .btn-outline-primary,
body.ds-has-sidebar .ds-user-menu .btn-outline-secondary {
    color: var(--ds-sidebar-text);
    border-color: var(--ds-sidebar-line);
    background: rgba(255, 255, 255, .32);
}

body.ds-has-sidebar .ds-user-menu .btn-primary {
    color: #fff;
    border-color: rgba(5, 84, 168, .42);
    background: linear-gradient(180deg, #2485e5, #0a6ed1);
}

body.ds-has-sidebar .ds-user-menu .btn:last-child,
body.ds-has-sidebar .ds-user-menu a:last-child {
    margin-bottom: 0;
}

.ds-password-form {
    display: none;
    margin-top: .42rem;
    padding-top: .48rem;
    border-top: 1px solid var(--ds-sidebar-line);
}

.ds-sidebar-user .text-body {
    color: var(--ds-sidebar-text) !important;
}

.ds-sidebar-toggle {
    position: fixed;
    top: 50%;
    left: .5rem;
    z-index: 1100;
    display: inline-flex;
    width: 1.75rem;
    height: 2.75rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--ds-sidebar-text);
    border: 1px solid var(--ds-sidebar-line);
    border-radius: .42rem .9rem .9rem .42rem;
    background: rgba(248, 251, 255, .72);
    box-shadow: 0 6px 16px rgba(33, 45, 61, .1), inset 0 1px rgba(255, 255, 255, .7);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    cursor: pointer;
    touch-action: manipulation;
    transform: translateY(-50%) translateX(calc(var(--ds-sidebar-width) - .75rem));
    transform-origin: center;
    will-change: transform;
    transition: transform 200ms var(--ds-sidebar-ease), color 150ms ease, background-color 160ms ease, border-color 160ms ease;
}

.ds-sidebar-toggle::before {
    position: absolute;
    inset: -.5rem;
    content: "";
}

.ds-sidebar-toggle__icon {
    position: relative;
    z-index: 1;
    font-size: .82rem;
    line-height: 1;
    transition: transform 180ms var(--ds-sidebar-ease);
}

.ds-sidebar-collapsed .ds-sidebar-toggle {
    transform: translateY(-50%) translateX(0);
}

.ds-sidebar-collapsed .ds-sidebar-toggle__icon {
    transform: rotate(180deg);
}

.ds-sidebar-toggle:active {
    transform: translateY(-50%) translateX(calc(var(--ds-sidebar-width) - .75rem)) scale(.94);
}

.ds-sidebar-collapsed .ds-sidebar-toggle:active {
    transform: translateY(-50%) translateX(0) scale(.94);
}

.ds-mobile-menu-button,
.ds-mobile-sidebar-backdrop {
    display: none;
}

.ds-sidebar-nav .nav-link:active,
.ds-sidebar-nav .dropdown-item:active,
.ds-user-toggle:active,
.ds-mobile-menu-button:active {
    transform: scale(.97);
}

.ds-sidebar-nav .nav-link:focus-visible,
.ds-sidebar-nav .dropdown-item:focus-visible,
.ds-user-toggle:focus-visible,
.ds-user-menu :is(a, button, input):focus-visible,
.ds-sidebar-toggle:focus-visible,
.ds-mobile-menu-button:focus-visible {
    outline: 3px solid rgba(10, 110, 209, .3);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .ds-sidebar-nav .nav-link:hover,
    .ds-sidebar-nav .dropdown-item:hover {
        color: var(--ds-sidebar-text) !important;
        background: rgba(255, 255, 255, .48) !important;
    }

    .ds-sidebar-nav .nav-link.active:hover,
    .ds-sidebar-nav .dropdown-item.active:hover {
        background: var(--ds-sidebar-surface-strong) !important;
    }

    .ds-sidebar-nav .navbar-nav > .nav-item > .nav-link.ds-submenu-toggle.active:hover {
        background: rgba(255, 255, 255, .42) !important;
    }

    .ds-user-toggle:hover,
    .ds-sidebar-user .ds-import-task-button:hover,
    .ds-sidebar-toggle:hover,
    .ds-mobile-menu-button:hover {
        color: var(--ds-sidebar-text);
        border-color: rgba(10, 110, 209, .2);
        background: rgba(255, 255, 255, .78);
    }
}

@media (prefers-color-scheme: dark) {
    body.ds-has-sidebar {
        --ds-sidebar-bg: rgba(19, 24, 31, .84);
        --ds-sidebar-bg-solid: #151b23;
        --ds-sidebar-surface: rgba(67, 75, 87, .52);
        --ds-sidebar-surface-strong: rgba(74, 83, 96, .68);
        --ds-sidebar-tree-line: rgba(205, 216, 230, .2);
        --ds-sidebar-tree-line-nested: rgba(205, 216, 230, .12);
        --ds-sidebar-text: #f3f5f8;
        --ds-sidebar-muted: #aab2bf;
        --ds-sidebar-faint: #818c9c;
        --ds-sidebar-accent: #4a9cf5;
        --ds-sidebar-accent-soft: rgba(74, 156, 245, .15);
        --ds-sidebar-line: rgba(223, 231, 242, .11);
        --ds-sidebar-line-bright: rgba(255, 255, 255, .1);
        --ds-sidebar-shadow: 0 20px 48px rgba(0, 0, 0, .32);
    }

    .ds-sidebar-nav {
        box-shadow: var(--ds-sidebar-shadow), inset 0 1px rgba(255, 255, 255, .045);
    }

    .ds-sidebar-brand::before {
        border-color: rgba(255, 255, 255, .14);
        background:
            linear-gradient(150deg, rgba(255, 255, 255, .16), transparent 45%),
            linear-gradient(145deg, #55a2f7, #1971cd);
        box-shadow: 0 7px 18px rgba(12, 84, 162, .3), inset 0 1px rgba(255, 255, 255, .2);
    }

    .ds-sidebar-nav .nav-link.active,
    .ds-sidebar-nav .dropdown-item.active,
    .ds-user-toggle {
        box-shadow: 0 6px 16px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .07);
    }

    .ds-sidebar-nav .ds-submenu--nested {
        background: rgba(34, 40, 49, .8);
    }

    .ds-user-menu {
        border-color: var(--ds-sidebar-line-bright);
        background: rgba(24, 30, 39, .95);
        box-shadow: 0 20px 48px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .05);
    }

    .ds-user-menu .form-control {
        color: var(--ds-sidebar-text);
        border-color: var(--ds-sidebar-line);
        background: rgba(255, 255, 255, .07);
    }

    .ds-sidebar-toggle,
    .ds-mobile-menu-button {
        background: rgba(31, 38, 48, .86);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .055);
    }

    @media (hover: hover) and (pointer: fine) {
        .ds-sidebar-nav .nav-link:hover,
        .ds-sidebar-nav .dropdown-item:hover,
        .ds-user-toggle:hover,
        .ds-sidebar-user .ds-import-task-button:hover,
        .ds-sidebar-toggle:hover,
        .ds-mobile-menu-button:hover {
            background: rgba(255, 255, 255, .08) !important;
        }

        .ds-sidebar-nav .nav-link.active:hover,
        .ds-sidebar-nav .dropdown-item.active:hover {
            background: var(--ds-sidebar-surface-strong) !important;
        }

        .ds-sidebar-nav .navbar-nav > .nav-item > .nav-link.ds-submenu-toggle.active:hover {
            background: rgba(255, 255, 255, .07) !important;
        }
    }
}

@media (max-width: 991.98px) {
    body.ds-has-sidebar,
    body.ds-sidebar-collapsed.ds-has-sidebar {
        padding-left: 0;
    }

    body.ds-has-sidebar main {
        max-width: 100%;
        padding-top: 4rem !important;
        padding-right: .75rem !important;
        padding-left: .75rem !important;
    }

    body:not(.ds-mobile-sidebar-open) .ds-sidebar-nav,
    body.ds-mobile-sidebar-open .ds-sidebar-nav {
        position: fixed !important;
        inset: .5rem auto .5rem .5rem !important;
        z-index: 1061 !important;
        width: min(21rem, calc(100vw - 1rem)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 1rem);
        margin: 0;
        overflow: visible !important;
        border: 1px solid var(--ds-sidebar-line-bright) !important;
        border-radius: 1.1rem;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(calc(-100% - 1rem)) !important;
        transition: transform 220ms var(--ds-sidebar-ease), opacity 180ms ease !important;
    }

    body.ds-mobile-sidebar-open .ds-sidebar-nav {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }

    .ds-mobile-menu-button {
        position: fixed;
        top: .65rem;
        left: .65rem;
        z-index: 1062;
        display: inline-flex;
        width: 2.6rem;
        height: 2.6rem;
        padding: 0;
        align-items: center;
        justify-content: center;
        color: var(--ds-sidebar-text);
        border: 1px solid var(--ds-sidebar-line);
        border-radius: .78rem;
        background: rgba(248, 251, 255, .84);
        box-shadow: 0 8px 22px rgba(33, 45, 61, .14), inset 0 1px rgba(255, 255, 255, .72);
        backdrop-filter: blur(20px) saturate(135%);
        -webkit-backdrop-filter: blur(20px) saturate(135%);
        transition: color 150ms ease, background-color 160ms ease, transform 130ms var(--ds-sidebar-ease);
    }

    .ds-mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1060;
        display: block;
        padding: 0;
        border: 0;
        background: rgba(10, 14, 20, .3);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    body.ds-mobile-sidebar-open .ds-mobile-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    body.ds-mobile-sidebar-open {
        overflow: hidden;
    }

    .ds-sidebar-toggle {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ds-has-sidebar,
    .ds-sidebar-nav,
    .ds-sidebar-nav .nav-link,
    .ds-sidebar-nav .dropdown-item,
    .ds-sidebar-nav .ds-submenu-arrow,
    .ds-sidebar-nav .ds-submenu-toggle > span:last-child:not(.ds-nav-label),
    .ds-user-toggle,
    .ds-user-toggle > .ms-2,
    .ds-user-menu,
    .ds-sidebar-toggle,
    .ds-mobile-menu-button,
    .ds-mobile-sidebar-backdrop {
        transition-duration: .01ms !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .ds-sidebar-nav,
    .ds-user-menu,
    .ds-sidebar-toggle,
    .ds-mobile-menu-button {
        background: var(--ds-sidebar-bg-solid) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ds-mobile-sidebar-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    body.ds-has-sidebar {
        --ds-sidebar-line: currentColor;
        --ds-sidebar-line-bright: currentColor;
    }

    .ds-sidebar-nav,
    .ds-user-toggle,
    .ds-user-menu,
    .ds-sidebar-toggle,
    .ds-mobile-menu-button {
        border-width: 2px !important;
    }

    .ds-sidebar-nav .nav-link.active,
    .ds-sidebar-nav .dropdown-item.active {
        outline: 2px solid currentColor;
        outline-offset: -2px;
    }

    .ds-sidebar-nav .ds-submenu,
    .ds-sidebar-nav .ds-submenu--nested {
        border-left-color: currentColor;
    }

    .ds-sidebar-nav .ds-submenu .dropdown-item.active::before {
        background: currentColor;
    }
}

.ds-saved-view-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin: 0 0 .75rem;
    padding: .55rem .7rem;
    border: 1px solid var(--ds-win-border, #dee2e6);
    border-radius: .65rem;
    background: rgba(255, 255, 255, .88);
}
.ds-saved-view-bar select { width: min(260px, 55vw); }
.ds-saved-view-status { min-height: 1.25rem; color: #5f6368; font-size: .8rem; }
.ds-saved-view-bar--menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.ds-saved-view-bar--menu > .small:first-child,
.ds-saved-view-bar--menu > select,
.ds-saved-view-bar--menu > [data-action="delete"],
.ds-saved-view-bar--menu > .ds-saved-view-status {
    grid-column: 1 / -1;
}
.ds-saved-view-bar--menu > .small:first-child { display: none; }
.ds-saved-view-bar--menu > select {
    width: 100%;
    max-width: none;
}
.ds-saved-view-bar--menu > .btn { width: 100%; }
.ds-saved-view-bar--menu > [data-action="delete"] { margin-top: .1rem; }
.ds-saved-view-bar--menu > .ds-saved-view-status:empty { display: none; }
.ds-column-modal .modal-dialog { max-width: 540px; }
.ds-column-modal-list {
    max-height: min(480px, 58vh);
    overflow-y: auto;
    padding-right: .25rem;
}
.ds-column-modal-list .form-check {
    margin-bottom: .4rem;
    padding-block: .15rem;
}
.ds-form-section-title {
    margin: 1.15rem 0 .8rem;
    padding: .55rem .75rem;
    border-left: 4px solid var(--ds-accent, #0d6efd);
    border-bottom: 1px solid #e6e9ee;
    border-radius: .25rem;
    background: #f8fafc;
    color: #334155;
    font-size: .98rem;
    font-weight: 650;
}
.ds-form-section-title:first-of-type { margin-top: 0; }
.ds-wide-table-wrap {
    position: relative;
    background: linear-gradient(to right, transparent 95%, rgba(0, 0, 0, .08));
}
.ds-wide-table-wrap::after {
    content: "表格可左右滚动";
    position: sticky;
    left: 100%;
    bottom: .25rem;
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: rgba(33, 37, 41, .72);
    color: #fff;
    font-size: .72rem;
    pointer-events: none;
    opacity: .72;
}
.ds-wide-table th.ds-sticky-select,
.ds-wide-table td.ds-sticky-select {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: var(--ds-win-surface, #fff);
    background-clip: padding-box;
    box-shadow: 2px 0 0 rgba(0,0,0,.06);
}
.ds-wide-table thead th.ds-sticky-select {
    z-index: 4;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}
.ds-wide-table.table-hover > tbody > tr:hover > td.ds-sticky-select {
    background-color: #f2f4f7;
}
.ds-mobile-filter-toggle { display: none; }

/* Explicit shared page skeleton. Templates select a page type server-side; the
   browser no longer infers or rebuilds the outer layout. */
main.ds-page {
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0 var(--ds-shell-edge-gap, .625rem) var(--ds-shell-edge-gap, .625rem) 0 !important;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body:not(.ds-has-sidebar) main.ds-page {
    padding: var(--ds-shell-edge-gap, .625rem) !important;
}

.ds-page > .ds-workbench {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    overflow: hidden;
    color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-workbench), inset 0 1px var(--ds-highlight);
}

.ds-page > .ds-workbench > * { order: 2; }
.ds-page > .ds-workbench > .ds-page-heading,
.ds-page > .ds-workbench > .ds-list-heading { order: 0; }
.ds-page > .ds-workbench > .alert,
.ds-page > .ds-workbench > .ds-page-notices { order: 1; }
.ds-page > .ds-workbench > .ds-page-footer,
.ds-page > .ds-workbench > .ds-list-pagination { order: 4; }

.ds-page--list > .ds-workbench {
    max-width: none;
    overflow: visible;
}

.ds-page--form > .ds-workbench { max-width: 72rem; }
.ds-page--detail > .ds-workbench { max-width: 76rem; }
.ds-page--hub > .ds-workbench { max-width: 90rem; }
.ds-page--dashboard > .ds-workbench {
    max-width: none;
    min-height: calc(100vh - 1.25rem);
}
.ds-page--auth > .ds-workbench { max-width: 62rem; }
.ds-page--error > .ds-workbench { max-width: 38.75rem; }

.ds-workbench > .ds-page-heading,
.ds-workbench > .ds-list-heading {
    min-height: 4.35rem;
    margin: 0 !important;
    padding: 1rem 1.1rem !important;
    border-bottom: 1px solid var(--ds-border);
}

.ds-workbench > .ds-page-notices {
    padding: .65rem 1rem 0;
}

.ds-workbench > .ds-page-notices .alert {
    margin: 0 0 .65rem;
}

.ds-page--error .ds-page-heading {
    justify-content: center;
    text-align: center;
}

.ds-workbench > .alert {
    margin: .65rem 1rem 0;
}

.ds-page--list .ds-list-panel,
.ds-page--list .ds-workbench > .card,
.ds-page--list .ds-workbench > .table-responsive,
.ds-page--list .ds-workbench > details,
.ds-page--list .ds-workbench > nav {
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ds-page--list .ds-list-toolbar {
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.ds-page--list .ds-data-table-scroll,
.ds-page--list .table-responsive {
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.ds-page--form .ds-workbench > .card,
.ds-page--detail .ds-workbench > .card,
.ds-page--hub .ds-workbench > .card,
.ds-page--error .ds-workbench > .card,
.ds-page--auth .ds-workbench > .ds-login-panel {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ds-page--form .ds-workbench > :not(.ds-page-heading):not(script):not(.modal),
.ds-page--detail .ds-workbench > :not(.ds-page-heading):not(script):not(.modal),
.ds-page--hub .ds-workbench > :not(.ds-page-heading):not(script):not(.modal),
.ds-page--dashboard .ds-workbench > :not(.ds-page-heading):not(script):not(.modal) {
    margin-right: 1rem;
    margin-left: 1rem;
}

.ds-page--dashboard .ds-workbench > .ds-dashboard {
    margin-right: 0;
    margin-left: 0;
}

.ds-page--form .ds-workbench > :last-child:not(script):not(.modal),
.ds-page--detail .ds-workbench > :last-child:not(script):not(.modal),
.ds-page--hub .ds-workbench > :last-child:not(script):not(.modal),
.ds-page--dashboard .ds-workbench > :last-child:not(script):not(.modal) {
    margin-bottom: 1rem;
}

.ds-page--dashboard .ds-workbench > .ds-dashboard:last-child {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    main.ds-page,
    body:not(.ds-has-sidebar) main.ds-page {
        padding-right: .75rem !important;
        padding-left: .75rem !important;
        padding-bottom: .75rem !important;
    }

    .ds-page > .ds-workbench {
        border-radius: 1rem;
    }
}

@media (max-width: 575.98px) {
    .ds-workbench > .ds-page-heading,
    .ds-workbench > .ds-list-heading {
        min-height: 3.75rem;
        padding: .8rem .85rem !important;
    }

}

@media (max-width: 991.98px) {
    .ds-saved-view-bar { align-items: stretch; }
    .ds-saved-view-bar select { width: 100%; flex-basis: 100%; }
    .ds-saved-view-status { flex-basis: 100%; }
    .ds-mobile-filter-toggle {
        display: flex;
        width: fit-content;
        margin-bottom: .75rem;
        position: relative;
        z-index: 20;
    }
    .ds-mobile-filter-details > summary {
        min-height: 40px;
        display: flex;
        align-items: center;
        gap: .35rem;
        cursor: pointer;
    }
    .ds-mobile-filter-count { color: #6b7280; font-size: .82rem; font-weight: 500; }
    .ds-mobile-filter-form:not(.is-open) {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-width: 0 !important;
    }
    .ds-mobile-filter-form { transition: max-height .2s ease, opacity .15s ease; max-height: 1800px; }
    .btn, .form-control, .form-select { min-height: 40px; }
}

/* Shared authentication composition. It uses the same workbench, controls and
   accessibility tokens as the rest of the product, with a calmer split layout. */
main.ds-page--auth {
    display: grid;
    min-height: 100vh;
    padding: clamp(1rem, 4vw, 3.5rem) !important;
    place-items: center;
}

.ds-page--auth > .ds-workbench {
    max-width: 62rem;
    overflow: hidden;
    border-radius: 1.6rem;
    box-shadow: 0 32px 84px rgba(29, 41, 57, .18), inset 0 1px var(--ds-highlight);
}

.ds-login-panel {
    display: grid;
    width: 100%;
    min-height: 36rem;
    grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr);
}

.ds-login-intro {
    position: relative;
    display: flex;
    min-width: 0;
    padding: clamp(2.5rem, 5vw, 4.25rem);
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    border-right: 1px solid var(--ds-border);
    background:
        radial-gradient(circle at 90% 8%, rgba(87, 166, 244, .2), transparent 16rem),
        linear-gradient(145deg, var(--ds-blue-soft), var(--ds-surface-muted) 72%);
    isolation: isolate;
}

.ds-login-intro::before,
.ds-login-intro::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(10, 110, 209, .13);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.ds-login-intro::before {
    top: -8rem;
    right: -7rem;
    width: 22rem;
    height: 22rem;
}

.ds-login-intro::after {
    right: -2rem;
    bottom: -11rem;
    width: 19rem;
    height: 19rem;
}

.ds-login-brand {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: .7rem;
    color: var(--ds-text);
    font-size: 1rem;
    font-weight: 680;
    letter-spacing: -.012em;
}

.ds-login-brand--logo { min-height: 2.75rem; }

.ds-login-logo-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(14rem, 100%);
    max-height: 3.5rem;
    object-fit: contain;
}

.ds-login-brand__mark {
    position: relative;
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    border: 1px solid rgba(10, 110, 209, .25);
    border-radius: .82rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, .86), var(--ds-blue-soft));
    box-shadow: 0 8px 24px rgba(10, 110, 209, .13), inset 0 1px rgba(255, 255, 255, .82);
    place-items: center;
}

.ds-login-brand__mark::before,
.ds-login-brand__mark::after,
.ds-login-brand__mark > span {
    position: absolute;
    width: .85rem;
    height: .85rem;
    border: .1rem solid var(--ds-blue);
    border-radius: .28rem;
    content: "";
    transform: rotate(45deg);
}

.ds-login-brand__mark::before { transform: translate(-.28rem, -.28rem) rotate(45deg); }
.ds-login-brand__mark::after { opacity: .52; transform: translate(.28rem, .28rem) rotate(45deg); }
.ds-login-brand__mark > span { opacity: .78; }

.ds-login-eyebrow,
.ds-login-form-kicker {
    margin: 0 0 .7rem;
    color: var(--ds-blue);
    font-size: .7rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .12em;
}

.ds-login-intro__copy { max-width: 27rem; }

.ds-login-intro__copy h1 {
    max-width: 23rem;
    margin: 0;
    color: var(--ds-text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(2.25rem, 4.5vw, 3.35rem);
    font-weight: 720;
    line-height: 1.04;
    letter-spacing: -.045em;
}

.ds-login-intro__description {
    max-width: 25rem;
    margin: 1.25rem 0 0;
    color: var(--ds-text-secondary);
    font-size: .96rem;
    line-height: 1.75;
}

.ds-login-assurance {
    display: flex;
    max-width: 24rem;
    align-items: center;
    gap: .8rem;
    color: var(--ds-text-secondary);
}

.ds-login-assurance__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    color: var(--ds-blue);
    border: 1px solid rgba(10, 110, 209, .17);
    border-radius: .72rem;
    background: rgba(255, 255, 255, .55);
    place-items: center;
}

.ds-login-assurance strong,
.ds-login-assurance small { display: block; }
.ds-login-assurance strong { color: var(--ds-text); font-size: .82rem; font-weight: 680; }
.ds-login-assurance small { margin-top: .12rem; font-size: .72rem; line-height: 1.45; }

.ds-login-form-pane {
    display: flex;
    min-width: 0;
    padding: clamp(2.25rem, 5vw, 4rem);
    flex-direction: column;
    justify-content: center;
    background: var(--ds-surface-solid);
}

.ds-login-form-header { margin-bottom: 1.8rem; }
.ds-login-form-header h2 { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.ds-login-form-header > p:last-child { margin: .65rem 0 0; color: var(--ds-text-secondary); font-size: .85rem; line-height: 1.55; }

.ds-login-notices .alert {
    display: flex;
    margin: 0 0 .75rem;
    padding: .65rem .75rem;
    align-items: flex-start;
    gap: .55rem;
    border-radius: var(--ds-radius-sm);
    font-size: .78rem;
    line-height: 1.45;
}

.ds-login-notices .alert i { margin-top: .05rem; flex: 0 0 auto; }
.ds-login-field-row { margin-bottom: 1rem; }
.ds-login-label { display: block; margin: 0 0 .42rem; color: var(--ds-text); font-size: .8rem; font-weight: 650; }
.ds-login-control { position: relative; min-width: 0; }

.ds-login-control > i {
    position: absolute;
    top: 50%;
    left: .92rem;
    z-index: 1;
    color: var(--ds-text-tertiary);
    font-size: .95rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.ds-login-control .form-control {
    min-height: 46px;
    padding: .65rem 2.8rem;
    border-color: var(--ds-border-strong);
    border-radius: .82rem;
    background: var(--ds-surface);
    font-size: .9rem;
    transition: border-color var(--ds-float-duration) ease, box-shadow var(--ds-float-duration) ease, background-color var(--ds-float-duration) ease;
}

.ds-login-control .form-control::placeholder { color: var(--ds-text-tertiary); }

.ds-login-control .form-control:focus {
    border-color: rgba(10, 110, 209, .58);
    background: var(--ds-surface-solid);
    box-shadow: 0 0 0 .22rem rgba(10, 110, 209, .11), var(--ds-shadow-control);
}

.ds-login-control:focus-within > i { color: var(--ds-blue); }
.ds-login-control--password .form-control { padding-right: 3.1rem; }

.ds-login-password-toggle {
    position: absolute;
    top: 50%;
    right: .35rem;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--ds-text-secondary);
    border: 0;
    border-radius: .65rem;
    background: transparent;
    transform: translateY(-50%);
    transition: color var(--ds-press-duration) ease, background-color var(--ds-press-duration) ease;
    place-items: center;
}

.ds-captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    align-items: center;
    gap: .6rem;
}

.ds-captcha-preview {
    position: relative;
    width: 7rem;
    height: 46px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ds-border-strong);
    border-radius: .82rem;
    background: var(--ds-surface-muted);
    transition: border-color var(--ds-press-duration) ease, transform var(--ds-press-duration) var(--ds-ease);
}

.ds-captcha-image { display: block; width: 100%; height: 100%; object-fit: cover; }

.ds-captcha-preview__action {
    position: absolute;
    right: .25rem;
    bottom: .25rem;
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    color: #fff;
    border-radius: .45rem;
    background: rgba(23, 26, 32, .68);
    font-size: .7rem;
    place-items: center;
}

.ds-captcha-refresh {
    display: block;
    margin: .4rem 0 0 auto;
    padding: .15rem 0;
    color: var(--ds-blue);
    border: 0;
    background: transparent;
    font-size: .75rem;
}

.ds-login-btn {
    display: flex;
    width: 100%;
    min-height: 46px;
    margin-top: .35rem;
    padding-inline: 1rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    color: #fff;
    border: 0;
    border-radius: .82rem;
    background: linear-gradient(180deg, #2384e5, var(--ds-blue));
    box-shadow: 0 10px 24px rgba(10, 110, 209, .22), inset 0 1px rgba(255, 255, 255, .24);
    font-size: .9rem;
    font-weight: 680;
    transition: background-color var(--ds-press-duration) ease, box-shadow var(--ds-press-duration) ease, transform var(--ds-press-duration) var(--ds-ease);
}

.ds-login-btn:active,
.ds-captcha-preview:active { transform: scale(.985); }

.ds-login-help {
    display: flex;
    margin-top: 1.65rem;
    padding-top: 1.1rem;
    align-items: flex-start;
    gap: .5rem;
    color: var(--ds-text-tertiary);
    border-top: 1px solid var(--ds-border);
    font-size: .72rem;
    line-height: 1.5;
}

.ds-login-help i { margin-top: .08rem; flex: 0 0 auto; }

@media (hover: hover) and (pointer: fine) {
    .ds-login-password-toggle:hover { color: var(--ds-blue); background: var(--ds-blue-soft); }
    .ds-captcha-preview:hover { border-color: rgba(10, 110, 209, .4); }
    .ds-captcha-refresh:hover { color: var(--ds-blue-hover); text-decoration: underline; }
    .ds-login-btn:hover { color: #fff; background: linear-gradient(180deg, #2d8be8, var(--ds-blue-hover)); box-shadow: 0 12px 28px rgba(10, 110, 209, .27), inset 0 1px rgba(255, 255, 255, .24); transform: translateY(-1px); }
}

@media (max-width: 767.98px) {
    main.ds-page--auth { align-items: start; padding: 1rem !important; }
    .ds-page--auth > .ds-workbench { max-width: 32rem; border-radius: 1.25rem; }
    .ds-login-panel { min-height: 0; padding: 0; grid-template-columns: minmax(0, 1fr); }
    .ds-login-intro { padding: 1.5rem; gap: 1.75rem; border-right: 0; border-bottom: 1px solid var(--ds-border); }
    .ds-login-intro__copy h1 { max-width: none; font-size: clamp(1.8rem, 9vw, 2.35rem); }
    .ds-login-intro__description { margin-top: .8rem; font-size: .85rem; line-height: 1.6; }
    .ds-login-assurance { display: none; }
    .ds-login-form-pane { padding: 1.6rem 1.5rem 1.5rem; }
    .ds-login-form-header { margin-bottom: 1.4rem; }
}

@media (max-width: 390px) {
    main.ds-page--auth { padding: .65rem !important; }
    .ds-login-intro { padding: 1.25rem; }
    .ds-login-form-pane { padding: 1.4rem 1.2rem 1.25rem; }
    .ds-login-brand__mark { width: 2.35rem; height: 2.35rem; }
    .ds-captcha-row { grid-template-columns: minmax(0, 1fr) 6.5rem; }
    .ds-captcha-preview { width: 6.5rem; }
}

@media (prefers-color-scheme: dark) {
    .ds-login-intro {
        background:
            radial-gradient(circle at 90% 8%, rgba(44, 127, 212, .24), transparent 16rem),
            linear-gradient(145deg, rgba(10, 110, 209, .13), var(--ds-surface-muted) 72%);
    }
    .ds-login-brand__mark { background: linear-gradient(145deg, rgba(255, 255, 255, .08), var(--ds-blue-soft)); box-shadow: 0 8px 24px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .1); }
    .ds-login-assurance__icon { background: rgba(255, 255, 255, .055); }
}

@media (prefers-reduced-motion: reduce) {
    .ds-login-btn,
    .ds-login-password-toggle,
    .ds-captcha-preview { transition-duration: .01ms !important; }
    .ds-login-btn:hover,
    .ds-login-btn:active,
    .ds-captcha-preview:active { transform: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
    .ds-login-intro { background: var(--ds-surface-muted); }
}

@media (prefers-contrast: more) {
    .ds-page--auth > .ds-workbench,
    .ds-login-control .form-control,
    .ds-captcha-preview { border-width: 2px; }
    .ds-login-intro::before,
    .ds-login-intro::after { display: none; }
}