:root {
    --neo-primary: #0078d4;
    --neo-primary-hover: #106ebe;
    --neo-success: #107c10;
    --neo-error: #d13438;
    --neo-border-radius: 4px;
    --neo-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --neo-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --neo-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --neo-popup-width-default: 650px;

    /* ---- Intent / Semantic Colors ---- */
    --neo-warning: #D97706;
    --neo-info: #0F6CBD;
    --neo-danger-hover: #BC2F32;
    --neo-danger-pressed: #A4262C;

    /* ---- Text Palette ---- */
    --neo-text-primary: #242424;
    --neo-text-secondary: #5F6B7A;
    --neo-text-muted: #8A8886;
    --neo-text-disabled: #A19F9D;
    --neo-text-heading: #111827;
    --neo-text-on-accent: #FFFFFF;

    /* ---- Surface Palette ---- */
    --neo-surface: #FFFFFF;
    --neo-surface-muted: #F5F5F5;
    --neo-surface-hover: #F5F5F5;
    --neo-surface-pressed: #E0E0E0;
    --neo-surface-selected: #EBEBEB;
    --neo-surface-selected-hover: #DDDDDD;

    /* ---- Border / Divider Palette ---- */
    --neo-border: #D9E3EE;
    --neo-border-neutral: #D1D1D1;
    --neo-divider: #E5E7EB;

    /* ---- Focus Ring ---- */
    --neo-focus-ring: #0F6CBD;

    /* ---- Disabled State Palette ---- */
    --neo-disabled-bg: #F5F5F5;
    --neo-disabled-border: #E0E0E0;

    /* ---- Component semantic tokens ---- */
    --neo-surface-card: #FFFFFF;
    --neo-surface-subtle: #FAFAFA;
    --neo-surface-accent: #E8F3FF;
    --neo-surface-accent-strong: #D0E7FF;
    --neo-surface-success: #E7F6E7;
    --neo-surface-warning: #FFF4CE;
    --neo-surface-error: #FDF3F4;
    --neo-surface-danger: #FDE7E9;
    --neo-on-surface-accent: #0F6CBD;
    --neo-on-surface-success: #107C10;
    --neo-on-surface-warning: #8A6D00;
    --neo-on-surface-error: #D13438;
    --neo-on-surface-danger: #A4262C;
    --neo-thumb-surface: #FFFFFF;
    --neo-presence-available: #13A10E;
    --neo-presence-busy: #D13438;
    --neo-presence-away: #FFAA44;
    --neo-presence-blocked: #A80000;
    --neo-presence-offline: #8A8886;
    --neo-presence-unknown: #C8C6C4;
    --neo-avatar-surface-start: #E8F3FF;
    --neo-avatar-surface-end: #DBEAFE;
    --neo-presence-border: #FFFFFF;
    --neo-focus-ring-shadow: rgba(15, 108, 189, 0.24);
    --neo-shadow-ambient: rgba(0, 0, 0, 0.18);
}

.neo-theme-dark,
[data-theme="dark"] {
    color-scheme: dark;
    --neo-primary: #479EF5;
    --neo-primary-hover: #62ABF5;
    --neo-success: #54B054;
    --neo-error: #F1707B;
    --neo-warning: #FCE100;
    --neo-info: #6CB8F6;
    --neo-danger-hover: #FF99A4;
    --neo-danger-pressed: #F1707B;
    --neo-text-primary: #F5F5F5;
    --neo-text-secondary: #D6D6D6;
    --neo-text-muted: #ADADAD;
    --neo-text-disabled: #8A8A8A;
    --neo-text-heading: #FFFFFF;
    --neo-text-on-accent: #FFFFFF;
    --neo-surface: #1B1A19;
    --neo-surface-muted: #292827;
    --neo-surface-hover: #323130;
    --neo-surface-pressed: #3B3A39;
    --neo-surface-selected: #243A5E;
    --neo-surface-selected-hover: #2B4774;
    --neo-border: #3B3A39;
    --neo-border-neutral: #4A4948;
    --neo-divider: #3B3A39;
    --neo-focus-ring: #62ABF5;
    --neo-disabled-bg: #292827;
    --neo-disabled-border: #3B3A39;
    --neo-surface-card: #201F1E;
    --neo-surface-subtle: #252423;
    --neo-surface-accent: #082338;
    --neo-surface-accent-strong: #0B3A5C;
    --neo-surface-success: #052505;
    --neo-surface-warning: #3A2E00;
    --neo-surface-error: #3B0509;
    --neo-surface-danger: #3B0509;
    --neo-on-surface-accent: #9CDCFE;
    --neo-on-surface-success: #9FD89F;
    --neo-on-surface-warning: #FCE100;
    --neo-on-surface-error: #FF99A4;
    --neo-on-surface-danger: #FF99A4;
    --neo-thumb-surface: #201F1E;
    --neo-presence-available: #54B054;
    --neo-presence-busy: #F1707B;
    --neo-presence-away: #FCE100;
    --neo-presence-blocked: #F1707B;
    --neo-presence-offline: #8A8A8A;
    --neo-presence-unknown: #666666;
    --neo-avatar-surface-start: #082338;
    --neo-avatar-surface-end: #0B3A5C;
    --neo-presence-border: #201F1E;
    --neo-focus-ring-shadow: rgba(98, 171, 245, 0.32);
    --neo-shadow-ambient: rgba(0, 0, 0, 0.5);
}

/* ── Fluent SVG Icons ───────────────────────────────────────── */
.neo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

/* NeoSplitView */
.neo-splitview {
    min-width: 0;
    min-height: 0;
}

.neo-splitview-primary,
.neo-splitview-secondary {
    min-width: 0;
    min-height: 0;
}

.neo-splitview-splitter {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neo-surface-muted);
    touch-action: none;
    user-select: none;
    z-index: 1;
}

.neo-splitview-splitter-v {
    cursor: ew-resize;
}

.neo-splitview-splitter-h {
    cursor: ns-resize;
}

.neo-splitview-splitter-line {
    border-radius: 999px;
    background: var(--neo-border-neutral);
    transition: background-color 120ms ease, width 120ms ease, height 120ms ease;
}

.neo-splitview-splitter-v .neo-splitview-splitter-line {
    width: 1px;
    height: 32px;
}

.neo-splitview-splitter-h .neo-splitview-splitter-line {
    width: 32px;
    height: 1px;
}

.neo-splitview-splitter:hover .neo-splitview-splitter-line,
.neo-splitview-splitter:focus-visible .neo-splitview-splitter-line {
    background: var(--neo-primary);
}

.neo-splitview.show-divider-handle .neo-splitview-splitter-v .neo-splitview-splitter-line {
    width: 3px;
}

.neo-splitview.show-divider-handle .neo-splitview-splitter-h .neo-splitview-splitter-line {
    height: 3px;
}

/* NeoDivider */
.neo-divider {
    --neo-divider-line-color: var(--neo-divider);
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 1px;
    color: var(--neo-text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.neo-divider::before,
.neo-divider::after {
    content: "";
    min-width: 0;
    height: 1px;
    background: var(--neo-divider-line-color);
}

.neo-divider::before,
.neo-divider::after {
    flex: 1 1 auto;
}

.neo-divider:not(.neo-divider-with-content)::after {
    display: none;
}

.neo-divider:not(.neo-divider-with-content)::before {
    flex-basis: 100%;
}

.neo-divider-align-start.neo-divider-with-content::before,
.neo-divider-align-end.neo-divider-with-content::after {
    flex: 0 0 24px;
}

.neo-divider-align-start.neo-divider-inset.neo-divider-with-content::before,
.neo-divider-align-end.neo-divider-inset.neo-divider-with-content::after {
    flex-basis: 0;
}

.neo-divider-inset {
    width: calc(100% - 32px);
    margin-inline: 16px;
}

.neo-divider-strong {
    --neo-divider-line-color: var(--neo-border-neutral);
    color: var(--neo-text-primary);
}

.neo-divider-brand {
    --neo-divider-line-color: var(--neo-primary);
    color: var(--neo-primary);
}

.neo-divider-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding-inline: 12px;
    max-width: min(70%, 480px);
    overflow: hidden;
    white-space: nowrap;
}

.neo-divider-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-divider-icon {
    width: 14px;
    height: 14px;
}

.neo-divider-vertical {
    align-self: stretch;
    flex-direction: column;
    width: 1px;
    min-width: 1px;
    min-height: 48px;
}

.neo-divider-vertical::before,
.neo-divider-vertical::after {
    width: 1px;
    height: auto;
}

.neo-divider-vertical .neo-divider-content {
    writing-mode: vertical-rl;
    padding: 12px 0;
}

.neo-divider-vertical.neo-divider-inset {
    width: 1px;
    margin-inline: 0;
    margin-block: 16px;
    min-height: calc(100% - 32px);
}

/* NeoList */
.neo-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: var(--neo-text-primary);
}

.neo-list-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    border-radius: 6px;
    cursor: default;
    outline: none;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.neo-list-interactive .neo-list-item:not(.is-disabled) {
    cursor: pointer;
}

.neo-list-size-small .neo-list-item {
    min-height: 32px;
    padding: 5px 8px;
}

.neo-list-size-medium .neo-list-item {
    min-height: 40px;
    padding: 7px 10px;
}

.neo-list-size-large .neo-list-item {
    min-height: 52px;
    padding: 10px 12px;
}

.neo-list-item:hover {
    background: var(--neo-surface-muted);
}

.neo-list-item:focus-visible {
    box-shadow: 0 0 0 2px var(--neo-focus-ring);
}

.neo-list-item.is-selected {
    background: var(--neo-surface-accent);
    color: var(--neo-primary);
}

.neo-list-item.is-selected::before {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--neo-primary);
}

.neo-list-item.is-disabled {
    color: var(--neo-text-muted);
    cursor: not-allowed;
    opacity: 0.72;
}

.neo-list-item.is-disabled:hover {
    background: transparent;
}

.neo-list-with-dividers .neo-list-item + .neo-list-item {
    border-top: 1px solid var(--neo-divider);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.neo-list-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--neo-text-muted);
}

.neo-list-item.is-selected .neo-list-item-icon {
    color: var(--neo-primary);
}

.neo-list-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.neo-list-item-text,
.neo-list-item-secondary,
.neo-list-item-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-list-item-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.neo-list-item-secondary {
    color: var(--neo-text-secondary);
    font-size: 12px;
    line-height: 16px;
}

.neo-list-item-description {
    color: var(--neo-text-muted);
    font-size: 12px;
    line-height: 16px;
}

.neo-list-item-badge {
    flex: 0 0 auto;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 999px;
    padding: 2px 8px;
    background: var(--neo-surface-muted);
    color: var(--neo-text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

.neo-list-item.is-selected .neo-list-item-badge {
    background: var(--neo-surface-accent-strong);
    color: var(--neo-primary);
}

/* NeoBreadcrumb */
.neo-breadcrumb {
    display: block;
    max-width: 100%;
    min-width: 0;
    color: var(--neo-text-secondary);
}

.neo-breadcrumb-subtle {
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--neo-border);
    border-radius: 8px;
    padding: 4px 8px;
    background: var(--neo-surface-muted);
}

.neo-breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    white-space: nowrap;
}

.neo-breadcrumb-list-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
}

.neo-breadcrumb-list-item:first-child,
.neo-breadcrumb-list-item:last-child {
    flex-shrink: 0;
}

.neo-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 30ch;
    min-width: 0;
    border: 0;
    border-radius: 4px;
    padding: 2px 4px;
    background: transparent;
    color: var(--neo-text-secondary);
    font: inherit;
    text-decoration: none;
    outline: none;
}

.neo-breadcrumb-item[href],
.neo-breadcrumb-button {
    cursor: pointer;
}

.neo-breadcrumb-item[href]:hover,
.neo-breadcrumb-button:hover {
    background: var(--neo-surface-muted);
    color: var(--neo-primary);
    text-decoration: none;
}

.neo-breadcrumb-item:focus-visible,
.neo-breadcrumb .neo-menu:focus-within {
    box-shadow: 0 0 0 2px var(--neo-focus-ring);
}

.neo-breadcrumb-item.is-current {
    color: var(--neo-text-primary);
    font-weight: 600;
}

.neo-breadcrumb-item.is-disabled {
    color: var(--neo-text-muted);
    cursor: not-allowed;
}

.neo-breadcrumb-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-breadcrumb-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.neo-breadcrumb-divider {
    flex: 0 0 auto;
    padding-inline: 4px;
    color: var(--neo-text-muted);
    user-select: none;
}

.neo-breadcrumb-overflow .neo-menu-trigger {
    min-width: 28px;
}

.neo-breadcrumb-size-small {
    font-size: 12px;
    line-height: 18px;
}

.neo-breadcrumb-size-medium {
    font-size: 13px;
    line-height: 20px;
}

.neo-breadcrumb-size-large {
    font-size: 14px;
    line-height: 22px;
}

.neo-breadcrumb-size-extralarge {
    font-size: 16px;
    line-height: 24px;
}

.neo-breadcrumb-path {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--neo-text-secondary);
    font-family: Consolas, 'Cascadia Mono', monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* NeoProgressBar */
.neo-progressbar {
    --neo-progressbar-fill: var(--neo-primary);
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
    color: var(--neo-text-primary);
}

.neo-progressbar-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.neo-progressbar-label,
.neo-progressbar-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-progressbar-label {
    color: var(--neo-text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.neo-progressbar-status {
    color: var(--neo-text-muted);
    font-size: 12px;
    line-height: 16px;
    text-align: right;
}

.neo-progressbar-track {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: var(--neo-surface-muted);
}

.neo-progressbar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--neo-progressbar-fill);
    transition: width 160ms ease;
}

.neo-progressbar-thickness-small .neo-progressbar-track {
    height: 2px;
}

.neo-progressbar-thickness-medium .neo-progressbar-track {
    height: 4px;
}

.neo-progressbar-thickness-large .neo-progressbar-track {
    height: 8px;
}

.neo-progressbar-color-brand {
    --neo-progressbar-fill: var(--neo-primary);
}

.neo-progressbar-color-success {
    --neo-progressbar-fill: var(--neo-success);
}

.neo-progressbar-color-warning {
    --neo-progressbar-fill: var(--neo-warning);
}

.neo-progressbar-color-error {
    --neo-progressbar-fill: var(--neo-error);
}

.neo-progressbar.validation-success .neo-progressbar-status {
    color: var(--neo-on-surface-success);
}

.neo-progressbar.validation-warning .neo-progressbar-status {
    color: var(--neo-on-surface-warning);
}

.neo-progressbar.validation-error .neo-progressbar-status {
    color: var(--neo-on-surface-error);
}

.neo-progressbar.is-indeterminate .neo-progressbar-fill {
    position: absolute;
    inset-block: 0;
    width: 38%;
    animation: neo-progressbar-indeterminate 1.6s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

/* NeoSlider */
.neo-slider {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    color: var(--neo-text-primary);
}

.neo-slider-label {
    color: var(--neo-text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.neo-slider-hide-label .neo-slider-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.neo-slider-control {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.neo-slider-input {
    --neo-slider-thumb-size: 20px;
    --neo-slider-track-size: 4px;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--neo-slider-thumb-size);
    border: 0;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.neo-slider-size-small .neo-slider-input {
    --neo-slider-thumb-size: 16px;
    --neo-slider-track-size: 2px;
}

.neo-slider-input::-webkit-slider-runnable-track {
    height: var(--neo-slider-track-size);
    border-radius: 999px;
    background: linear-gradient(to right, var(--neo-primary) 0 var(--neo-slider-percent), var(--neo-surface-muted) var(--neo-slider-percent) 100%);
}

.neo-slider-input::-moz-range-track {
    height: var(--neo-slider-track-size);
    border-radius: 999px;
    background: var(--neo-surface-muted);
}

.neo-slider-input::-moz-range-progress {
    height: var(--neo-slider-track-size);
    border-radius: 999px;
    background: var(--neo-primary);
}

.neo-slider-input::-webkit-slider-thumb {
    width: var(--neo-slider-thumb-size);
    height: var(--neo-slider-thumb-size);
    margin-top: calc((var(--neo-slider-track-size) - var(--neo-slider-thumb-size)) / 2);
    appearance: none;
    border: 2px solid var(--neo-primary);
    border-radius: 50%;
    background: var(--neo-thumb-surface);
    box-shadow: 0 1px 3px var(--neo-shadow-ambient);
}

.neo-slider-input::-moz-range-thumb {
    width: var(--neo-slider-thumb-size);
    height: var(--neo-slider-thumb-size);
    border: 2px solid var(--neo-primary);
    border-radius: 50%;
    background: var(--neo-thumb-surface);
    box-shadow: 0 1px 3px var(--neo-shadow-ambient);
}

.neo-slider-input:focus-visible {
    outline: 0;
}

.neo-slider-input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--neo-focus-ring-shadow), 0 1px 3px var(--neo-shadow-ambient);
}

.neo-slider-input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--neo-focus-ring-shadow), 0 1px 3px var(--neo-shadow-ambient);
}

.neo-slider.is-disabled {
    opacity: 0.68;
}

.neo-slider.is-disabled .neo-slider-input {
    cursor: not-allowed;
}

.neo-slider-bound-label,
.neo-slider-value {
    flex: 0 0 auto;
    color: var(--neo-text-muted);
    font-size: 12px;
    line-height: 16px;
}

.neo-slider-value {
    color: var(--neo-text-secondary);
    font-weight: 600;
}

.neo-slider-vertical {
    width: auto;
    min-height: 180px;
    align-items: center;
}

.neo-slider-vertical .neo-slider-control {
    flex-direction: column-reverse;
    height: 180px;
}

.neo-slider-vertical .neo-slider-input {
    width: 180px;
    transform: rotate(-90deg);
}

/* NeoPersona */
.neo-persona {
    --neo-persona-avatar-size: 40px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    min-width: 0;
    color: var(--neo-text-primary);
}

.neo-persona-size-tiny { --neo-persona-avatar-size: 20px; gap: 6px; }
.neo-persona-size-extra-small { --neo-persona-avatar-size: 24px; gap: 8px; }
.neo-persona-size-small { --neo-persona-avatar-size: 32px; gap: 10px; }
.neo-persona-size-medium { --neo-persona-avatar-size: 40px; }
.neo-persona-size-large { --neo-persona-avatar-size: 48px; }
.neo-persona-size-extra-large { --neo-persona-avatar-size: 56px; }
.neo-persona-size-huge { --neo-persona-avatar-size: 72px; gap: 14px; }

.neo-persona-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--neo-persona-avatar-size);
    height: var(--neo-persona-avatar-size);
    flex: 0 0 auto;
    overflow: visible;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neo-avatar-surface-start), var(--neo-avatar-surface-end));
    color: var(--neo-primary);
    font-weight: 700;
}

.neo-persona-image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.neo-persona-initials {
    font-size: calc(var(--neo-persona-avatar-size) * 0.38);
    line-height: 1;
}

.neo-persona-text-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

.neo-persona-line {
    overflow-wrap: anywhere;
    color: var(--neo-text-secondary);
    font-size: 12px;
    line-height: 16px;
}

.neo-persona-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--neo-text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.neo-persona-size-large .neo-persona-name,
.neo-persona-size-extra-large .neo-persona-name,
.neo-persona-size-huge .neo-persona-name {
    font-size: 15px;
    line-height: 22px;
}

.neo-persona-tertiary,
.neo-persona-quaternary {
    color: var(--neo-text-muted);
}

.neo-persona-align-center .neo-persona-text-block { text-align: center; }
.neo-persona-align-end .neo-persona-text-block { text-align: end; }

.neo-persona-presence {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border: 2px solid var(--neo-presence-border);
    border-radius: 50%;
    background: var(--neo-presence-offline);
}

.neo-persona-avatar .neo-persona-presence {
    position: absolute;
    right: 0;
    bottom: 0;
}

.neo-persona-presence.presence-available { background: var(--neo-presence-available); }
.neo-persona-presence.presence-busy,
.neo-persona-presence.presence-do-not-disturb { background: var(--neo-presence-busy); }
.neo-persona-presence.presence-away,
.neo-persona-presence.presence-out-of-office { background: var(--neo-presence-away); }
.neo-persona-presence.presence-blocked { background: var(--neo-presence-blocked); }
.neo-persona-presence.presence-offline { background: var(--neo-presence-offline); }
.neo-persona-presence.presence-unknown { background: var(--neo-presence-unknown); }

.neo-persona-presence-only {
    gap: 0;
}

.neo-persona-badge {
    flex: 0 0 auto;
}

/* NeoAvatar / AvatarGroup */
.neo-avatar {
    --neo-avatar-size: 32px;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--neo-avatar-size);
    height: var(--neo-avatar-size);
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neo-avatar-surface-start), var(--neo-avatar-surface-end));
    color: var(--neo-primary);
    font-weight: 700;
    vertical-align: middle;
}

.neo-avatar-size-tiny { --neo-avatar-size: 20px; }
.neo-avatar-size-extra-small { --neo-avatar-size: 24px; }
.neo-avatar-size-small { --neo-avatar-size: 28px; }
.neo-avatar-size-medium { --neo-avatar-size: 32px; }
.neo-avatar-size-large { --neo-avatar-size: 40px; }
.neo-avatar-size-extra-large { --neo-avatar-size: 48px; }
.neo-avatar-size-huge { --neo-avatar-size: 64px; }
.neo-avatar-shape-square { border-radius: 8px; }
.neo-avatar-color-brand { background: var(--neo-primary); color: var(--neo-text-on-accent); }
.neo-avatar-color-neutral { background: var(--neo-surface-muted); color: var(--neo-text-primary); }
.neo-avatar-image { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.neo-avatar-initials { font-size: calc(var(--neo-avatar-size) * .38); line-height: 1; }
.neo-avatar.active-active { box-shadow: 0 0 0 2px var(--neo-primary); }
.neo-avatar.active-ring-shadow { box-shadow: 0 0 0 2px var(--neo-primary), 0 2px 10px var(--neo-shadow-ambient); }
.neo-avatar-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border: 2px solid var(--neo-presence-border);
    border-radius: 50%;
    background: var(--neo-presence-unknown);
}
.neo-avatar.presence-available .neo-avatar-badge { background: var(--neo-presence-available); }
.neo-avatar.presence-busy .neo-avatar-badge,
.neo-avatar.presence-do-not-disturb .neo-avatar-badge { background: var(--neo-presence-busy); }
.neo-avatar.presence-away .neo-avatar-badge,
.neo-avatar.presence-out-of-office .neo-avatar-badge { background: var(--neo-presence-away); }
.neo-avatar.presence-offline .neo-avatar-badge { background: var(--neo-presence-offline); }

.neo-avatar-group { display: inline-flex; align-items: center; gap: 8px; }
.neo-avatar-group.layout-stack { gap: 0; }
.neo-avatar-group.layout-stack .neo-avatar + .neo-avatar,
.neo-avatar-group.layout-stack .neo-avatar-group-overflow { margin-left: -8px; }
.neo-avatar-group.layout-pie { gap: -2px; }
.neo-avatar-group-overflow {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 50%;
    background: var(--neo-surface-muted);
    color: var(--neo-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

/* NeoImage */
.neo-image { max-width: 100%; vertical-align: middle; object-fit: initial; }
.neo-image.is-block { display: block; }
.neo-image.is-bordered { border: 1px solid var(--neo-border-neutral); }
.neo-image.has-shadow { box-shadow: var(--neo-shadow-lg); }
.neo-image.shape-rounded { border-radius: 8px; }
.neo-image.shape-circular { border-radius: 50%; aspect-ratio: 1; }
.neo-image.fit-contain { object-fit: contain; }
.neo-image.fit-cover { object-fit: cover; }
.neo-image.fit-center { object-fit: none; object-position: center; }
.neo-image.fit-none { object-fit: none; }

/* NeoLabel / InfoLabel */
.neo-label { display: inline-flex; gap: 2px; color: var(--neo-text-primary); overflow-wrap: anywhere; }
.neo-label.size-small { font-size: 12px; line-height: 16px; }
.neo-label.size-medium { font-size: 14px; line-height: 20px; }
.neo-label.size-large { font-size: 16px; line-height: 22px; }
.neo-label.weight-semibold { font-weight: 600; }
.neo-label.is-disabled { color: var(--neo-text-disabled); }
.neo-label-required { color: var(--neo-error); }
.neo-infolabel { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.neo-infolabel-button { display: inline-grid; place-items: center; min-width: 20px; min-height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--neo-text-secondary); cursor: pointer; }
.neo-infolabel-button:hover { background: var(--neo-surface-hover); color: var(--neo-primary); }
.neo-infolabel-button:focus-visible { outline: 2px solid var(--neo-focus-ring); outline-offset: 2px; }
.neo-infolabel-popover { position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; max-width: 260px; padding: 10px 12px; border: 1px solid var(--neo-border); border-radius: 8px; background: var(--neo-surface-card); color: var(--neo-text-primary); box-shadow: var(--neo-shadow-lg); font-size: 12px; line-height: 16px; }

/* NeoRating */
.neo-rating { display: inline-flex; align-items: center; gap: 2px; color: var(--neo-primary); }
.neo-rating.color-marigold { color: var(--neo-warning); }
.neo-rating-item { border: 0; background: transparent; color: inherit; cursor: pointer; line-height: 1; padding: 2px; }
.neo-rating-item.is-empty { color: var(--neo-text-muted); }
.neo-rating.is-readonly .neo-rating-item,
.neo-rating.is-disabled .neo-rating-item { cursor: default; }
.neo-rating.is-disabled { opacity: .65; }
.neo-rating.size-small .neo-rating-item { font-size: 14px; }
.neo-rating.size-medium .neo-rating-item { font-size: 16px; }
.neo-rating.size-large .neo-rating-item { font-size: 18px; }
.neo-rating.size-xlarge .neo-rating-item { font-size: 22px; }
.neo-rating-value,
.neo-rating-count { color: var(--neo-text-secondary); font-size: 12px; margin-left: 4px; }

/* NeoSpinner */
.neo-spinner { --neo-spinner-size: 24px; display: inline-flex; align-items: center; gap: 8px; color: var(--neo-primary); }
.neo-spinner.label-below { flex-direction: column; }
.neo-spinner.label-before { flex-direction: row; }
.neo-spinner.appearance-inverted { color: var(--neo-text-on-accent); }
.neo-spinner.size-tiny { --neo-spinner-size: 12px; }
.neo-spinner.size-extra-small { --neo-spinner-size: 16px; }
.neo-spinner.size-small { --neo-spinner-size: 20px; }
.neo-spinner.size-medium { --neo-spinner-size: 24px; }
.neo-spinner.size-large { --neo-spinner-size: 32px; }
.neo-spinner.size-extra-large { --neo-spinner-size: 40px; }
.neo-spinner.size-huge { --neo-spinner-size: 56px; }
.neo-spinner-circle { width: var(--neo-spinner-size); height: var(--neo-spinner-size); border: 2px solid var(--neo-surface-muted); border-top-color: currentColor; border-radius: 50%; animation: neo-spinner-spin .9s linear infinite; }
.neo-spinner-label { color: var(--neo-text-secondary); font-size: 13px; line-height: 18px; }
@keyframes neo-spinner-spin { to { transform: rotate(360deg); } }

/* NeoText */
.neo-text { color: var(--neo-text-primary); font-family: 'Segoe UI', system-ui, sans-serif; }
.neo-text.is-block { display: block; }
.neo-text.font-monospace { font-family: Consolas, 'Cascadia Mono', monospace; }
.neo-text.align-center { text-align: center; }
.neo-text.align-right { text-align: right; }
.neo-text.align-justify { text-align: justify; }
.neo-text.is-italic { font-style: italic; }
.neo-text.is-strike { text-decoration: line-through; }
.neo-text.is-underline { text-decoration: underline; }
.neo-text.is-trim { margin-block: 0; }
.neo-text.weight-medium { font-weight: 500; }
.neo-text.weight-semibold { font-weight: 600; }
.neo-text.weight-bold { font-weight: 700; }
.neo-text.size-100 { font-size: 10px; line-height: 14px; }
.neo-text.size-200 { font-size: 12px; line-height: 16px; }
.neo-text.size-300 { font-size: 14px; line-height: 20px; }
.neo-text.size-400 { font-size: 16px; line-height: 22px; }
.neo-text.size-500 { font-size: 20px; line-height: 28px; }
.neo-text.size-600 { font-size: 24px; line-height: 32px; }
.neo-text.size-700 { font-size: 28px; line-height: 36px; }
.neo-text.size-800 { font-size: 32px; line-height: 40px; }
.neo-text.size-900 { font-size: 40px; line-height: 52px; }

@keyframes neo-progressbar-indeterminate {
    0% {
        transform: translateX(-120%);
    }
    50% {
        transform: translateX(85%);
    }
    100% {
        transform: translateX(280%);
    }
}

/* NeoLogin */
.neo-login {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    inline-size: 100%;
    padding: 48px 24px 56px;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 22%, rgba(124, 201, 255, 0.42), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(255, 205, 226, 0.58), transparent 30%),
        linear-gradient(135deg, #f6fbff 0%, #f7f3ff 48%, #fff8f1 100%);
}

.neo-login-shell {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 20px;
    width: 100%;
}

.neo-login-card {
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(20px);
}

.neo-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.neo-login-logo {
    display: grid;
    grid-template-columns: repeat(2, 13px);
    grid-template-rows: repeat(2, 13px);
    gap: 2px;
    width: 28px;
    height: 28px;
}

.neo-login-logo-pane {
    display: block;
}

.neo-login-logo-pane.pane-red { background: #f25022; }
.neo-login-logo-pane.pane-green { background: #7fba00; }
.neo-login-logo-pane.pane-blue { background: #00a4ef; }
.neo-login-logo-pane.pane-yellow { background: #ffb900; }

.neo-login-brand-name {
    color: #5f5f5f;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.neo-login-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: -12px 0 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5f5f5f;
    font: inherit;
    cursor: pointer;
}

.neo-login-back span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-login-back span:first-child {
    font-size: 28px;
    line-height: 1;
}

.neo-login-title {
    margin: 0 0 24px;
    color: #1f1f1f;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.neo-login-form {
    display: grid;
    gap: 14px;
    margin: var(--neo-login-content-margin, 0 0 24px);
}

.neo-login-input fluent-text-field {
    width: 100%;
}

.neo-login-input fluent-text-field::part(root) {
    border-radius: 0;
    background: transparent;
}

.neo-login-inline-text {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    color: #424242;
    font-size: 13px;
}

.neo-login-link,
.neo-login-footer-link {
    border: 0;
    background: transparent;
    color: #0067b8;
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.neo-login-link:hover,
.neo-login-footer-link:hover {
    color: #004578;
    text-decoration: underline;
}

.neo-login-recovery {
    justify-self: start;
    font-size: 13px;
}

.neo-login-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
}

.neo-login-actions .neo-button-wrapper {
    min-width: 108px;
}

.neo-login-options {
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.neo-login-options-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.neo-login-footer {
    position: absolute;
    right: 24px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #424242;
    font-size: 12px;
}

.neo-login-footer-link {
    color: #424242;
}

.neo-login-more {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.neo-login-decoration {
    position: absolute;
    pointer-events: none;
    opacity: 0.75;
}

.neo-login-decoration-one {
    left: 6%;
    top: 18%;
    width: 190px;
    height: 190px;
    border-radius: 48px;
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.18), rgba(138, 180, 248, 0.06));
    transform: rotate(-18deg);
}

.neo-login-decoration-two {
    right: 8%;
    bottom: 16%;
    width: 240px;
    height: 150px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 185, 0, 0.22), rgba(244, 114, 182, 0.12));
    transform: rotate(-10deg);
}

.neo-login-decoration-three {
    right: 18%;
    top: 14%;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(16, 124, 16, 0.12);
}

.neo-login-header-slot,
.neo-login-footer-slot {
    margin-bottom: 18px;
}

.neo-login-footer-slot {
    margin-top: 18px;
    margin-bottom: 0;
}

/* NeoMenu */
.neo-menu {
    display: inline-flex;
}

.neo-menu-popup {
    border-radius: 0 !important;
}

.neo-menu-popup.square-dropdown,
.neo-menu-popup.square-dropdown::part(control),
.neo-menu-popup.square-dropdown::part(positioning-region) {
    border-radius: 0 !important;
}

.neo-menu-trigger-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.neo-menu-popup {
    display: grid;
    gap: 2px;
    padding: 4px;
}

.neo-menu-separator {
    height: 1px;
    margin: 4px 8px;
    background: var(--neo-divider);
}

.neo-menu-item-content {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.neo-menu-item-icon-spacer {
    width: 18px;
    height: 18px;
}

.neo-menu-item-label {
    overflow: hidden;
    color: var(--neo-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-menu-item-shortcut {
    color: var(--neo-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.neo-menu-item-check,
.neo-menu-item-submenu {
    color: var(--neo-text-secondary);
}

.neo-menu-item.is-danger .neo-menu-item-label,
.neo-menu-item.is-danger .neo-icon {
    color: var(--neo-error);
}

.neo-menu-item.is-checked::part(control) {
    background: var(--neo-surface-selected);
}

.neo-menu-item.has-children {
    opacity: 0.96;
}

.neo-menu-item.level-1 .neo-menu-item-content {
    padding-left: 18px;
}

.neo-menu-item.level-2 .neo-menu-item-content {
    padding-left: 36px;
}

.neo-menu-item.level-3 .neo-menu-item-content {
    padding-left: 54px;
}

/* NeoAuditPanel */
.neo-audit-panel {
    display: grid;
    gap: 14px;
    color: var(--neo-text-primary);
}

.neo-audit-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neo-divider);
}

.neo-audit-panel-heading h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 650;
}

.neo-audit-panel-heading p {
    margin: 4px 0 0;
    color: var(--neo-text-secondary);
    font-size: 13px;
}

.neo-audit-panel-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.neo-audit-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    color: var(--neo-text-secondary);
    background: var(--neo-surface-muted);
    border: 1px dashed var(--neo-border);
    border-radius: 8px;
}

.neo-audit-timeline {
    display: grid;
}

.neo-audit-entry {
    position: relative;
    min-width: 0;
}

.neo-audit-timeline .neo-audit-entry {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 0 0 18px;
}

.neo-audit-timeline .neo-audit-entry::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 34px;
    bottom: 0;
    width: 1px;
    background: var(--neo-divider);
}

.neo-audit-timeline .neo-audit-entry:last-child::before {
    display: none;
}

.neo-audit-marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--neo-audit-tone);
    background: color-mix(in srgb, var(--neo-audit-tone) 12%, white);
    border: 1px solid color-mix(in srgb, var(--neo-audit-tone) 28%, var(--neo-border));
    border-radius: 50%;
}

.neo-audit-entry-body {
    min-width: 0;
    padding: 10px 12px;
    background: var(--neo-surface);
    border: 1px solid var(--neo-border);
    border-radius: 10px;
}

.neo-audit-entry-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.neo-audit-entry-title {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 14px;
}

.neo-audit-entry-title span,
.neo-audit-entry-description,
.neo-audit-entry-meta {
    color: var(--neo-text-secondary);
}

.neo-audit-entry-description {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.45;
}

.neo-audit-entry-meta {
    display: grid;
    gap: 3px;
    justify-items: end;
    font-size: 12px;
    white-space: nowrap;
}

.neo-audit-changes {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.neo-audit-change {
    display: grid;
    grid-template-columns: minmax(80px, 0.8fr) minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 7px 8px;
    background: var(--neo-surface-muted);
    border: 1px solid var(--neo-divider);
    border-radius: 6px;
    font-size: 12px;
}

.neo-audit-change-field,
.neo-audit-change-new {
    color: var(--neo-text-primary);
    font-weight: 600;
}

.neo-audit-change-old {
    color: var(--neo-text-muted);
    text-decoration: line-through;
}

.neo-audit-list {
    display: grid;
    border: 1px solid var(--neo-border);
    border-radius: 10px;
    overflow: hidden;
}

.neo-audit-list .neo-audit-entry {
    display: grid;
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: var(--neo-surface);
    border-bottom: 1px solid var(--neo-divider);
}

.neo-audit-list .neo-audit-entry:last-child {
    border-bottom: 0;
}

.neo-audit-list-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--neo-audit-tone);
}

.neo-audit-list-detail {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--neo-text-secondary);
    font-size: 13px;
}

.neo-audit-list-detail span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-audit-panel.variant-compact .neo-audit-entry-body {
    padding: 8px 10px;
}

.neo-audit-panel.variant-compact .neo-audit-entry {
    padding-bottom: 10px;
}

.neo-audit-panel.variant-compact .neo-audit-marker {
    width: 26px;
    height: 26px;
}

.neo-audit-panel.variant-compact .neo-audit-timeline .neo-audit-entry {
    grid-template-columns: 28px minmax(0, 1fr);
}

/* NeoCompliancePanel */
.neo-compliance-panel {
    display: grid;
    gap: 14px;
    color: var(--neo-text-primary);
}

.neo-compliance-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neo-divider);
}

.neo-compliance-panel-heading h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 650;
}

.neo-compliance-panel-heading p {
    margin: 4px 0 0;
    color: var(--neo-text-secondary);
    font-size: 13px;
}

.neo-compliance-panel-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.neo-compliance-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.neo-compliance-summary-item {
    display: grid;
    gap: 2px;
    padding: 12px;
    background: var(--neo-surface);
    border: 1px solid var(--neo-border);
    border-left: 4px solid var(--neo-text-secondary);
    border-radius: 8px;
}

.neo-compliance-summary-item.tone-success { border-left-color: var(--neo-success); }
.neo-compliance-summary-item.tone-danger { border-left-color: var(--neo-error); }
.neo-compliance-summary-item.tone-warning { border-left-color: var(--neo-warning); }
.neo-compliance-summary-item.tone-info { border-left-color: var(--neo-info); }

.neo-compliance-summary-count {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.neo-compliance-summary-label {
    color: var(--neo-text-secondary);
    font-size: 12px;
}

.neo-compliance-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    color: var(--neo-text-secondary);
    background: var(--neo-surface-muted);
    border: 1px dashed var(--neo-border);
    border-radius: 8px;
}

.neo-compliance-list {
    display: grid;
    gap: 10px;
}

.neo-compliance-check {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    background: var(--neo-surface);
    border: 1px solid var(--neo-border);
    border-left: 4px solid var(--neo-compliance-tone);
    border-radius: 10px;
}

.neo-compliance-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--neo-compliance-tone);
    background: var(--neo-compliance-bg);
    border: 1px solid color-mix(in srgb, var(--neo-compliance-tone) 26%, var(--neo-border));
    border-radius: 50%;
}

.neo-compliance-check-main {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.neo-compliance-check-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.neo-compliance-check-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.neo-compliance-check-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-compliance-check-title span,
.neo-compliance-check-description {
    color: var(--neo-text-secondary);
    font-size: 13px;
}

.neo-compliance-check-description {
    margin: 0;
    line-height: 1.45;
}

.neo-compliance-status-pill {
    padding: 3px 8px;
    color: var(--neo-compliance-tone);
    background: var(--neo-compliance-bg);
    border: 1px solid color-mix(in srgb, var(--neo-compliance-tone) 24%, var(--neo-border));
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.neo-compliance-comment {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    color: var(--neo-text-secondary);
    background: var(--neo-surface-muted);
    border: 1px solid var(--neo-divider);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .neo-compliance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .neo-compliance-check-title-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .neo-login {
        align-items: stretch;
        padding: 24px 16px 72px;
    }

    .neo-login-shell {
        align-content: start;
    }

    .neo-login-card {
        padding: 32px 28px 36px !important;
    }

    .neo-login-footer {
        right: 16px;
        left: 16px;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

/* Base Form Styles */
.neo-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
}

.neo-section {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--neo-border-radius);
    background-color: var(--fill-color);
    box-shadow: var(--neo-shadow-sm);
    margin-bottom: 1rem;
}

.neo-section-header {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--neutral-layer-2);
}

.neo-section-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--neutral-foreground-rest);
}

.neo-section-body {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.neo-section-report-wide {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
}

.neo-section-report-wide .neo-section-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 1rem 0;
}

.neo-tabs-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* Helper text */
.neo-tabs-shell .neo-tabs-helper {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-text-secondary);
    padding: 0 0.25rem;
}

/* Error text */
.neo-tabs-shell .neo-tabs-error {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-error);
    padding: 0 0.25rem;
}

/* Error state — accent the tabs border */
.neo-tabs-shell.has-error fluent-tabs.neo-tabs-root {
    border-color: var(--neo-error);
}

.neo-tabs-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.neo-tabs-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-foreground-rest);
}

.neo-tabs-subtitle {
    margin-top: 0.35rem;
    font-size: 0.76rem;
    color: var(--neutral-foreground-hint);
    max-width: 72ch;
}

.neo-tabs-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.neo-tabs-root {
    width: 100%;
    background-color: var(--fill-color);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    box-shadow: var(--neo-shadow-sm);
    overflow: visible;
}

.neo-tabs-header-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    min-width: 0;
    width: 100%;
    padding-bottom: 0;
}

.neo-tabs-header-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    position: relative;
}

.neo-tabs-header-copy::after {
    content: '';
    position: absolute;
    left: 50%;
    width: calc(100% - 1.12rem);
    bottom: -0.52rem;
    height: 3px;
    border-radius: 999px;
    background-color: var(--neo-ribbon-active-indicator-color, #217346);
    opacity: 0;
    transform: translateX(-50%);
}

.neo-tabs-header-label {
    font-weight: 700;
    color: var(--neutral-foreground-rest);
    line-height: 1.1;
}

.neo-tabs-header-subtitle {
    font-size: 0.64rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.1;
    margin-top: 0.25rem;
}

.neo-tabs-header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--neo-primary) 12%, white 88%);
    color: var(--neo-primary);
    font-size: 0.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

fluent-tabs.neo-tabs-root::part(tablist) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-layer-2) 75%, white 25%) 0%, var(--neutral-layer-2) 100%);
    border-bottom: 1px solid var(--neutral-stroke-rest);
    padding: 0.35rem 0.5rem 0;
    gap: 0.25rem;
}

fluent-tabs.neo-tabs-root fluent-tab::part(control) {
    border-radius: 8px 8px 0 0;
    padding: 0.8rem 1rem 0.9rem;
    min-width: 180px;
    width: 100%;
}

fluent-tabs.neo-tabs-root fluent-tab[aria-selected='true']::part(control) {
    background-color: var(--fill-color);
    border-bottom: none !important;
    box-shadow: none !important;
}

fluent-tabs.neo-tabs-root fluent-tab[aria-selected='true'] .neo-tabs-header-copy::after {
    opacity: 1;
}

fluent-tabs.neo-tabs-root::part(activeIndicator),
fluent-tabs.neo-tabs-root::part(active-indicator),
fluent-tabs.neo-tabs-root fluent-tab::part(activeIndicator),
fluent-tabs.neo-tabs-root fluent-tab::part(active-indicator) {
    display: none !important;
}

.neo-tabs-panel {
    padding: 1.25rem;
    background-color: var(--fill-color);
    overflow: visible;
}

.neo-tabs-panel .neo-form {
    padding: 0;
}

.neo-demo-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.neo-demo-metric-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.neo-badge {
    --neo-badge-bg: #eef6fc;
    --neo-badge-fg: var(--neo-primary);
    --neo-badge-solid-bg: var(--neo-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    background: var(--neo-badge-bg);
    color: var(--neo-badge-fg);
}

/* ── Shape ──────────────────────────────────── */

.neo-badge.shape-circular {
    border-radius: 999px;
}

.neo-badge.shape-rounded {
    border-radius: 6px;
}

.neo-badge.shape-square {
    border-radius: 0;
}

/* ── Size ───────────────────────────────────── */

.neo-badge.size-tiny {
    min-height: 14px;
    padding: 0 0.3rem;
    font-size: 0.625rem;
}

.neo-badge.size-extra-small {
    min-height: 16px;
    padding: 0 0.35rem;
    font-size: 0.65rem;
}

.neo-badge.size-small {
    min-height: 18px;
    padding: 0 0.45rem;
    font-size: 0.6875rem;
}

.neo-badge.size-medium {
    min-height: 22px;
    padding: 0 0.55rem;
    font-size: 0.75rem;
}

.neo-badge.size-large {
    min-height: 26px;
    padding: 0 0.7rem;
    font-size: 0.8125rem;
}

.neo-badge.size-extra-large {
    min-height: 32px;
    padding: 0 1rem;
    font-size: 0.875rem;
}

/* ── Appearance ──────────────────────────────── */

.neo-badge.appearance-tint {
    background: var(--neo-badge-bg);
    color: var(--neo-badge-fg);
    border-color: transparent;
}

.neo-badge.appearance-filled {
    background: var(--neo-badge-solid-bg);
    color: #ffffff;
    border-color: transparent;
}

.neo-badge.appearance-outline {
    background: transparent;
    color: var(--neo-badge-fg);
    border-color: var(--neo-badge-fg);
}

.neo-badge.appearance-ghost {
    background: transparent;
    color: var(--neo-badge-fg);
    border-color: transparent;
}

/* ── Color ───────────────────────────────────── */

.neo-badge.color-accent,
.neo-badge.color-primary {
    --neo-badge-bg: #e8f3ff;
    --neo-badge-fg: var(--neo-primary);
    --neo-badge-solid-bg: var(--neo-primary);
}

.neo-badge.color-neutral {
    --neo-badge-bg: var(--neo-surface-selected);
    --neo-badge-fg: var(--neo-text-primary);
    --neo-badge-solid-bg: #616161;
}

.neo-badge.color-info,
.neo-badge.color-processing {
    --neo-badge-bg: #eef6fc;
    --neo-badge-fg: var(--neo-info);
    --neo-badge-solid-bg: var(--neo-info);
}

.neo-badge.color-success,
.neo-badge.color-completed {
    --neo-badge-bg: #e7f6e7;
    --neo-badge-fg: var(--neo-success);
    --neo-badge-solid-bg: var(--neo-success);
}

.neo-badge.color-warning,
.neo-badge.color-pending {
    --neo-badge-bg: #fff4ce;
    --neo-badge-fg: #8a6d00;
    --neo-badge-solid-bg: #8a6d00;
}

.neo-badge.color-danger,
.neo-badge.color-cancelled {
    --neo-badge-bg: #fdf3f4;
    --neo-badge-fg: var(--neo-error);
    --neo-badge-solid-bg: var(--neo-error);
}

.neo-badge.color-draft {
    --neo-badge-bg: #f3f2f1;
    --neo-badge-fg: var(--neo-text-secondary);
    --neo-badge-solid-bg: var(--neo-text-secondary);
}

.neo-badge.color-tint {
    --neo-badge-bg: #f5edff;
    --neo-badge-fg: #5c2e91;
    --neo-badge-solid-bg: #5c2e91;
}

.neo-badge.color-important {
    --neo-badge-bg: #fef0f0;
    --neo-badge-fg: #d13438;
    --neo-badge-solid-bg: #d13438;
}

.neo-badge.color-severe {
    --neo-badge-bg: #fff4e6;
    --neo-badge-fg: #bc4b1e;
    --neo-badge-solid-bg: #bc4b1e;
}

.neo-badge.color-subtle {
    --neo-badge-bg: #f5f5f5;
    --neo-badge-fg: var(--neo-text-secondary);
    --neo-badge-solid-bg: #8a8886;
}

/* ── Icon slot ───────────────────────────────── */

.neo-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.neo-badge.has-icon-before .neo-badge-icon {
    margin-right: 0.3em;
}

.neo-badge.has-icon-after .neo-badge-icon {
    margin-left: 0.3em;
}

/* ── Interactive ─────────────────────────────── */

.neo-badge.is-interactive {
    cursor: pointer;
}

.neo-badge.is-interactive:hover {
    filter: brightness(0.96);
}

.neo-badge.is-interactive:focus-visible {
    outline: 2px solid var(--neo-focus-ring);
    outline-offset: 2px;
}

.neo-status-badge {
    /* Marker class — visual styling is delegated to .neo-badge child classes */
}
.neo-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    vertical-align: middle;
}

.neo-tag.size-small {
    font-size: 0.75rem;
}

.neo-tag.size-large {
    font-size: 0.9rem;
}

.neo-tag.size-extra-small,
.neo-tag.size-xs {
    font-size: 0.6875rem;
}

.neo-tag.is-selected {
    box-shadow: 0 0 0 1px var(--neo-primary) inset;
}

.neo-tag.variant-urgent,
.neo-tag.variant-priority {
    font-weight: 700;
}

.neo-tag.variant-success,
.neo-tag.variant-approved,
.neo-tag.variant-warning,
.neo-tag.variant-pending,
.neo-tag.variant-error,
.neo-tag.variant-danger,
.neo-tag.variant-blocked,
.neo-tag.variant-info,
.neo-tag.variant-neutral,
.neo-tag.variant-urgent,
.neo-tag.variant-priority {
    border-color: color-mix(in srgb, currentColor 28%, transparent 72%);
}

.neo-tag.is-interactive {
    cursor: pointer;
}

.neo-tag.is-interactive:hover {
    filter: brightness(0.97);
}

.neo-tag .neo-tag-icon {
    width: 1rem;
    height: 1rem;
}

.neo-tag .neo-tag-content {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    white-space: normal;
}

.neo-tag .neo-tag-primary {
    white-space: normal;
}

.neo-tag .neo-tag-secondary {
    color: var(--neo-text-secondary);
    font-size: 0.92em;
}

/* ── NeoTagPicker ───────────────────────────────────────────── */
.neo-tagpicker {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.neo-tagpicker-label {
    color: var(--neo-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0 0.25rem;
}

.neo-tagpicker-control {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.25rem 0.3rem 0.25rem 0.45rem;
    border: 1px solid var(--neo-border);
    border-bottom-color: var(--neo-border-neutral);
    border-radius: var(--neo-border-radius);
    background: var(--neo-surface);
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.neo-tagpicker-control:hover {
    border-color: var(--neo-text-secondary);
}

.neo-tagpicker.is-open .neo-tagpicker-control,
.neo-tagpicker-control:focus-within {
    border-color: var(--neo-border);
    box-shadow: inset 0 -2px 0 var(--neo-focus-ring);
}

.neo-tagpicker-tags {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.neo-tagpicker-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: var(--neo-tagpicker-tag-max-width, 14rem);
    min-height: 1.5rem;
    padding: 0.1rem 0.25rem 0.1rem 0.35rem;
    border-radius: 999px;
    background: var(--neutral-layer-2, #f5f5f5);
    color: var(--neo-text-primary);
    line-height: 1;
}

.neo-tagpicker-tag-icon {
    flex: 0 0 auto;
    font-size: 0.875rem;
}

.neo-tagpicker-tag-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

.neo-tagpicker-tag-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--neo-text-secondary);
    cursor: pointer;
}

.neo-tagpicker-tag-dismiss:hover {
    background: color-mix(in srgb, var(--neo-text-secondary) 14%, transparent 86%);
    color: var(--neo-text-primary);
}

.neo-tagpicker-tag-dismiss .neo-icon {
    font-size: 0.8rem;
}

.neo-tagpicker-input {
    flex: 1 1 9rem;
    min-width: 7rem;
    height: 1.5rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--neo-text-primary);
    font: inherit;
    font-size: 0.875rem;
}

.neo-tagpicker-secondary {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.neo-tagpicker-action {
    border: 0;
    background: transparent;
    color: var(--neo-text-primary);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
    white-space: nowrap;
}

.neo-tagpicker-action:hover {
    color: var(--neo-primary);
    text-decoration: underline;
}

.neo-tagpicker-action:focus-visible {
    outline: 2px solid var(--neo-focus-ring);
    outline-offset: 2px;
}

.neo-tagpicker-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: calc(var(--neo-border-radius) - 1px);
    background: transparent;
    color: var(--neo-text-secondary);
    cursor: pointer;
}

.neo-tagpicker-toggle:hover:not(:disabled) {
    background: var(--neo-surface-hover);
    color: var(--neo-text-primary);
}

.neo-tagpicker-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.neo-tagpicker.is-open .neo-tagpicker-toggle .neo-icon {
    transform: rotate(180deg);
}

.neo-tagpicker-toggle .neo-icon {
    transition: transform 0.15s ease;
}

.neo-tagpicker-dropdown {
    position: absolute;
    z-index: 20;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    max-height: 260px;
    margin: 0;
    padding: 0.55rem;
    overflow: auto;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 8px;
    background: var(--neo-surface);
    box-shadow: var(--neo-shadow-md);
    list-style: none;
}

.neo-tagpicker-options-header {
    padding: 0.35rem 0.45rem 0.55rem;
    color: var(--neo-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
}

.neo-tagpicker-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem;
    border-radius: 6px;
    cursor: pointer;
}

.neo-tagpicker-option:hover,
.neo-tagpicker-option.is-active {
    background: var(--neo-surface-hover);
}

.neo-tagpicker-option-icon {
    margin-top: 0.1rem;
}

.neo-tagpicker-option-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.neo-tagpicker-option-label {
    color: var(--neo-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

.neo-tagpicker-option-desc,
.neo-tagpicker-helper,
.neo-tagpicker-error {
    color: var(--neo-text-secondary);
    font-size: 0.75rem;
    line-height: 1.35;
    padding: 0 0.25rem;
}

.neo-tagpicker-error {
    color: var(--neo-error);
}

.neo-tagpicker.has-error .neo-tagpicker-control {
    border-color: var(--neo-error);
    box-shadow: inset 0 -2px 0 var(--neo-error);
}

.neo-tagpicker.no-border .neo-tagpicker-control {
    border-color: transparent;
}

.neo-tagpicker.is-disabled .neo-tagpicker-control,
.neo-tagpicker.is-readonly .neo-tagpicker-control {
    background: var(--neo-disabled-bg);
    color: var(--neo-text-disabled);
    cursor: not-allowed;
}

.neo-tagpicker.is-disabled,
.neo-tagpicker.is-readonly {
    opacity: 0.85;
}

.neo-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 0.8125rem;
    line-height: 1.45;
    width: 100%;
    box-sizing: border-box;
    background: var(--neo-alert-bg, #f5f5f5);
    border-color: var(--neo-alert-border, #e0e0e0);
    color: var(--neo-alert-fg, #242424);
}

.neo-alert-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    font-size: 16px;
}

.neo-alert-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.neo-alert-title {
    font-weight: 600;
    color: inherit;
}

.neo-alert-message {
    color: color-mix(in srgb, var(--neo-alert-fg, #242424) 85%, transparent);
}

.neo-alert-actions {
    margin-top: 6px;
    display: flex;
    gap: 8px;
}

.neo-alert-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.12s, background 0.12s;
}

.neo-alert-close:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--neo-alert-fg, #242424) 10%, transparent);
}

/* ── Intents ──────────────────────────────────── */

.neo-alert.intent-info {
    --neo-alert-bg: #eef6fc;
    --neo-alert-border: #c7e0f4;
    --neo-alert-fg: #0f6cbd;
}

.neo-alert.intent-success {
    --neo-alert-bg: #e7f6e7;
    --neo-alert-border: #b7dfb7;
    --neo-alert-fg: #107c10;
}

.neo-alert.intent-warning {
    --neo-alert-bg: #fff4ce;
    --neo-alert-border: #fee68c;
    --neo-alert-fg: #8a6d00;
}

.neo-alert.intent-error {
    --neo-alert-bg: #fdf3f4;
    --neo-alert-border: #f1bbbc;
    --neo-alert-fg: #d13438;
}

/* ── Has title/message modifiers ──────────────── */

.neo-alert.has-title .neo-alert-message {
    margin-top: 0;
}

.neo-alert.has-message .neo-alert-title {
    margin-bottom: 0;
}

.neo-alert.closable {
    padding-right: 10px;
}

.neo-alert.has-action {
    padding-bottom: 10px;
}

.neo-inline-message {
    width: 100%;
}

.neo-inline-message::part(control) {
    border-radius: 8px;
}

.neo-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.neo-skeleton-item {
    display: block;
    border-radius: 8px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--neutral-layer-3) 90%, white 10%) 8%, color-mix(in srgb, var(--neutral-layer-4) 84%, white 16%) 18%, color-mix(in srgb, var(--neutral-layer-3) 90%, white 10%) 33%);
    background-size: 220% 100%;
}

.neo-skeleton-item-line {
    min-height: 0.8rem;
}

.neo-skeleton-item-rectangle {
    min-height: 4.5rem;
}

.neo-skeleton-item-circle {
    border-radius: 999px;
}

.neo-skeleton-animated .neo-skeleton-item {
    animation: neo-skeleton-shimmer 1.25s linear infinite;
}

@keyframes neo-skeleton-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

.neo-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 220px;
    padding: 1.5rem;
    border: 1px dashed color-mix(in srgb, var(--neutral-stroke-rest) 80%, transparent 20%);
    border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-layer-2) 45%, white 55%) 0%, var(--fill-color) 100%);
    text-align: center;
}

.neo-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--neo-primary) 14%, white 86%);
    color: var(--neo-primary);
}

.neo-empty-state-title {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--neutral-foreground-rest);
}

.neo-empty-state-description {
    max-width: 56ch;
    font-size: 0.88rem;
    color: var(--neutral-foreground-hint);
}

.neo-empty-state-content {
    width: 100%;
}

.neo-empty-state-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.neo-dialog-title {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--neutral-foreground-rest);
}

.neo-dialog-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.15rem 1.2rem 1.1rem;
}

.neo-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.neo-dialog-header-copy {
    min-width: 0;
}

.neo-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(640px, 88vw);
}

.neo-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    width: 100%;
}

.neo-drawer-title {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--neutral-foreground-rest);
}

.neo-drawer-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 1rem;
}

.neo-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.neo-drawer-header-copy {
    min-width: 0;
}

.neo-drawer-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    min-height: 0;
}

.neo-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    width: 100%;
}

.neo-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
}

.neo-drawer.scope-content {
    position: absolute;
}

.neo-drawer.mode-inline {
    position: absolute;
}

.neo-drawer.placement-left {
    justify-content: flex-start;
}

.neo-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, #000 28%, transparent 72%);
}

.neo-drawer-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(var(--neo-drawer-width, 25%), 96vw);
    height: 100%;
    max-width: 100%;
    background: var(--fill-color, #fff);
    border-left: 1px solid var(--neutral-stroke-rest, #d9d9d9);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
}

.neo-drawer.scope-window .neo-drawer-panel {
    height: 100dvh;
}

.neo-drawer.size-quarter .neo-drawer-panel {
    width: 25%;
}

.neo-drawer.size-half .neo-drawer-panel {
    width: 50%;
}

.neo-drawer.size-three-quarter .neo-drawer-panel {
    width: 75%;
}

.neo-drawer.size-full .neo-drawer-panel,
.neo-drawer.is-maximized .neo-drawer-panel {
    width: 100%;
    max-width: 100%;
}

.neo-drawer.mode-inline .neo-drawer-panel {
    box-shadow: -6px 0 18px rgba(15, 23, 42, 0.12);
}

.neo-drawer.placement-left .neo-drawer-panel {
    border-right: 1px solid var(--neutral-stroke-rest, #d9d9d9);
    border-left: 0;
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.18);
}

.neo-drawer-panel .neo-drawer-header {
    padding: 1rem;
    border-bottom: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

.neo-drawer-subtitle {
    color: var(--neutral-foreground-hint, #666);
    font-size: 0.84rem;
}

.neo-drawer-header-texts {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.neo-drawer-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.neo-drawer-toolbutton {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--neutral-foreground-rest, #242424);
    cursor: pointer;
    font-size: 0.76rem;
}

.neo-drawer-toolbutton:hover {
    background: var(--neutral-fill-hover, #f3f2f1);
}

.neo-drawer-dismiss,
.neo-drawer-stack-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--neutral-foreground-rest, #242424);
    cursor: pointer;
}

.neo-drawer-dismiss:hover,
.neo-drawer-stack-dismiss:hover {
    background: var(--neutral-fill-hover, #f3f2f1);
}

.neo-drawer-panel .neo-drawer-body {
    flex: 1;
    overflow: auto;
    padding: 1rem;
}

.neo-drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

.neo-drawer-stack {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--neutral-stroke-rest, #d9d9d9);
    border-radius: 10px;
    background: color-mix(in srgb, var(--fill-color, #fff) 78%, #eef3f8 22%);
}

.neo-drawer-stack.mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
}

.neo-drawer-stack-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, #172033 12%, transparent 88%);
}

.neo-drawer-stack-panels {
    position: absolute;
    inset: 0 0 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    width: 100%;
    pointer-events: none;
}

.neo-drawer-stack-item {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--fill-color, #fff);
    border-left: 1px solid var(--neutral-stroke-rest, #d9d9d9);
    box-shadow: -10px 0 24px rgba(15, 23, 42, 0.16);
    pointer-events: auto;
}

.neo-drawer-stack.enable-animations .neo-drawer-stack-item {
    transition: transform 220ms ease, opacity 220ms ease, box-shadow 220ms ease;
}

.neo-drawer-stack-item.is-active {
    box-shadow: -16px 0 34px rgba(15, 23, 42, 0.22);
}

.neo-drawer-stack-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

.neo-drawer-stack-header-copy {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}

.neo-drawer-stack-icon {
    margin-top: 0.15rem;
    color: var(--accent-fill-rest, #0f6cbd);
}

.neo-drawer-stack-title {
    color: var(--neutral-foreground-rest, #242424);
    font-weight: 700;
}

.neo-drawer-stack-subtitle {
    color: var(--neutral-foreground-hint, #666);
    font-size: 0.84rem;
}

.neo-drawer-stack-body {
    flex: 1;
    overflow: auto;
    padding: 1rem;
}

.neo-drawer-stack-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

.neo-drawer-stack-item.has-unsaved-changes .neo-drawer-stack-header {
    border-bottom-color: color-mix(in srgb, var(--accent-fill-rest, #0f6cbd) 35%, var(--neutral-stroke-rest, #e0e0e0) 65%);
}

/* ── NeoLookupDialog ────────────────────────────────────────── */
.neo-lookup-dialog {
    display: grid;
    gap: 14px;
    min-width: min(680px, 86vw);
}

.neo-lookup-description {
    margin: 0;
    color: var(--neo-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.neo-lookup-results {
    display: grid;
    gap: 6px;
    max-height: min(420px, 52vh);
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--neo-border);
    border-radius: 12px;
    background: var(--neo-surface-subtle);
}

.neo-lookup-item {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--neo-surface);
    color: var(--neo-text-primary);
    text-align: left;
    cursor: pointer;
}

.neo-lookup-item:hover,
.neo-lookup-item:focus-visible {
    border-color: var(--neo-primary);
    outline: none;
}

.neo-lookup-item.is-selected {
    border-color: var(--neo-primary);
    background: var(--neo-primary-subtle);
}

.neo-lookup-item-main {
    font-size: 13px;
    font-weight: 600;
}

.neo-lookup-item-description {
    color: var(--neo-text-secondary);
    font-size: 12px;
}

.neo-lookup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── NeoPermissionHint ─────────────────────────────────────── */
.neo-permission-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    color: var(--neo-permission-hint-color, var(--neutral-foreground-rest, #242424));
    font-size: 0.875rem;
    line-height: 1.2;
    vertical-align: middle;
}

.neo-permission-hint.display-badge {
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--neo-permission-hint-border, var(--neutral-stroke-rest, #d9d9d9));
    border-radius: 999px;
    background: var(--neo-permission-hint-bg, var(--neutral-fill-secondary-rest, #f5f5f5));
}

.neo-permission-hint.display-inline {
    padding: 0.1rem 0;
    background: transparent;
    border: 0;
    gap: 0.4rem;
}

.neo-permission-hint.display-icononly {
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--neo-permission-hint-border, var(--neutral-stroke-rest, #d9d9d9));
    border-radius: 50%;
    background: var(--neo-permission-hint-bg, var(--neutral-fill-secondary-rest, #f5f5f5));
}

.neo-permission-hint.compact {
    font-size: 0.78rem;
}

.neo-permission-hint.compact.display-badge {
    padding: 0.18rem 0.45rem;
}

.neo-permission-hint-icon {
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1rem;
}

.neo-permission-hint-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-permission-hint.intent-info {
    --neo-permission-hint-color: #0f6cbd;
    --neo-permission-hint-border: color-mix(in srgb, #0f6cbd 32%, transparent 68%);
    --neo-permission-hint-bg: color-mix(in srgb, #0f6cbd 10%, white 90%);
}

.neo-permission-hint.intent-neutral {
    --neo-permission-hint-color: var(--neutral-foreground-rest, #424242);
    --neo-permission-hint-border: var(--neutral-stroke-rest, #d9d9d9);
    --neo-permission-hint-bg: var(--neutral-fill-secondary-rest, #f5f5f5);
}

.neo-permission-hint.intent-warning {
    --neo-permission-hint-color: #8a6100;
    --neo-permission-hint-border: color-mix(in srgb, #f2c94c 58%, transparent 42%);
    --neo-permission-hint-bg: color-mix(in srgb, #f2c94c 18%, white 82%);
}

.neo-permission-hint.intent-error {
    --neo-permission-hint-color: #b10e1c;
    --neo-permission-hint-border: color-mix(in srgb, #b10e1c 34%, transparent 66%);
    --neo-permission-hint-bg: color-mix(in srgb, #b10e1c 10%, white 90%);
}

.neo-permission-hint:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #0f6cbd);
    outline-offset: 2px;
}

/* ── NeoContextPane ───────────────────────────────────────────── */
.neo-context-pane {
    --neo-context-pane-width: 320px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    background: var(--neo-surface);
    color: var(--neo-text-primary);
}

.neo-context-pane.is-open {
    width: var(--neo-context-pane-width, 320px);
    min-height: 0;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 10px;
    box-shadow: var(--neo-shadow-md);
    overflow: hidden;
}

.neo-context-pane.mode-docked.is-open {
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}

.neo-context-pane.mode-overlay.is-open {
    z-index: 30;
}

.neo-context-pane.side-left.mode-docked.is-open {
    border-left: 0;
}

.neo-context-pane.side-right.mode-docked.is-open {
    border-right: 0;
}

.neo-context-pane-compact-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    max-width: 100%;
    padding: 0 0.65rem;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 8px;
    background: var(--neo-surface);
    color: var(--neo-primary);
    cursor: pointer;
    box-shadow: var(--neo-shadow-sm);
    overflow: hidden;
}

.neo-context-pane:not(.show-compact-text) .neo-context-pane-compact-btn {
    padding: 0;
}

.neo-context-pane-compact-btn:hover {
    background: var(--neo-surface-hover);
}

.neo-context-pane-compact-label {
    min-width: 0;
    overflow: hidden;
    color: var(--neo-text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-context-pane-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--neo-error);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
}

.neo-context-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-bottom: 1px solid var(--neo-divider);
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-layer-2) 65%, white 35%) 0%, var(--neo-surface) 100%);
}

.neo-context-pane-title {
    min-width: 0;
    overflow: hidden;
    color: var(--neo-text-primary);
    font-size: 0.92rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-context-pane-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--neo-text-secondary);
    cursor: pointer;
}

.neo-context-pane-close-btn:hover {
    background: var(--neo-surface-hover);
    color: var(--neo-text-primary);
}

.neo-context-pane-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.95rem;
    overflow: auto;
}

.neo-context-pane-busy,
.neo-context-pane-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 8rem;
    padding: 1rem;
    color: var(--neo-text-secondary);
    font-size: 0.84rem;
    text-align: center;
}

.neo-context-pane-busy .neo-icon {
    animation: neo-spin 1s linear infinite;
}

.neo-context-pane-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-top: 1px solid var(--neo-divider);
    background: var(--neo-surface-muted);
}

.neo-context-pane-footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.neo-context-pane-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 6px;
    background: var(--neo-surface);
    color: var(--neo-text-primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.neo-context-pane-action:hover {
    background: var(--neo-surface-hover);
}

.neo-context-pane-action-primary {
    border-color: var(--neo-primary);
    background: var(--neo-primary);
    color: #fff;
}

.neo-context-pane-action-primary:hover {
    background: var(--neo-primary-hover);
}

.neo-context-pane-action-icon {
    width: 2rem;
    padding: 0;
    color: var(--neo-primary);
}

.neo-context-pane-resize-grip {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.35rem;
    cursor: col-resize;
    background: transparent;
}

.neo-context-pane.side-left .neo-context-pane-resize-grip {
    right: -0.175rem;
}

.neo-context-pane.side-right .neo-context-pane-resize-grip {
    left: -0.175rem;
}

.neo-context-pane-resize-grip:hover {
    background: color-mix(in srgb, var(--neo-primary) 18%, transparent 82%);
}

fluent-dialog.neo-drawer::part(positioning-region) {
    align-items: stretch;
    padding: 0;
}

fluent-dialog.neo-drawer.neo-drawer-right::part(positioning-region) {
    justify-content: flex-end;
}

fluent-dialog.neo-drawer.neo-drawer-left::part(positioning-region) {
    justify-content: flex-start;
}

fluent-dialog.neo-drawer::part(control) {
    margin: 0;
    width: min(var(--neo-drawer-width, 420px), 96vw);
    max-width: 96vw;
    height: 100dvh;
    border-radius: 0;
}

@media (max-width: 900px) {
    .neo-dialog-body {
        width: min(92vw, 640px);
    }
}

.fluent-datepicker-popup {
    position: relative;
    z-index: 10020;
    background-color: var(--fill-color);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    box-shadow: var(--neo-shadow-lg);
}

fluent-anchored-region:has(.fluent-datepicker-popup) {
    z-index: 10020 !important;
}

.neo-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.neo-field-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.neo-field-required {
    color: var(--neo-error);
    margin-left: 0.25rem;
}

.neo-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: end;
}

.neo-date-range-item {
    min-width: 0;
}

.neo-date-range-caption {
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.neo-date-range-divider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2.5rem;
    margin-bottom: 0.05rem;
    color: var(--neutral-foreground-hint);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .neo-date-range {
        grid-template-columns: minmax(0, 1fr);
    }

    .neo-date-range-divider {
        display: none;
    }
}

.neo-radio-group-shell {
    width: 100%;
}

.neo-radio-group-shell fluent-radio-group {
    width: 100%;
}

.neo-radio-group-shell fluent-radio::part(label) {
    white-space: normal;
}

.neo-radio-option-label {
    display: block;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.neo-radio-option-description {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--neutral-foreground-hint);
    max-width: 34ch;
}

/* Data Grid Styles */
.neo-grid-container {
    position: relative;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--neo-border-radius);
    background-color: var(--fill-color);
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.neo-grid-zebra fluent-data-grid-row:not([row-type='header']):nth-of-type(even) {
    background-color: var(--neo-grid-zebra-bg, color-mix(in srgb, var(--neutral-layer-2) 28%, var(--fill-color) 72%));
}

.neo-grid-vertical-lines fluent-data-grid-cell {
    border-right: 1px var(--neo-grid-line-style, solid) var(--neo-grid-vertical-line, var(--neutral-stroke-rest));
}

.neo-grid-horizontal-lines fluent-data-grid-row:not(:last-child) fluent-data-grid-cell {
    border-bottom: 1px var(--neo-grid-line-style, solid) var(--neo-grid-horizontal-line, var(--neutral-stroke-rest));
}

.neo-grid-selection-scope:focus-within {
    box-shadow: 0 0 0 2px var(--neo-grid-selection-highlight, var(--neo-focus-ring));
}

.neo-grid-scroll-host {
    overflow: auto;
    min-height: 0;
    width: 100%;
}

.neo-grid-report-shell {
    height: var(--neo-grid-height, 520px);
    border-radius: var(--neo-border-radius);
    box-shadow: var(--neo-shadow-sm);
}

.neo-grid-container fluent-data-grid {
    width: 100%;
    min-width: 100%;
    min-inline-size: var(--neo-grid-min-width, 100%);
}

.neo-grid-container fluent-data-grid-cell {
    min-height: 40px;
    padding: 8px 12px !important;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: visible !important;
}

.neo-grid-container fluent-data-grid-row[row-type='header'] {
    background-color: var(--neo-grid-header-bg, var(--neutral-layer-2)) !important;
    font-weight: 700;
}

.neo-grid-container fluent-data-grid-row:not([row-type='header']):hover {
    background-color: var(--neutral-fill-stealth-hover, color-mix(in srgb, var(--neutral-layer-2) 46%, var(--fill-color) 54%));
}

.neo-grid-empty,
.neo-grid-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1rem;
    color: var(--neo-text-secondary);
    text-align: center;
}

.neo-grid-error {
    min-height: auto;
    justify-content: flex-start;
    color: var(--neo-error);
    background: color-mix(in srgb, var(--neo-error) 8%, white);
    border-top: 1px solid color-mix(in srgb, var(--neo-error) 24%, var(--neo-border));
}

.neo-grid-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--neo-text-secondary);
    background: color-mix(in srgb, var(--neo-surface) 82%, transparent);
    backdrop-filter: blur(2px);
}

.neo-grid-cell-amount {
    text-align: right;
    font-family: 'Segoe UI Mono', 'Consolas', monospace;
    font-weight: 700;
    color: var(--neo-primary);
    width: 100%;
}

.neo-grid-cell-code {
    font-family: 'Segoe UI Mono', 'Consolas', monospace;
    color: var(--neutral-foreground-hint);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.neo-grid-cell-date {
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.neo-grid-cell-center {
    text-align: center;
}

.neo-grid-footer {
    border-top: 1px solid var(--neutral-stroke-rest);
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-layer-2) 55%, white 45%) 0%, var(--neutral-layer-2) 100%);
    padding: 0;
    z-index: 2;
}

.neo-grid-footer-sticky {
    position: sticky;
    bottom: 0;
}

.neo-grid-summary-row {
    display: grid;
    grid-template-columns: var(--neo-grid-summary-template, minmax(180px, 1.1fr) minmax(260px, 1.6fr) minmax(140px, 0.9fr) minmax(150px, 1fr) minmax(140px, 0.9fr) minmax(140px, 0.9fr) minmax(140px, 0.9fr) 110px);
    align-items: center;
    gap: 0;
    min-width: var(--neo-grid-min-width, 100%);
}

.neo-grid-summary-cell {
    padding: 14px 16px;
    border-right: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 70%, transparent 30%);
    font-size: 0.88rem;
    font-weight: 700;
    min-width: 0;
}

.neo-grid-summary-cell:last-child {
    border-right: none;
}

.neo-grid-summary-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-foreground-hint);
}

.neo-grid-summary-value {
    text-align: right;
    color: var(--neo-primary);
    font-family: 'Segoe UI Mono', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
}

.neo-grid-aggregate-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.neo-grid-aggregate-value {
    text-align: right;
    color: var(--neo-primary);
    font-family: 'Segoe UI Mono', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.neo-grid-aggregate-operation {
    margin-top: 0.2rem;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--neutral-foreground-hint);
}

.neo-grid-aggregate-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--neutral-foreground-hint);
    border-radius: var(--neo-border-radius);
}

.neo-grid-aggregate-trigger:hover {
    background: var(--neutral-fill-stealth-hover, color-mix(in srgb, var(--neutral-layer-2) 60%, transparent));
    color: var(--neo-primary);
}

.neo-grid-aggregate-trigger-spacer {
    display: inline-block;
    width: 1.45rem;
    height: 1.45rem;
}

.neo-grid-aggregate-menu .neo-menu-trigger::part(control) {
    min-width: 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: var(--neo-border-radius);
    background: transparent;
    box-shadow: none;
}

.neo-grid-aggregate-static {
    color: var(--neutral-foreground-hint);
    font-weight: 600;
}

.neo-editable-grid fluent-text-field,
.neo-editable-grid fluent-number-field,
.neo-editable-grid fluent-select,
.neo-editable-grid fluent-checkbox {
    width: 100%;
}

.neo-editable-grid fluent-data-grid-row:not([row-type='header']) {
    background-color: color-mix(in srgb, var(--fill-color) 92%, var(--neutral-layer-2) 8%);
}

.neo-editable-grid.is-readonly fluent-text-field,
.neo-editable-grid.is-readonly fluent-number-field,
.neo-editable-grid.is-readonly fluent-select,
.neo-editable-grid.is-readonly fluent-checkbox {
    pointer-events: none;
    opacity: 0.72;
}

.neo-editable-grid.has-dirty-items .neo-grid-container {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--neo-warning) 38%, transparent);
}

.neo-ribbon {
    background-color: #f5f5f5;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    flex-direction: column;
}

.neo-ribbon-tabs {
    display: flex;
    align-items: flex-end;
    min-height: 34px;
    padding: 0 0.52rem;
    background-color: #f5f5f5;
    border-bottom: none;
    gap: 0.3rem;
}

.neo-ribbon-tab-item {
    position: relative;
    margin-top: 0.12rem;
    padding: 0.38rem 0.54rem 0.34rem;
    cursor: pointer;
    font-size: 0.89rem;
    font-weight: 400;
    color: #444;
    border-radius: 6px 6px 0 0;
    transition: color 0.16s ease, background-color 0.16s ease;
}

.neo-ribbon-tab-item:hover {
    color: #202020;
    background-color: transparent;
}

.neo-ribbon-tab-item.active {
    color: #1f1f1f;
    font-weight: 600;
}

.neo-ribbon-tab-item.active::after {
    content: '';
    position: absolute;
    left: 0.56rem;
    right: 0.56rem;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background-color: var(--neo-ribbon-active-indicator-color, #217346);
}

.neo-ribbon-content {
    margin: 0 0.3rem 0.34rem;
    padding: 0.34rem 0.58rem 0.34rem;
    display: flex;
    gap: 0.18rem;
    background-color: #ffffff;
    border: 1px solid #d6d6d6;
    border-top: none;
    border-radius: 7px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    min-height: 98px;
    align-items: stretch;
}

.neo-ribbon-group {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0.12rem;
    padding: 0 0.62rem 0.02rem;
    border-right: none;
    min-height: 88px;
}

.neo-ribbon-group::after {
    content: '';
    position: absolute;
    right: 0;
    top: 8px;
    bottom: 16px;
    width: 1px;
    background-color: #dbdbdb;
}

.neo-ribbon-group:last-child::after {
    display: none;
}

.neo-ribbon-group-content {
    display: flex;
    gap: 0.12rem;
    align-items: stretch;
    flex: 1;
}

.neo-ribbon-group-title {
    font-size: 0.7rem;
    color: #666;
    letter-spacing: 0.01em;
    font-weight: 400;
}

.neo-ribbon-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.27rem 0.44rem 0.22rem;
    cursor: pointer;
    min-width: 58px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

.neo-ribbon-button-container:hover {
    background-color: var(--neo-ribbon-button-hover-bg, #ececec);
    border-color: transparent;
}

.neo-ribbon-button-container.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.neo-ribbon-button-icon {
    font-size: 24px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d63bd;
}

.neo-ribbon-button-text {
    font-size: 0.74rem;
    font-weight: 400;
    text-align: center;
    line-height: 1.1;
    margin-top: 0.16rem;
    color: var(--neutral-foreground-rest);
}

/* Shell Layout */
.neo-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.neo-shell-topbar {
    height: 44px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-layer-1) 90%, white 10%) 0%, color-mix(in srgb, var(--neutral-layer-1) 72%, white 28%) 100%);
    color: var(--neutral-foreground-rest);
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    justify-content: space-between;
    border-bottom: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 76%, transparent 24%);
}

.neo-shell-topbar-start,
.neo-shell-topbar-end {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.neo-shell-app-title {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.neo-shell-topbar fluent-button::part(control) {
    border-radius: 5px;
}

.neo-shell-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.neo-shell-content {
    flex: 1;
    overflow-y: auto;
    background-color: #f5f5f5;
}

/* Navigation Components */
.neo-navigation-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--neo-surface);
    border-right: 1px solid var(--neo-border-neutral);
    color: var(--neo-text-primary);
    transition: width 0.16s ease, min-width 0.16s ease, max-width 0.16s ease;
}

.neo-navigation-pane.sizing-stretch {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.neo-navigation-pane-header,
.neo-navigation-group-header,
.neo-navigation-section-header,
.neo-navigation-module-switcher-header,
.neo-navigation-favorites-header,
.neo-navigation-recent-items-header,
.neo-navigation-searchbox-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.neo-navigation-pane-header {
    min-height: 3.25rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--neo-divider);
}

.neo-navigation-pane-header-icon,
.neo-navigation-item-icon,
.neo-navigation-group-expand-icon,
.neo-navigation-section-expand-icon,
.neo-navigation-module-switcher-chevron,
.neo-navigation-item-chevron,
.neo-navigation-item-favorite-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.neo-navigation-pane-header-icon,
.neo-navigation-item-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--neo-primary);
}

.neo-navigation-pane-header-titles,
.neo-navigation-group-header-content,
.neo-navigation-section-header-content,
.neo-navigation-module-switcher-header-content,
.neo-navigation-favorites-header-content,
.neo-navigation-recent-items-header-content,
.neo-navigation-searchbox-header-content,
.neo-navigation-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.neo-navigation-pane-title,
.neo-navigation-group-title,
.neo-navigation-section-title,
.neo-navigation-module-switcher-current-text,
.neo-navigation-favorites-title,
.neo-navigation-recent-items-title,
.neo-navigation-searchbox-title,
.neo-navigation-item-text {
    color: var(--neo-text-primary);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-navigation-pane-subtitle,
.neo-navigation-group-description,
.neo-navigation-section-description,
.neo-navigation-module-switcher-current-description,
.neo-navigation-favorites-description,
.neo-navigation-recent-items-description,
.neo-navigation-searchbox-description,
.neo-navigation-item-description,
.neo-navigation-item-secondary,
.neo-navigation-searchbox-result-text,
.neo-navigation-favorites-empty-text,
.neo-navigation-recent-items-empty-text,
.neo-navigation-module-switcher-empty-text {
    color: var(--neo-text-secondary);
    font-size: 0.75rem;
    line-height: 1.3;
}

.neo-navigation-pane-toggle,
.neo-navigation-searchbox-search-button,
.neo-navigation-searchbox-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--neo-text-secondary);
    cursor: pointer;
}

.neo-navigation-pane-toggle:hover,
.neo-navigation-searchbox-search-button:hover,
.neo-navigation-searchbox-clear-button:hover {
    background: var(--neo-surface-hover);
    color: var(--neo-text-primary);
}

.neo-navigation-pane-toggle:focus-visible,
.neo-navigation-searchbox-search-button:focus-visible,
.neo-navigation-searchbox-clear-button:focus-visible,
.neo-navigation-item:focus-visible,
.neo-navigation-group-header:focus-visible,
.neo-navigation-section-header:focus-visible,
.neo-navigation-module-switcher-header:focus-visible {
    outline: 2px solid var(--neo-focus-ring);
    outline-offset: 2px;
}

.neo-navigation-pane-content,
.neo-navigation-group-content,
.neo-navigation-section-content,
.neo-navigation-favorites-content,
.neo-navigation-recent-items-content,
.neo-navigation-module-switcher-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.neo-navigation-pane-content {
    flex: 1 1 auto;
    padding: 0.75rem;
    overflow: auto;
}

.neo-navigation-item-wrapper {
    min-width: 0;
}

.neo-navigation-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.6rem;
    border-radius: 7px;
    color: var(--neo-text-primary);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.neo-navigation-item:hover {
    background: var(--neo-surface-hover);
}

.neo-navigation-item.selected {
    background: color-mix(in srgb, var(--neo-primary) 12%, white 88%);
    color: var(--neo-primary);
    font-weight: 700;
}

.neo-navigation-item.disabled,
.neo-navigation-item-wrapper--disabled {
    color: var(--neo-text-disabled);
    cursor: not-allowed;
    opacity: 0.65;
}

.neo-navigation-item.level-1 { padding-left: 1.55rem; }
.neo-navigation-item.level-2 { padding-left: 2.45rem; }
.neo-navigation-item.level-3 { padding-left: 3.35rem; }

.neo-navigation-item.compact {
    justify-content: center;
    padding-inline: 0.45rem;
}

.neo-navigation-item.compact .neo-navigation-item-content,
.neo-navigation-pane.is-compact .neo-navigation-pane-title,
.neo-navigation-pane.is-compact .neo-navigation-pane-subtitle {
    display: none;
}

.neo-navigation-item-badge,
.neo-navigation-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    min-height: 1.25rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--neo-primary) 12%, white 88%);
    color: var(--neo-primary);
    font-size: 0.7rem;
    font-weight: 800;
}

.neo-navigation-item-favorite-star {
    color: #8a6d00;
}

.neo-navigation-group,
.neo-navigation-section,
.neo-navigation-favorites,
.neo-navigation-recent-items,
.neo-navigation-module-switcher,
.neo-navigation-searchbox {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.neo-navigation-group-header,
.neo-navigation-section-header,
.neo-navigation-module-switcher-header {
    padding: 0.45rem 0.55rem;
    border-radius: 7px;
    cursor: pointer;
}

.neo-navigation-group-header:hover,
.neo-navigation-section-header:hover,
.neo-navigation-module-switcher-header:hover {
    background: var(--neo-surface-hover);
}

.neo-navigation-group-content,
.neo-navigation-section-content,
.neo-navigation-module-switcher-dropdown {
    padding-left: 0.5rem;
}

.neo-navigation-section-footer {
    padding: 0.45rem 0.55rem;
    color: var(--neo-text-secondary);
    font-size: 0.75rem;
}

.neo-navigation-favorites-header,
.neo-navigation-recent-items-header,
.neo-navigation-searchbox-header {
    padding: 0.25rem 0.15rem;
}

.neo-navigation-favorites-empty,
.neo-navigation-recent-items-empty,
.neo-navigation-module-switcher-empty {
    padding: 0.65rem;
    border: 1px dashed var(--neo-border-neutral);
    border-radius: 7px;
    background: var(--neo-surface-muted);
}

.neo-navigation-searchbox-input-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.neo-navigation-searchbox-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.neo-navigation-searchbox-input {
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 6px;
    background: var(--neo-surface);
    color: var(--neo-text-primary);
    font: inherit;
    font-size: 0.875rem;
}

.neo-navigation-searchbox-input:focus {
    outline: none;
    border-color: var(--neo-primary);
    box-shadow: 0 0 0 1px var(--neo-primary);
}

.neo-navigation-searchbox-spinner {
    position: absolute;
    right: 0.55rem;
    color: var(--neo-text-secondary);
    animation: neo-spin 1s linear infinite;
}

.neo-navigation-searchbox-result {
    padding: 0 0.15rem;
}

.neo-icon-button {
    min-width: 2.15rem;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
}

.neo-split-button {
    display: inline-flex;
    align-items: stretch;
}

.neo-split-button .neo-split-button-main {
    border-radius: 6px 0 0 6px;
}

.neo-split-button .neo-split-button-menu {
    margin-left: -1px;
}

.neo-split-button .neo-split-button-menu::part(control) {
    min-width: 2.15rem;
    width: 2.15rem;
    padding: 0;
    border-radius: 0 6px 6px 0;
}

.neo-split-button .neo-split-button-menu::part(content) {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.neo-command-button {
    min-width: 220px;
}

.neo-command-button-copy {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    text-align: left;
}

.neo-command-button-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.neo-command-button-description {
    font-size: 0.74rem;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
}

.neo-link-button {
    font-weight: 700;
}

.neo-tooltip {
    font-size: 0.78rem;
    line-height: 1.35;
}

.neo-popover {
    max-width: 320px;
}

.neo-confirm-dialog-message {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--neutral-foreground-rest);
    max-width: 58ch;
}

.neo-progress-overlay {
    position: relative;
    min-height: 180px;
}

.neo-progress-overlay-content {
    position: relative;
    z-index: 1;
}

.neo-progress-overlay-backdrop {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--fill-color) 76%, transparent 24%);
    backdrop-filter: blur(1px);
}

.neo-progress-overlay-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--neutral-stroke-rest);
    background-color: var(--fill-color);
    box-shadow: var(--neo-shadow-md);
}

.neo-progress-overlay-message {
    font-size: 0.82rem;
    color: var(--neutral-foreground-hint);
    font-weight: 600;
}

/* ── NeoToast (Fluent 2) ───────────────────────────────────────── */

.neo-toaster {
    position: fixed;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
    min-width: 280px;
    pointer-events: none;
}

.toaster-top-right {
    top: 16px;
    right: 16px;
}

.toaster-bottom-right {
    bottom: 16px;
    right: 16px;
}

.neo-toast {
    display: flex;
    background: var(--neo-surface);
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-border-radius);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    pointer-events: auto;
    overflow: hidden;
    min-width: 280px;
    max-width: 400px;
    animation: neo-toast-slide-in 0.25s ease-out;
}

@keyframes neo-toast-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.neo-toast-bar {
    width: 4px;
    flex-shrink: 0;
}

.intent-success .neo-toast-bar { background: var(--neo-success); }
.intent-warning .neo-toast-bar { background: #D97706; }
.intent-error .neo-toast-bar { background: var(--neo-error); }
.intent-progress .neo-toast-bar { background: var(--neo-primary); }
.intent-info .neo-toast-bar { background: var(--neo-primary); }

.intent-success .neo-toast-icon { color: var(--neo-success); }
.intent-warning .neo-toast-icon { color: #D97706; }
.intent-error .neo-toast-icon { color: var(--neo-error); }
.intent-progress .neo-toast-icon { color: var(--neo-primary); }
.intent-info .neo-toast-icon { color: var(--neo-primary); }

.neo-toast-body {
    flex: 1;
    padding: 12px 12px 12px 10px;
    min-width: 0;
}

.neo-toast-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.neo-toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 1px;
}

.neo-toast-text {
    flex: 1;
    min-width: 0;
}

.neo-toast-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-text-primary);
    line-height: 1.4;
}

.neo-toast-message {
    font-size: 12px;
    color: var(--neo-text-secondary);
    line-height: 1.4;
    margin-top: 2px;
}

.neo-toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--neo-text-muted);
    cursor: pointer;
    border-radius: 3px;
    margin-top: -2px;
    margin-right: -4px;
}

.neo-toast-close:hover {
    background: var(--neo-surface-hover);
    color: var(--neo-text-primary);
}

.neo-toast-close:focus-visible {
    box-shadow: 0 0 0 1px var(--neo-focus-ring);
    outline: none;
}

.neo-toast-action {
    flex-shrink: 0;
    padding: 3px 10px;
    border: 1px solid var(--neo-border);
    border-radius: 3px;
    background: var(--neo-surface);
    color: var(--neo-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

.neo-toast-action:hover {
    background: var(--neo-surface-hover);
    border-color: var(--neo-primary);
}

.neo-toast-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.neo-toast-progress-track {
    flex: 1;
    height: 4px;
    background: var(--neo-surface-muted);
    border-radius: 2px;
    overflow: hidden;
}

.neo-toast-progress-fill {
    height: 100%;
    background: var(--neo-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.neo-toast-progress-text {
    font-size: 11px;
    color: var(--neo-text-muted);
    flex-shrink: 0;
}

@keyframes neo-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.neo-spinner {
    animation: neo-spin 1s linear infinite;
}

/* ── End NeoToast ──────────────────────────────────────────────── */

/* NEO SELECT - FIXED ALIGNMENT & STRUCTURAL GRID */
.neo-select-wrapper {
    width: 100%;
}

fluent-select {
    width: 100%;
}

fluent-select::part(listbox) {
    min-width: var(--neo-popup-width, var(--neo-popup-width-default)) !important;
    width: auto !important;
    max-height: 500px !important;
    margin-top: 0 !important;
    transform: translateY(-6px) !important;
    padding: 10px !important;
    box-shadow: var(--neo-shadow-lg) !important;
    border-radius: 8px !important;
    background-color: var(--fill-color) !important;
    border: 1px solid var(--neutral-stroke-rest) !important;
    z-index: 9999;
}

fluent-option {
    max-width: none !important;
    width: 100% !important;
    display: flex !important;
}

fluent-option::part(content) {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
}

.neo-combo-item-content {
    display: grid !important;
    grid-template-columns: var(--neo-columns-template, 40px 1fr 100px auto) !important;
    gap: 1.5rem;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border-radius: 4px;
    border-left: 4px solid transparent;
    transition: all 0.15s ease-in-out;
}

fluent-option:hover .neo-combo-item-content {
    background-color: var(--neutral-layer-2);
    border-left-color: var(--neo-primary);
}

fluent-option[selected] .neo-combo-item-content {
    border-left-color: var(--neo-primary);
    background-color: var(--neutral-layer-3);
}

.neo-combo-icon {
    display: flex;
    justify-content: center;
    color: var(--neo-primary);
    font-size: 26px;
}

.neo-combo-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
    text-align: left;
}

.neo-combo-column-start {
    align-items: flex-start;
    text-align: left;
}

.neo-combo-column-center {
    align-items: center;
    text-align: center;
}

.neo-combo-column-end,
.neo-combo-column-numeric,
.neo-combo-column-currency {
    align-items: flex-end;
    text-align: right;
}

.neo-combo-text-main {
    font-weight: 700;
    font-size: 1rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-combo-text-secondary {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    font-weight: 600;
    font-family: monospace;
}

.neo-combo-text-start {
    text-align: left;
}

.neo-combo-text-center {
    text-align: center;
}

.neo-combo-text-end,
.neo-combo-text-numeric,
.neo-combo-text-currency {
    text-align: right;
}

.neo-combo-text-numeric,
.neo-combo-text-currency {
    font-variant-numeric: tabular-nums;
}

.neo-combo-badge {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    justify-self: stretch;
    width: 100%;
    text-align: right;
}

/* ── NeoSelect state extension ─────────────────────────────────── */

.neo-select-wrapper.has-error fluent-select::part(control) {
    --neutral-stroke-input-rest: var(--neo-error);
    --neutral-stroke-input-hover: var(--neo-error);
    --neutral-stroke-input-active: var(--neo-error);
}

.neo-select-wrapper.no-border fluent-select::part(control) {
    border-color: transparent !important;
}

.neo-select-wrapper.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.neo-select-wrapper .neo-select-error {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-error);
    padding: 0 0.25rem;
}

.neo-select-wrapper .neo-select-helper {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-text-secondary);
    padding: 0 0.25rem;
}

/* Other Layout Components */
.neo-page-header {
    padding: 1.5rem 2rem;
    background-color: var(--neutral-layer-1);
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.neo-card {
    background-color: var(--fill-color);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    box-shadow: var(--neo-shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ── NeoCard Variants (Fluent 2) ──────────────────────────── */

.neo-card.variant-elevated {
    box-shadow: 0 4px 14px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    border-color: var(--neutral-stroke-rest);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.neo-card.variant-elevated:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    transform: scale(1.005);
}

.neo-card.variant-outlined {
    box-shadow: none;
    border: 1px solid var(--neo-border);
    border-color: var(--neutral-stroke-rest);
}

.neo-card.variant-flat {
    box-shadow: none;
    border: none;
    background-color: transparent;
}

.neo-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-layer-2) 68%, white 32%) 0%, color-mix(in srgb, var(--neutral-layer-2) 40%, white 60%) 100%);
}

.neo-card-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--neutral-foreground-rest);
}

.neo-card-body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.neo-card-body > :first-child,
.neo-card-footer > :first-child {
    margin-top: 0;
}

.neo-card-body > :last-child,
.neo-card-footer > :last-child {
    margin-bottom: 0;
}

.neo-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
    background-color: color-mix(in srgb, var(--neutral-layer-2) 45%, white 55%);
}

.neo-panel {
    background-color: var(--fill-color);
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 82%, transparent 18%);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.neo-panel-elevated {
    box-shadow: var(--neo-shadow-sm);
}

.neo-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-layer-2) 62%, white 38%) 0%, color-mix(in srgb, var(--neutral-layer-2) 40%, white 60%) 100%);
}

.neo-panel-heading {
    min-width: 0;
}

.neo-panel-title {
    margin: 0;
    font-size: 0.89rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--neutral-foreground-rest);
}

.neo-panel-subtitle {
    margin-top: 0.28rem;
    font-size: 0.82rem;
    color: var(--neutral-foreground-hint);
}

.neo-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.neo-panel-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.neo-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
    background-color: color-mix(in srgb, var(--neutral-layer-2) 44%, white 56%);
}

.neo-stack {
    display: flex;
    flex-direction: var(--neo-stack-direction, column);
    flex-wrap: var(--neo-stack-wrap, nowrap);
    align-items: var(--neo-stack-align, stretch);
    justify-content: var(--neo-stack-justify, flex-start);
    gap: var(--neo-stack-gap, 0.75rem);
    min-width: 0;
    width: 100%;
}

.neo-stack-inline {
    width: auto;
}

.neo-split-view {
    display: grid;
    gap: var(--neo-split-gap, 1rem);
    width: 100%;
}

.neo-split-view-vertical {
    grid-template-columns: var(--neo-split-primary-size, minmax(0, 1.8fr)) var(--neo-split-secondary-size, minmax(300px, 1fr));
    align-items: start;
}

.neo-split-view-horizontal {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--neo-split-primary-size, minmax(240px, 1.2fr)) var(--neo-split-secondary-size, minmax(220px, 1fr));
}

.neo-split-view-pane {
    min-width: 0;
}

.neo-split-view-vertical.neo-split-view-resizable {
    grid-template-columns: var(--neo-split-primary-size, 720px) 10px var(--neo-split-secondary-size, minmax(280px, 1fr));
}

.neo-split-view-horizontal.neo-split-view-resizable {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--neo-split-primary-size, 420px) 10px var(--neo-split-secondary-size, minmax(220px, 1fr));
}

.neo-split-view-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    cursor: col-resize;
    border-left: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
    border-right: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-layer-2) 52%, white 48%) 0%, color-mix(in srgb, var(--neutral-layer-2) 35%, white 65%) 100%);
}

.neo-split-view-vertical .neo-split-view-divider {
    align-self: stretch;
}

.neo-split-view-horizontal .neo-split-view-divider {
    width: 100%;
    height: 10px;
    cursor: row-resize;
    border-left: none;
    border-right: none;
    border-top: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
    border-bottom: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
}

.neo-split-view-divider-handle {
    width: 4px;
    height: 52px;
    border-radius: 999px;
    background: repeating-linear-gradient(
        to bottom,
        color-mix(in srgb, var(--neutral-foreground-hint) 65%, transparent 35%) 0,
        color-mix(in srgb, var(--neutral-foreground-hint) 65%, transparent 35%) 3px,
        transparent 3px,
        transparent 7px
    );
    opacity: 0.9;
    transition: opacity 0.16s ease, filter 0.16s ease;
}

.neo-split-view-horizontal .neo-split-view-divider-handle {
    width: 52px;
    height: 4px;
    background: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--neutral-foreground-hint) 65%, transparent 35%) 0,
        color-mix(in srgb, var(--neutral-foreground-hint) 65%, transparent 35%) 3px,
        transparent 3px,
        transparent 7px
    );
}

.neo-split-view-divider:hover .neo-split-view-divider-handle {
    opacity: 1;
    filter: contrast(1.2);
}

.neo-split-view-resizing .neo-split-view-divider-handle {
    opacity: 1;
    filter: contrast(1.35) saturate(1.1);
}

.neo-split-view-resizing,
.neo-split-view-resizing * {
    user-select: none;
}

.neo-split-view-secondary-first .neo-split-view-primary {
    order: 3;
}

.neo-split-view-secondary-first .neo-split-view-secondary {
    order: 1;
}

.neo-split-view-secondary-first .neo-split-view-divider {
    order: 2;
}

/* ── NeoAccordion (Fluent 2) ────────────────────────────────────── */

.neo-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.neo-accordion-item {
    border-bottom: 1px solid var(--neo-divider);
}

.neo-accordion-item:last-child {
    border-bottom: none;
}

.neo-accordion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 8px;
    border: none;
    background: var(--neo-surface);
    color: var(--neo-text-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.neo-accordion-header:hover {
    background: var(--neo-surface-hover);
}

.neo-accordion-header:focus-visible {
    box-shadow: inset 0 0 0 1px var(--neo-focus-ring);
    background: var(--neo-surface-hover);
}

.neo-accordion-header:active {
    background: var(--neo-surface-pressed);
}

.neo-accordion-header::-moz-focus-inner {
    border: 0;
}

.neo-accordion-chevron {
    flex-shrink: 0;
    color: var(--neo-text-muted);
    transition: transform 0.2s ease;
}

.neo-accordion-item.expanded .neo-accordion-chevron {
    transform: rotate(90deg);
}

.neo-accordion-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--neo-text-primary);
}

.neo-accordion-subtitle {
    font-size: 12px;
    color: var(--neo-text-muted);
    flex-shrink: 0;
    margin-left: auto;
}

.neo-accordion-panel {
    padding: 4px 8px 12px 32px;
    font-size: 13px;
    color: var(--neo-text-secondary);
    line-height: 1.5;
}

.neo-accordion-item.disabled .neo-accordion-header {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Indicator placement — Right */
.neo-accordion.indicator-right .neo-accordion-header {
    flex-direction: row-reverse;
}

.neo-accordion.indicator-right .neo-accordion-panel {
    padding-left: 8px;
    padding-right: 32px;
}

/* HasError state */
.neo-accordion.has-error .neo-accordion-header {
    box-shadow: inset 0 0 0 1px var(--neo-error);
}

.neo-accordion.has-error .neo-accordion-header:hover {
    box-shadow: inset 0 0 0 1px var(--neo-error);
}

/* Helper/Error text */
.neo-accordion .neo-accordion-helper {
    font-size: 12px;
    color: var(--neo-text-secondary);
    padding: 4px 8px 0;
}

.neo-accordion .neo-accordion-error {
    font-size: 12px;
    color: var(--neo-error);
    padding: 4px 8px 0;
}

/* ── End NeoAccordion ──────────────────────────────────────────── */

.neo-summary-card {
    display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 82%, transparent 18%);
    border-radius: 8px;
    background-color: var(--fill-color);
    box-shadow: var(--neo-shadow-sm);
    min-height: 100%;
}

.neo-summary-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem 0.7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-layer-2) 58%, white 42%) 0%, color-mix(in srgb, var(--neutral-layer-2) 40%, white 60%) 100%);
}

.neo-summary-card-title {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--neutral-foreground-rest);
}

.neo-summary-card-subtitle {
    margin-top: 0.24rem;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

.neo-summary-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.neo-summary-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.95rem;
}

.neo-summary-card-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.neo-summary-card-value {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.neo-summary-card-description {
    font-size: 0.84rem;
    color: var(--neutral-foreground-hint);
}

.neo-summary-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.neo-summary-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.75rem 0.95rem 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 72%, transparent 28%);
    background-color: color-mix(in srgb, var(--neutral-layer-2) 44%, white 56%);
}

@media (max-width: 980px) {
    .neo-split-view {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .neo-split-view-vertical.neo-split-view-resizable,
    .neo-split-view-horizontal.neo-split-view-resizable {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .neo-split-view-divider {
        display: none;
    }

    .neo-split-view-secondary-first .neo-split-view-primary,
    .neo-split-view-secondary-first .neo-split-view-secondary {
        order: initial;
    }
}

.neo-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-layer-2) 55%, white 45%) 0%, var(--fill-color) 100%);
}

.neo-toolbar-start,
.neo-toolbar-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.neo-toolbar-start {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.neo-toolbar-end {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
    white-space: nowrap;
}

.neo-toolbar fluent-button {
    width: auto !important;
    flex: 0 0 auto;
}

.neo-toolbar fluent-button::part(control) {
    width: auto;
}

@media (max-width: 900px) {
    .neo-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .neo-toolbar-start {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .neo-toolbar-end {
        justify-content: flex-start;
        margin-left: 0;
        white-space: normal;
    }
}

/* ── NeoSearchBox ──────────────────────────────────────────── */

.neo-searchbox {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.neo-searchbox-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neo-text-primary);
    padding: 0 0.25rem;
}

.neo-searchbox-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--neo-border);
    border-bottom-color: var(--neo-border-neutral);
    border-radius: var(--neo-border-radius);
    background: var(--neo-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.neo-searchbox-input-wrapper:hover {
    border-color: var(--neo-text-secondary);
}

.neo-searchbox.is-focused .neo-searchbox-input-wrapper {
    border-color: var(--neo-border);
    box-shadow: inset 0 -2px 0 var(--neo-primary);
}

.neo-searchbox.has-validation .neo-searchbox-input-wrapper {
    border-color: var(--neo-error);
}

.neo-searchbox.has-validation.is-focused .neo-searchbox-input-wrapper {
    border-color: var(--neo-error);
    box-shadow: inset 0 0 0 1px var(--neo-error);
}

.neo-searchbox-search-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--neo-text-secondary);
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
}

.neo-searchbox-search-icon .neo-icon {
    font-size: 1rem;
    line-height: 1;
}

.neo-searchbox-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--neo-text-primary);
    padding: 5px 0;
}

.neo-searchbox.has-search-button .neo-searchbox-input {
    padding-left: 0.65rem;
}

.neo-searchbox-input::placeholder {
    color: var(--neo-text-muted);
}

.neo-searchbox-input:disabled {
    color: var(--neo-text-disabled);
    cursor: not-allowed;
}

.neo-searchbox-clear {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 2px;
    border: none;
    border-radius: calc(var(--neo-border-radius) - 1px);
    background: transparent;
    color: var(--neo-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}

.neo-searchbox-clear:hover {
    background: var(--neo-surface-hover);
    color: var(--neo-text-primary);
}

.neo-searchbox-clear .neo-icon {
    font-size: 0.75rem;
    line-height: 1;
}

.neo-searchbox-filter-btn,
.neo-searchbox-search-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 2px;
    border: none;
    border-radius: calc(var(--neo-border-radius) - 1px);
    background: transparent;
    color: var(--neo-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}

.neo-searchbox-filter-btn:hover,
.neo-searchbox-search-btn:hover {
    background: var(--neo-surface-hover);
    color: var(--neo-text-primary);
}

.neo-searchbox-filter-btn .neo-icon,
.neo-searchbox-search-btn .neo-icon {
    font-size: 0.875rem;
    line-height: 1;
}

.neo-searchbox-spinner {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    border: 2px solid var(--neo-border);
    border-top-color: var(--neo-primary);
    border-radius: 50%;
    animation: neo-search-spin 0.6s linear infinite;
}

@keyframes neo-search-spin {
    to { transform: rotate(360deg); }
}

.neo-searchbox-helper {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-text-secondary);
    padding: 0 0.25rem;
}

.neo-searchbox-validation {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-error);
    padding: 0 0.25rem;
}

/* ── Sizes ── */

.neo-searchbox.density-small .neo-searchbox-search-icon {
    width: 24px;
    height: 24px;
    font-size: 0.8125rem;
}

.neo-searchbox.density-small .neo-searchbox-input {
    font-size: 0.8125rem;
    padding: 2px 0;
}

.neo-searchbox.density-small .neo-searchbox-clear,
.neo-searchbox.density-small .neo-searchbox-filter-btn,
.neo-searchbox.density-small .neo-searchbox-search-btn {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
}

.neo-searchbox.density-small .neo-searchbox-spinner {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
}

.neo-searchbox.density-large .neo-searchbox-search-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
}

.neo-searchbox.density-large .neo-searchbox-input {
    font-size: 1rem;
    padding: 7px 0;
}

.neo-searchbox.density-large .neo-searchbox-clear,
.neo-searchbox.density-large .neo-searchbox-filter-btn,
.neo-searchbox.density-large .neo-searchbox-search-btn {
    width: 34px;
    height: 34px;
}

/* ── Show border line variant ── */

.neo-searchbox.show-border .neo-searchbox-input-wrapper {
    border-width: 1px;
    border-style: solid;
    border-color: var(--neo-border);
}

.neo-searchbox.show-border.is-focused .neo-searchbox-input-wrapper {
    border-color: var(--neo-border);
    box-shadow: inset 0 -2px 0 var(--neo-primary);
    border-bottom-width: 1px;
}

/* ── NeoSearchPanel ─────────────────────────────────────────── */

.neo-search-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    color: var(--neo-text-primary);
}

.neo-search-panel.variant-panel,
.neo-search-panel.variant-dialog,
.neo-search-panel.variant-lookup {
    padding: 1rem;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 10px;
    background: var(--neo-surface);
    box-shadow: var(--neo-shadow-sm);
}

.neo-search-panel.variant-compact {
    gap: 0.45rem;
}

.neo-search-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.75rem;
    align-items: start;
}

.neo-search-panel-title,
.neo-search-panel-description {
    grid-column: 1;
    min-width: 0;
}

.neo-search-panel-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--neo-text-primary);
}

.neo-search-panel-description,
.neo-search-panel-recent-label,
.neo-search-panel-result-count {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--neo-text-secondary);
}

.neo-search-panel-header > :not(.neo-search-panel-title):not(.neo-search-panel-description) {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.neo-search-panel-quick-criteria,
.neo-search-panel-recent,
.neo-search-panel-content,
.neo-search-panel-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.neo-search-panel-recent,
.neo-search-panel-quick-criteria {
    padding: 0.65rem;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 8px;
    background: var(--neo-surface-muted);
}

.neo-search-panel-error {
    padding: 0.55rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--neo-error) 35%, white 65%);
    border-radius: 7px;
    background: #fdf3f4;
}

.neo-search-panel-error-text {
    color: var(--neo-error);
    font-size: 0.8rem;
    font-weight: 600;
}

.neo-search-panel-results-header {
    display: flex;
    justify-content: flex-end;
}

/* ── NeoNav ────────────────────────────────────────────────── */

.neo-nav {
    display: flex;
    flex-direction: column;
    width: 260px;
    background: var(--neo-surface);
    border-right: 1px solid var(--neo-border);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    color: var(--neo-text-primary);
    user-select: none;
    overflow: hidden;
    transition: width 0.2s ease;
}

.neo-nav.is-collapsed {
    width: 48px;
}

/* ── Header ── */

.neo-nav-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--neo-border);
    min-height: 48px;
}

.neo-nav-hamburger {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--neo-border-radius);
    background: transparent;
    color: var(--neo-text-secondary);
    cursor: pointer;
    font-size: 1.125rem;
    transition: background 0.1s ease, color 0.1s ease;
}

.neo-nav-hamburger:hover {
    background: var(--neo-surface-hover);
    color: var(--neo-text-primary);
}

.neo-nav-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neo-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Flex space ── */

.neo-nav-flex-space {
    padding: 8px;
    border-bottom: 1px solid var(--neo-border);
}

/* ── Body ── */

.neo-nav-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

/* ── Nav Item ── */

.neo-nav-item {
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.neo-nav-item-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    min-height: 36px;
    border: none;
    border-radius: var(--neo-border-radius);
    background: transparent;
    color: var(--neo-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
}

.neo-nav-item-btn:hover {
    background: var(--neo-surface-hover);
}

.neo-nav-item.is-selected .neo-nav-item-btn {
    background: var(--neo-surface-selected);
    font-weight: 600;
}

.neo-nav-item.is-selected .neo-nav-item-btn:hover {
    background: var(--neo-surface-selected-hover);
}

.neo-nav-item.is-disabled .neo-nav-item-btn {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.neo-nav-item.is-collapsed .neo-nav-item-btn {
    justify-content: center;
    padding: 6px 0;
}

.neo-nav-item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--neo-text-secondary);
}

.neo-nav-item.is-selected .neo-nav-item-icon {
    color: var(--neo-primary);
}

.neo-nav-item-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-nav-item-actions {
    display: none;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
}

.neo-nav-item:hover .neo-nav-item-actions,
.neo-nav-item:focus-within .neo-nav-item-actions {
    display: flex;
}

.neo-nav-item-actions ::deep button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: calc(var(--neo-border-radius) - 1px);
    background: transparent;
    color: var(--neo-text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.1s ease;
}

.neo-nav-item-actions ::deep button:hover {
    background: var(--neo-surface-hover);
    color: var(--neo-text-primary);
}

/* ── Nav Category ── */

.neo-nav-category {
    display: flex;
    flex-direction: column;
}

.neo-nav-category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    min-height: 36px;
    margin: 0 8px;
    border: none;
    border-radius: var(--neo-border-radius);
    background: transparent;
    color: var(--neo-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
}

.neo-nav-category-btn:hover {
    background: var(--neo-surface-hover);
}

.neo-nav-category.is-selected .neo-nav-category-btn {
    background: var(--neo-surface-selected);
    font-weight: 600;
}

.neo-nav-category.is-selected .neo-nav-category-btn:hover {
    background: var(--neo-surface-selected-hover);
}

.neo-nav-category.is-collapsed .neo-nav-category-btn {
    justify-content: center;
    padding: 6px 0;
    margin: 0 4px;
}

.neo-nav-category-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--neo-text-secondary);
}

.neo-nav-category.is-selected .neo-nav-category-icon {
    color: var(--neo-primary);
}

.neo-nav-category-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-nav-category-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-text-secondary);
    transition: transform 0.15s ease;
}

.neo-nav-category.is-expanded .neo-nav-category-chevron {
    transform: rotate(90deg);
}

/* ── Sub-items ── */

.neo-nav-subitems {
    display: flex;
    flex-direction: column;
    padding: 2px 0 2px 32px;
}

.neo-nav-subitem {
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
}

.neo-nav-subitem-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    min-height: 32px;
    border: none;
    border-radius: var(--neo-border-radius);
    background: transparent;
    color: var(--neo-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
}

.neo-nav-subitem-btn:hover {
    background: var(--neo-surface-hover);
}

.neo-nav-subitem.is-selected .neo-nav-subitem-btn {
    background: var(--neo-surface-selected);
    font-weight: 600;
}

.neo-nav-subitem.is-selected .neo-nav-subitem-btn:hover {
    background: var(--neo-surface-selected-hover);
}

.neo-nav-subitem.is-disabled .neo-nav-subitem-btn {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.neo-nav-subitem-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Footer ── */

.neo-nav-footer {
    padding: 8px;
    border-top: 1px solid var(--neo-border);
}

/* ── NeoTextField ────────────────────────────────────────────────── */

.neo-textfield-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    text-align: var(--neo-textfield-align, left);
}

/* Helper text */
.neo-textfield-wrapper .neo-textfield-helper {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-text-secondary);
    padding: 0 0.25rem;
}

/* Error text */
.neo-textfield-wrapper .neo-textfield-error {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-error);
    padding: 0 0.25rem;
}

/* Error state — accent the input border */
.neo-textfield-wrapper.has-error fluent-text-field::part(root) {
    --neutral-stroke-input-rest: var(--neo-error);
    --neutral-stroke-input-hover: var(--neo-error);
    --neutral-stroke-input-active: var(--neo-error);
}

.neo-textfield-wrapper.has-error fluent-text-field::part(control) {
    --neutral-stroke-input-rest: var(--neo-error);
    --neutral-stroke-input-hover: var(--neo-error);
    --neutral-stroke-input-active: var(--neo-error);
}

/* Hide the FluentUI bottom border line */
.neo-textfield-wrapper.no-border fluent-text-field::part(root) {
    border-color: transparent !important;
}

.neo-textfield-wrapper.no-border fluent-text-field::part(control) {
    border-color: transparent !important;
}

/* Suppress focus indicator entirely */
.neo-textfield-wrapper.no-focus-indicator fluent-text-field::part(root) {
    outline: none !important;
    box-shadow: none !important;
}

.neo-textfield-wrapper.no-focus-indicator fluent-text-field:focus-within::part(root) {
    outline: none !important;
    box-shadow: none !important;
}

/* Clear button in the end slot */
.neo-textfield-wrapper .neo-textfield-clear {
    cursor: pointer;
    color: var(--neo-text-muted);
    font-size: 0.875rem;
    line-height: 1;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 100%;
    transition: color 0.15s ease;
}

.neo-textfield-wrapper .neo-textfield-clear:hover {
    color: var(--neo-text-primary);
}

.neo-textfield-wrapper.disabled .neo-textfield-clear {
    display: none;
}

.neo-textfield-wrapper.readonly .neo-textfield-clear {
    display: none;
}

/* Focus accent via bottom indicator line (when ShowFocusIndicator is active) */
.neo-textfield-wrapper:not(.no-focus-indicator) fluent-text-field:focus-within::part(root) {
    box-shadow: inset 0 -2px 0 var(--neo-focus-ring);
}

/* ── NeoTextArea ────────────────────────────────────────────────── */

.neo-textarea-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

/* Helper text */
.neo-textarea-wrapper .neo-textarea-helper {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-text-secondary);
    padding: 0 0.25rem;
}

/* Error text */
.neo-textarea-wrapper .neo-textarea-error {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-error);
    padding: 0 0.25rem;
}

/* Error state — accent the input border */
.neo-textarea-wrapper.has-error fluent-text-area::part(root) {
    --neutral-stroke-input-rest: var(--neo-error);
    --neutral-stroke-input-hover: var(--neo-error);
    --neutral-stroke-input-active: var(--neo-error);
}

.neo-textarea-wrapper.has-error fluent-text-area::part(control) {
    --neutral-stroke-input-rest: var(--neo-error);
    --neutral-stroke-input-hover: var(--neo-error);
    --neutral-stroke-input-active: var(--neo-error);
}

/* Hide the FluentUI bottom border line */
.neo-textarea-wrapper.no-border fluent-text-area::part(root) {
    border-color: transparent !important;
}

.neo-textarea-wrapper.no-border fluent-text-area::part(control) {
    border-color: transparent !important;
}

/* ── Shared Input Foundation ─────────────────────────────────────
   Normalizes labels, helper/error text and focus treatment across
   text, textarea, select, search and tag picker controls. */

.neo-textfield-wrapper,
.neo-textarea-wrapper,
.neo-select-wrapper,
.neo-searchbox,
.neo-tagpicker {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.neo-searchbox-label,
.neo-tagpicker-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neo-text-primary);
    padding: 0 0.25rem;
}

.neo-textfield-wrapper .neo-textfield-helper,
.neo-textarea-wrapper .neo-textarea-helper,
.neo-select-wrapper .neo-select-helper,
.neo-searchbox-helper,
.neo-tagpicker-helper {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-text-secondary);
    padding: 0 0.25rem;
}

.neo-textfield-wrapper .neo-textfield-error,
.neo-textarea-wrapper .neo-textarea-error,
.neo-select-wrapper .neo-select-error,
.neo-searchbox-validation {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-error);
    padding: 0 0.25rem;
}

.neo-searchbox-input-wrapper,
.neo-tagpicker-control {
    border: 1px solid var(--neo-border);
    border-radius: var(--neo-border-radius);
    background: var(--neo-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.neo-searchbox-input-wrapper {
    border-bottom-color: var(--neo-border-neutral);
}

.neo-searchbox-input-wrapper:hover,
.neo-tagpicker-control:hover {
    border-color: var(--neo-text-secondary);
}

.neo-searchbox.is-focused .neo-searchbox-input-wrapper,
.neo-searchbox.show-border.is-focused .neo-searchbox-input-wrapper,
.neo-tagpicker.is-open .neo-tagpicker-control,
.neo-tagpicker-control:focus-within {
    border-color: var(--neo-border);
    box-shadow: inset 0 -2px 0 var(--neo-focus-ring);
}

.neo-textfield-wrapper:not(.no-focus-indicator) fluent-text-field:focus-within::part(root),
.neo-textarea-wrapper fluent-text-area:focus-within::part(root),
.neo-select-wrapper fluent-select:focus-within::part(control) {
    box-shadow: inset 0 -2px 0 var(--neo-focus-ring);
}

.neo-searchbox.has-validation .neo-searchbox-input-wrapper,
.neo-searchbox.has-validation.is-focused .neo-searchbox-input-wrapper {
    border-color: var(--neo-error);
    box-shadow: inset 0 -2px 0 var(--neo-error);
}

.neo-textfield-wrapper.has-error fluent-text-field::part(root),
.neo-textfield-wrapper.has-error fluent-text-field::part(control),
.neo-textarea-wrapper.has-error fluent-text-area::part(root),
.neo-textarea-wrapper.has-error fluent-text-area::part(control),
.neo-select-wrapper.has-error fluent-select::part(control) {
    --neutral-stroke-input-rest: var(--neo-error);
    --neutral-stroke-input-hover: var(--neo-error);
    --neutral-stroke-input-active: var(--neo-error);
}

.neo-textfield-wrapper.no-border fluent-text-field::part(root),
.neo-textfield-wrapper.no-border fluent-text-field::part(control),
.neo-textarea-wrapper.no-border fluent-text-area::part(root),
.neo-textarea-wrapper.no-border fluent-text-area::part(control),
.neo-select-wrapper.no-border fluent-select::part(control) {
    border-color: transparent !important;
}

/* ── NeoCheckbox ──────────────────────────────────────────────── */

.neo-checkbox-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

.neo-checkbox-wrapper fluent-checkbox {
    --accent-fill-rest: var(--neo-primary);
    --accent-fill-hover: var(--neo-primary-hover);
    --accent-fill-active: #005a9e;
    color: var(--neo-text-primary);
    font-size: 0.875rem;
    line-height: 1.35;
}

.neo-checkbox-wrapper fluent-checkbox::part(control) {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.neo-checkbox-wrapper fluent-checkbox::part(label) {
    color: var(--neo-text-primary);
    padding-inline-start: 0.5rem;
}

.neo-checkbox-wrapper.label-before fluent-checkbox::part(label) {
    order: -1;
    padding-inline: 0 0.5rem;
}

.neo-checkbox-wrapper.readonly fluent-checkbox::part(label) {
    color: var(--neo-text-secondary);
}

.neo-checkbox-wrapper.disabled fluent-checkbox::part(label),
.neo-checkbox-wrapper.disabled .neo-checkbox-helper {
    color: var(--neo-text-disabled);
}

.neo-checkbox-wrapper .neo-checkbox-helper {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-text-secondary);
    padding-inline: 1.65rem 0.25rem;
}

.neo-checkbox-wrapper.label-before .neo-checkbox-helper {
    padding-inline: 0.25rem;
}

/* Error text */
.neo-checkbox-wrapper .neo-checkbox-error {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-error);
    padding-inline: 1.65rem 0.25rem;
}

.neo-checkbox-wrapper.label-before .neo-checkbox-error {
    padding-inline: 0.25rem;
}

/* Error state — accent the checkbox label / border */
.neo-checkbox-wrapper.has-error fluent-checkbox::part(control) {
    --neutral-stroke-input-rest: var(--neo-error);
    --neutral-stroke-input-hover: var(--neo-error);
    --neutral-stroke-input-active: var(--neo-error);
}

.neo-checkbox-wrapper.has-error fluent-checkbox::part(label) {
    color: var(--neo-error);
}

/* ── Neo VM Components ─────────────────────────────────────────── */

.neo-vm-actionbar {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.neo-vm-actionbar.density-comfortable {
    gap: 0.4rem;
}

.neo-vm-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 30px;
    height: 30px;
    padding: 0 0.45rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--neo-text-primary);
    font: inherit;
    cursor: pointer;
}

.neo-vm-actionbar.size-medium .neo-vm-action-btn {
    min-width: 34px;
    height: 34px;
}

.neo-vm-action-btn:hover:not(:disabled) {
    background: var(--neo-surface-hover);
    border-color: var(--neo-border-neutral);
}

.neo-vm-action-btn:active:not(:disabled) {
    background: var(--neo-surface-pressed);
}

.neo-vm-action-btn:focus-visible {
    outline: 2px solid var(--neo-focus-ring);
    outline-offset: 2px;
}

.neo-vm-action-btn:disabled {
    color: var(--neo-text-disabled);
    cursor: not-allowed;
}

.neo-vm-action-btn.is-destructive {
    color: var(--neo-error);
}

.neo-vm-action-btn.is-destructive:hover:not(:disabled) {
    background: #fdf3f4;
    border-color: #f1bbbc;
}

.neo-vm-action-btn.is-pending .neo-vm-action-icon {
    animation: neo-vm-spin 1s linear infinite;
}

.neo-vm-action-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    object-fit: contain;
}

.neo-vm-action-label {
    font-size: 0.75rem;
    font-weight: 600;
}

.neo-vm-action-readonly {
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: var(--neo-surface-muted);
    color: var(--neo-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
}

.neo-vm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--neo-border);
    border-radius: 12px;
    background: var(--neo-surface);
    box-shadow: var(--neo-shadow-sm);
    color: var(--neo-text-primary);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.neo-vm-card:hover {
    border-color: #b7c7d8;
    box-shadow: var(--neo-shadow-md);
}

.neo-vm-card:focus-visible {
    outline: 2px solid var(--neo-focus-ring);
    outline-offset: 2px;
}

.neo-vm-card.is-selected {
    border-color: var(--neo-primary);
    box-shadow: 0 0 0 1px var(--neo-primary), var(--neo-shadow-md);
}

.neo-vm-card.is-readonly {
    cursor: default;
}

.neo-vm-card-header,
.neo-vm-card-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.neo-vm-card-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}

.neo-vm-card-os {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #eef6fc;
    color: var(--neo-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.neo-vm-card-titleblock {
    min-width: 0;
}

.neo-vm-card-title {
    display: -webkit-box;
    -webkit-line-clamp: var(--neo-vm-card-title-lines, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: var(--neo-text-heading);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
}

.neo-vm-card-subtitle {
    margin-top: 0.18rem;
    color: var(--neo-text-secondary);
    font-size: 0.78rem;
    line-height: 1.3;
}

.neo-vm-card-header-end {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.neo-vm-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--neo-surface-muted);
    color: var(--neo-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.neo-vm-status-badge.state-running,
.neo-vm-status-badge.state-ready {
    background: #e7f6e7;
    color: var(--neo-success);
}

.neo-vm-status-badge.state-creating,
.neo-vm-status-badge.state-cloning,
.neo-vm-status-badge.state-provisioning {
    background: #eef6fc;
    color: var(--neo-info);
}

.neo-vm-status-badge.state-suspended,
.neo-vm-status-badge.state-unknown {
    background: #fff4ce;
    color: #8a6d00;
}

.neo-vm-status-badge.state-error {
    background: #fdf3f4;
    color: var(--neo-error);
}

.neo-vm-status-badge.state-deleted,
.neo-vm-status-badge.state-novm {
    background: #f3f2f1;
    color: var(--neo-text-muted);
}

.neo-vm-card-resources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.neo-vm-resource-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 999px;
    background: #fbfbfb;
    color: var(--neo-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.neo-vm-resource-chip.muted {
    color: var(--neo-text-secondary);
}

.neo-vm-card-console {
    min-height: 180px;
    overflow: hidden;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 10px;
    background: #111827;
}

.neo-vm-card-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.72);
    color: var(--neo-text-primary);
    font-weight: 700;
}

.neo-vm-card-footer-content {
    color: var(--neo-text-secondary);
    font-size: 0.78rem;
}

.neo-vm-card-actionbar {
    margin-left: auto;
}

.neo-vmhost {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid var(--neo-border-neutral);
    border-radius: 10px;
    background: #111827;
    color: #f9fafb;
}

.neo-vmhost-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 40px;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #1f2937;
}

.neo-vmhost-toolbar-start,
.neo-vmhost-toolbar-end {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.neo-vmhost-title {
    overflow: hidden;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-vmhost-state {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #374151;
    color: #d1d5db;
    font-size: 0.68rem;
    font-weight: 700;
}

.neo-vmhost-state-connected {
    background: #064e3b;
    color: #a7f3d0;
}

.neo-vmhost-state-error {
    background: #7f1d1d;
    color: #fecaca;
}

.neo-vmhost-state-offline,
.neo-vmhost-state-disconnected {
    background: #3f3f46;
    color: #d4d4d8;
}

.neo-vmhost-btn {
    min-height: 28px;
    padding: 0 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #f9fafb;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.neo-vmhost-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.neo-vmhost-content {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.neo-vmhost-iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 180px;
    border: 0;
    background: #0b1020;
}

.neo-vmhost-placeholder,
.neo-vmhost-error,
.neo-vmhost-connecting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 180px;
    padding: 1rem;
    color: #d1d5db;
    text-align: center;
}

.neo-vmhost-offline-icon {
    font-size: 1.75rem;
}

.neo-vmhost-offline-title {
    color: #ffffff;
    font-weight: 700;
}

.neo-vmhost-offline-desc {
    max-width: 48ch;
    color: #9ca3af;
    font-size: 0.78rem;
}

.neo-vmhost-error {
    color: #fecaca;
}

@keyframes neo-vm-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── NeoToggle ──────────────────────────────────────────────── */

.neo-toggle-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

/* Error text */
.neo-toggle-wrapper .neo-toggle-error {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-error);
    padding: 0 0.25rem;
}

/* Error state — accent the toggle control */
.neo-toggle-wrapper.has-error fluent-switch::part(control) {
    --neutral-stroke-input-rest: var(--neo-error);
    --neutral-stroke-input-hover: var(--neo-error);
    --neutral-stroke-input-active: var(--neo-error);
}

.neo-toggle-wrapper.has-error fluent-switch::part(switch) {
    --neutral-stroke-input-rest: var(--neo-error);
    --neutral-stroke-input-hover: var(--neo-error);
    --neutral-stroke-input-active: var(--neo-error);
}

/* ── NeoButton ────────────────────────────────────────────────── */

.neo-button-wrapper {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Helper text */
.neo-button-wrapper .neo-button-helper {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-text-secondary);
    padding: 0 0.25rem;
}

/* Error text */
.neo-button-wrapper .neo-button-error {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neo-error);
    padding: 0 0.25rem;
}

/* Full width */
.neo-button-wrapper.fullwidth {
    width: 100%;
}

.neo-button-wrapper.fullwidth fluent-button {
    width: 100%;
}

/* Disabled */
.neo-button-wrapper.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading */
.neo-button-wrapper.loading {
    cursor: wait;
}

/* ── Sizes ───────────────────────────────────────────────────── */

.neo-button-wrapper.neo-btn-small fluent-button::part(control) {
    padding: 2px 8px;
    font-size: 0.75rem;
}

.neo-button-wrapper.neo-btn-medium fluent-button::part(control) {
    padding: 5px 14px;
    font-size: 0.875rem;
}

.neo-button-wrapper.neo-btn-large fluent-button::part(control) {
    padding: 10px 20px;
    font-size: 1rem;
}

/* ── Variant: Accent (default) ─────────────────────────────── */

.neo-button-wrapper.neo-btn-accent fluent-button::part(control) {
    --accent-fill-rest: var(--neo-primary);
    --accent-fill-hover: var(--neo-primary-hover);
    --accent-fill-active: #0a5e9e;
    --foreground-on-accent-rest: #FFFFFF;
    --foreground-on-accent-hover: #FFFFFF;
    --foreground-on-accent-active: #FFFFFF;
}

/* ── Variant: Danger (uses Accent appearance, overridden colors) ── */

.neo-button-wrapper.neo-btn-danger fluent-button::part(control) {
    --accent-fill-rest: var(--neo-error);
    --accent-fill-hover: var(--neo-danger-hover);
    --accent-fill-active: var(--neo-danger-pressed);
    --foreground-on-accent-rest: #FFFFFF;
    --foreground-on-accent-hover: #FFFFFF;
    --foreground-on-accent-active: #FFFFFF;
}

/* ── Variant: Success ──────────────────────────────────────────── */

.neo-button-wrapper.neo-btn-success fluent-button::part(control) {
    --accent-fill-rest: var(--neo-success);
    --accent-fill-hover: #0b5f0b;
    --accent-fill-active: #094409;
    --foreground-on-accent-rest: #FFFFFF;
    --foreground-on-accent-hover: #FFFFFF;
    --foreground-on-accent-active: #FFFFFF;
}

/* ── Variant: Warning ──────────────────────────────────────────── */

.neo-button-wrapper.neo-btn-warning fluent-button::part(control) {
    --accent-fill-rest: var(--neo-warning);
    --accent-fill-hover: #b85e00;
    --accent-fill-active: #9a4f00;
    --foreground-on-accent-rest: #FFFFFF;
    --foreground-on-accent-hover: #FFFFFF;
    --foreground-on-accent-active: #FFFFFF;
}

/* ── Variant: Info ─────────────────────────────────────────────── */

.neo-button-wrapper.neo-btn-info fluent-button::part(control) {
    --accent-fill-rest: var(--neo-info);
    --accent-fill-hover: #0c5899;
    --accent-fill-active: #09477d;
    --foreground-on-accent-rest: #FFFFFF;
    --foreground-on-accent-hover: #FFFFFF;
    --foreground-on-accent-active: #FFFFFF;
}

/* ── Error state — accent the button border ──────────────────── */

.neo-button-wrapper.has-error fluent-button::part(control) {
    --neutral-stroke-input-rest: var(--neo-error);
    --neutral-stroke-input-hover: var(--neo-error);
    --neutral-stroke-input-active: var(--neo-error);
}

/* ── Hide bottom border line ─────────────────────────────────── */

.neo-button-wrapper.no-border fluent-button::part(control) {
    border-color: transparent !important;
}

/* ── NeoRibbon ─────────────────────────────────────────────── */
.neo-ribbon {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-2, #f5f5f5);
    border-bottom: 1px solid var(--neutral-stroke-rest, #d9d9d9);
    min-height: 0;
}
.neo-ribbon.display-singleline { flex-direction: row; }
.neo-ribbon.display-tabsonly .neo-ribbon-commands { display: none; }
.neo-ribbon.is-minimized:not(.is-temp-expanded) .neo-ribbon-commands { display: none; }
.neo-ribbon-topbar-host {
    padding: 0;
    border-bottom: 1px solid var(--neutral-stroke-rest, #d9d9d9);
    background: var(--fill-color, white);
}
.neo-ribbon-tab-strip {
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 0;
    background: var(--neutral-layer-1, #f0f0f0);
}
.neo-ribbon-tabs { display: flex; flex: 1; gap: 0; }
.neo-ribbon-tab {
    border: none;
    background: transparent;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest, #333);
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}
.neo-ribbon-tab:hover { background: var(--neo-ribbon-btn-hover-bg, #ececec); }
.neo-ribbon-tab.active {
    border-bottom-color: var(--neo-ribbon-active-color, #217346);
    font-weight: 600;
}
.neo-ribbon-tab-right { margin-left: auto; display: flex; gap: 4px; }
.neo-ribbon-minimize-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest, #666);
}
.neo-ribbon-minimize-btn:hover { background: var(--neo-ribbon-btn-hover-bg, #ececec); }
.neo-ribbon-commands {
    padding: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--fill-color, white);
    min-height: 48px;
}
.neo-ribbon-loading {
    padding: 16px;
    text-align: center;
    color: var(--neutral-foreground-hint, #999);
}

/* ── NeoRibbonTopBar ───────────────────────────────────────── */
.neo-ribbon-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--neo-ribbon-topbar-min-height, 52px);
    max-height: var(--neo-ribbon-topbar-max-height, 56px);
    padding: 0.35rem 0.75rem;
    background: var(--fill-color, #fff);
    color: var(--neutral-foreground-rest, #242424);
    box-sizing: border-box;
    overflow: hidden;
}

.neo-ribbon-topbar.is-compact {
    min-height: var(--neo-ribbon-topbar-min-height, 44px);
    max-height: var(--neo-ribbon-topbar-max-height, 48px);
    padding-block: 0.25rem;
}

.neo-ribbon-topbar-leading,
.neo-ribbon-topbar-center,
.neo-ribbon-topbar-actions,
.neo-ribbon-topbar-trailing {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.neo-ribbon-topbar-leading,
.neo-ribbon-topbar-actions,
.neo-ribbon-topbar-trailing {
    flex: 0 0 auto;
}

.neo-ribbon-topbar-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 8rem;
    max-width: 22rem;
    overflow: hidden;
    flex: 0 1 auto;
}

.neo-ribbon-topbar-title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-ribbon-topbar-subtitle {
    font-size: 0.78rem;
    line-height: 1.15;
    color: var(--neutral-foreground-hint, #667085);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neo-ribbon-topbar-center {
    flex: 1 1 auto;
    justify-content: center;
    color: var(--neutral-foreground-hint, #667085);
    overflow: hidden;
}

.neo-ribbon-topbar-actions {
    margin-left: auto;
    overflow: hidden;
}

.neo-ribbon-topbar-trailing {
    color: var(--neutral-foreground-hint, #667085);
    font-size: 0.78rem;
    white-space: nowrap;
}

.neo-ribbon-topbar.overflow-wrap {
    flex-wrap: wrap;
    max-height: none;
}

@media (max-width: 720px) {
    .neo-ribbon-topbar {
        gap: 0.5rem;
    }

    .neo-ribbon-topbar-center {
        display: none;
    }

    .neo-ribbon-topbar-identity {
        min-width: 0;
        flex: 1 1 auto;
    }

    .neo-ribbon-topbar-trailing {
        display: none;
    }
}

/* ── NeoRibbonPage ──────────────────────────────────────────── */
.neo-ribbon-page {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 100%;
    background: var(--neo-surface);
    color: var(--neo-text-primary);
}

.neo-ribbon-page-header {
    border-bottom: 1px solid var(--neo-border);
    background: var(--neo-surface);
}

.neo-ribbon-page-app-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--neo-border);
    border-radius: 8px;
    background: var(--neo-surface-subtle);
    color: var(--neo-text-primary);
    cursor: pointer;
}

.neo-ribbon-page-app-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.neo-ribbon-page-app-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--neo-text-secondary);
    font-size: 12px;
    text-decoration: none;
}

.neo-ribbon-page-agency {
    padding: 4px 8px;
    border: 1px solid var(--neo-border);
    border-radius: 999px;
    color: var(--neo-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.neo-ribbon-page-search {
    min-width: min(320px, 32vw);
}

.neo-ribbon-page-header-bottom {
    padding: 8px 16px;
    border-top: 1px solid var(--neo-border-neutral);
    background: var(--neo-surface-subtle);
}

.neo-ribbon-page-ribbon {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.neo-ribbon-page-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 0;
}

.neo-ribbon-page-left,
.neo-ribbon-page-right {
    width: 280px;
    overflow: auto;
    padding: 16px;
    background: var(--neo-surface-subtle);
}

.neo-ribbon-page-left {
    border-right: 1px solid var(--neo-border);
}

.neo-ribbon-page-right {
    border-left: 1px solid var(--neo-border);
}

.neo-ribbon-page-main {
    min-width: 0;
    overflow: auto;
    padding: 20px;
}

@media (max-width: 860px) {
    .neo-ribbon-page-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .neo-ribbon-page-left,
    .neo-ribbon-page-right {
        width: auto;
        border: 0;
        border-bottom: 1px solid var(--neo-border);
    }
}

/* ── NeoQuickAccessToolbar ─────────────────────────────────── */
.neo-quick-access-toolbar { display: inline-flex; align-items: center; }
.neo-quick-access-toolbar-inner { display: flex; align-items: center; gap: 4px; padding: 2px; }
.neo-quick-access-toolbar.has-surface .neo-quick-access-toolbar-inner {
    background: var(--neutral-layer-1, #f5f5f5);
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    border-radius: 6px;
    padding: 2px 4px;
}
.neo-quick-access-toolbar .neo-icon-button::part(control) { background: transparent; }
.neo-quick-access-toolbar .neo-icon-button::part(control):hover { background: var(--neutral-fill-hover, #e5e5e5); }

/* ── NeoRibbonGroup ────────────────────────────────────────── */
.neo-ribbon-group {
    display: inline-flex;
    flex-direction: column;
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    border-radius: 4px;
    padding: 4px;
    min-width: 60px;
}
.neo-ribbon-group-content { display: flex; gap: 2px; flex: 1; align-items: center; justify-content: center; }
.neo-ribbon-group-title {
    font-size: 0.7rem;
    text-align: center;
    color: var(--neutral-foreground-hint, #888);
    padding-top: 4px;
    border-top: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    margin-top: 4px;
}
.neo-ribbon-group.layout-smallstack .neo-ribbon-group-content { flex-direction: column; }
.neo-ribbon-group.size-compact { min-width: 40px; padding: 2px; }

/* ── NeoToolbar ────────────────────────────────────────────── */
.neo-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--neutral-layer-1, #f0f0f0);
    border-bottom: 1px solid var(--neutral-stroke-rest, #d9d9d9);
}
.neo-toolbar-start { display: flex; align-items: center; gap: 6px; flex: 1; }
.neo-toolbar-end { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* ── NeoTreeView ──────────────────────────────────────────── */
.neo-treeview {
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    color: var(--neo-text-primary);
    user-select: none;
    outline: none;
}

.neo-treeview-item {
    display: flex;
    flex-direction: column;
}

.neo-treeview-item-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    min-height: 32px;
    border-radius: var(--neo-border-radius);
    cursor: pointer;
    outline: none;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--neo-text-primary);
}

.neo-treeview-item-header:hover {
    background: var(--neo-surface-hover);
}

.neo-treeview-item-header:focus-visible,
.neo-treeview-item-header:focus {
    background: var(--neo-surface-hover);
    box-shadow: inset 0 0 0 1.5px var(--neo-focus-ring);
}

/* ── Selected (Navigation / Single-select) ── */

.neo-treeview-item.is-selected > .neo-treeview-item-header {
    background: var(--neo-surface-selected);
    font-weight: 600;
    box-shadow: none;
}

.neo-treeview-item.is-selected > .neo-treeview-item-header:hover {
    background: var(--neo-surface-selected-hover);
    box-shadow: none;
}

/* ── Multi-select ── */

.neo-treeview-item.is-multiselected > .neo-treeview-item-header {
    background: var(--neo-surface-selected);
    box-shadow: none;
}

.neo-treeview-item.is-multiselected > .neo-treeview-item-header:hover {
    background: var(--neo-surface-selected-hover);
    box-shadow: none;
}

/* ── Disabled ── */

.neo-treeview-item.is-disabled > .neo-treeview-item-header {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ── Chevron ── */

.neo-treeview-item-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-text-secondary);
    transition: transform 0.15s ease;
}

.neo-treeview-item-chevron svg {
    display: block;
}

.neo-treeview-item.is-expanded > .neo-treeview-item-header > .neo-treeview-item-chevron {
    transform: rotate(90deg);
}

.neo-treeview-item-chevron-empty {
    visibility: hidden;
}

/* ── Checkbox (multiselect) ── */

.neo-treeview-item-checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.neo-checkbox-visual {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--neo-text-secondary);
    border-radius: 3px;
    transition: all 0.1s ease;
}

.neo-treeview-item.is-multiselected .neo-checkbox-visual {
    background: var(--neo-primary);
    border-color: var(--neo-primary);
}

.neo-treeview-item.is-multiselected .neo-checkbox-visual::after {
    content: "";
    display: block;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(3px, -1px);
}

/* ── Icons ── */

.neo-treeview-item-leading-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

.neo-treeview-item-trailing-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--neo-text-secondary);
}

/* ── Text ── */

.neo-treeview-item-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

/* ── Badge ── */

.neo-treeview-item-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    background: var(--neo-surface-muted);
    color: var(--neo-text-secondary);
}

/* ── Quick Actions ── */

.neo-treeview-item-actions {
    display: none;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding-left: 4px;
}

.neo-treeview-item-header:hover .neo-treeview-item-actions {
    display: flex;
}

.neo-treeview-item-actions ::deep button,
.neo-treeview-item-actions ::deep .neo-icon-button {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: var(--neo-border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-text-secondary);
    font-size: 0.875rem;
}

.neo-treeview-item-actions ::deep button:hover,
.neo-treeview-item-actions ::deep .neo-icon-button:hover {
    background: var(--neo-surface-hover);
    color: var(--neo-text-primary);
}

/* ── Children / Indentation ── */

.neo-treeview-item-children {
    display: flex;
    flex-direction: column;
}

/* Medium (default) — 24px indent per level */
.neo-treeview-item-children {
    padding-left: 24px;
}

/* Leaf items get +24px to account for chevron space
   (the chevron-empty is hidden but still takes space via width) */
.neo-treeview-item:not(.has-children) > .neo-treeview-item-header {
    padding-left: 30px;
}

/* Small size — 12px indent per level */
.neo-treeview-sm .neo-treeview-item-children {
    padding-left: 12px;
}

.neo-treeview-sm .neo-treeview-item:not(.has-children) > .neo-treeview-item-header {
    padding-left: 26px;
}

.neo-treeview-sm .neo-treeview-item-header {
    min-height: 24px;
    padding: 1px 6px;
    font-size: 0.8125rem;
}

.neo-treeview-sm .neo-treeview-item-chevron {
    width: 16px;
    height: 16px;
}

.neo-treeview-sm .neo-treeview-item-chevron svg {
    width: 10px;
    height: 10px;
}

.neo-treeview-sm .neo-treeview-item-leading-icon,
.neo-treeview-sm .neo-treeview-item-trailing-icon {
    width: 16px;
    height: 16px;
    font-size: 0.8125rem;
}

.neo-treeview-sm .neo-treeview-item-badge {
    min-width: 16px;
    height: 16px;
    font-size: 0.625rem;
    padding: 0 4px;
}

.neo-treeview-sm .neo-treeview-item-checkbox {
    width: 16px;
    height: 16px;
}

.neo-treeview-sm .neo-checkbox-visual {
    width: 14px;
    height: 14px;
}

/* ── Show flags ── */

.neo-treeview.show-icons .neo-treeview-item-header {
    padding-left: 6px;
}

.neo-treeview.show-badges .neo-treeview-item-header {
    padding-right: 4px;
}

/* ── Has-children padding override ── */

.neo-treeview-item.has-children > .neo-treeview-item-header {
    padding-left: 6px;
}

.neo-treeview-sm .neo-treeview-item.has-children > .neo-treeview-item-header {
    padding-left: 4px;
}
/* NeoCarousel */
.neo-carousel {
    display: grid;
    gap: 0.875rem;
    width: 100%;
    color: var(--neutral-foreground-rest);
}

.neo-carousel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.neo-carousel-heading {
    display: grid;
    gap: 0.25rem;
}

.neo-carousel-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.neo-carousel-description {
    color: var(--neutral-foreground-hint);
    font-size: 0.875rem;
}

.neo-carousel-header-content {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.neo-carousel-stage {
    position: relative;
    display: grid;
    align-items: center;
}

.neo-carousel-viewport {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 75%, transparent 25%);
    border-radius: 16px;
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--neo-primary) 13%, transparent 87%), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--neutral-layer-2) 74%, white 26%), var(--fill-color));
    box-shadow: 0 12px 32px color-mix(in srgb, black 10%, transparent 90%);
}

.neo-carousel-track {
    display: flex;
    transition: transform 240ms cubic-bezier(0.33, 1, 0.68, 1);
    will-change: transform;
}

.neo-carousel-item {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    min-height: 260px;
    padding: 2rem;
}

.neo-carousel-item.has-image {
    padding: 0;
}

.neo-carousel-item-image {
    display: block;
    width: 100%;
    min-height: 260px;
    max-height: 420px;
    object-fit: cover;
}

.neo-carousel-item-body {
    display: grid;
    align-content: end;
    gap: 0.65rem;
    min-height: 220px;
    max-width: 680px;
}

.neo-carousel-item-eyebrow {
    width: fit-content;
    border: 1px solid color-mix(in srgb, var(--neo-primary) 34%, transparent 66%);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    color: var(--neo-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.neo-carousel-item-title {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 2.25rem);
    line-height: 1.08;
    font-weight: 800;
}

.neo-carousel-item-description {
    margin: 0;
    max-width: 62ch;
    color: var(--neutral-foreground-hint);
    font-size: 0.98rem;
    line-height: 1.55;
}

.neo-carousel-button {
    position: absolute;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 70%, transparent 30%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fill-color) 88%, transparent 12%);
    color: var(--neutral-foreground-rest);
    box-shadow: 0 6px 18px color-mix(in srgb, black 14%, transparent 86%);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.neo-carousel-button:hover {
    border-color: color-mix(in srgb, var(--neo-primary) 42%, var(--neutral-stroke-rest) 58%);
    background: var(--fill-color);
    transform: translateY(-1px);
}

.neo-carousel-button-previous {
    left: 0.875rem;
}

.neo-carousel-button-next {
    right: 0.875rem;
}

.neo-carousel-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.neo-carousel-indicator {
    border: 0;
    background: transparent;
    padding: 0.25rem;
    cursor: pointer;
}

.neo-carousel-indicator span {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--neutral-foreground-hint) 42%, transparent 58%);
    transition: width 160ms ease, background 160ms ease;
}

.neo-carousel-indicator.is-active span {
    width: 1.45rem;
    background: var(--neo-primary);
}

@media (max-width: 640px) {
    .neo-carousel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .neo-carousel-item {
        min-height: 220px;
        padding: 1.25rem;
    }

    .neo-carousel-button {
        width: 2rem;
        height: 2rem;
    }
}