/*
 * NextUI Component-Level Style Overrides
 *
 * Per-component visual customizations for each design style.
 * Uses [data-sx-style="X"] attribute selectors on <html> to scope overrides.
 * Loaded AFTER scoped CSS, so cascade order ensures these win.
 *
 * Covered components:
 *   Batch 1: SxButton, SxInput, SxCard, SxDialog, SxNavMenu, SxSwitch
 *   Batch 2: SxCheckbox, SxRadio, SxSelect, SxTextArea, SxSlider, SxToggleButton
 *   Batch 3: SxTabs, SxMessageBar, SxToast, SxAccordion, SxTooltip, SxProgress
 *   Batch 4: SxDataGrid, SxTable, SxTag, SxDrawer, SxMenu/SxMenuItem
 *   Shared: flat hierarchy frames for SxNavMenu and SxTree
 */

/* ================================================================
   Shared: menu divider
   ================================================================
   组件库让调用方直接写 <div class="sx-menu-divider">（SxNavBar、SxAppShell 和各页面都这么写），
   可这条规则此前只存在于 SxAppGlobalMenu 的 scoped CSS 里 —— 于是除了那一个组件内部，
   别处写的分隔线全是零高度、看不见的空 div。共享类必须住在共享样式表里。 */

.sx-menu-divider {
    height: 0;
    /* 比普通描边再淡一档 —— 它是分组的呼吸，不是一条边界。
       SxAppGlobalMenu 在自己的作用域里定义了 --sx-menu-divider-color，那份会盖过这里；
       别处没有它，所以给一个由既有 token 派生的兜底值，而不是新造一个全局 token。 */
    border-top: var(--sx-border-width-thin) solid
        var(--sx-menu-divider-color,
            color-mix(in srgb, var(--sx-color-neutral-stroke-2), var(--sx-color-neutral-background-1) 40%));
    margin: 0;
    flex-shrink: 0;
}

/* ================================================================
   Shared Flat Hierarchy Frame — SxNavMenu + SxTree
   ================================================================ */

.sx-flat-hierarchy-item {
    --sx-flat-hierarchy-rail-width: var(--sx-border-width-medium);
    --sx-flat-hierarchy-line-width: var(--sx-flat-hierarchy-rail-width);
    --sx-flat-hierarchy-rail-gap: var(--sx-spacing-micro);
    --sx-flat-hierarchy-frame-color: var(--sx-color-neutral-stroke-1);
    --sx-flat-hierarchy-active-frame-color: var(--sx-color-brand-stroke-1);
    --sx-flat-hierarchy-rail-color: var(--sx-flat-hierarchy-frame-color);
    --sx-flat-hierarchy-frame-rail-color: var(--sx-flat-hierarchy-frame-color);
    --sx-flat-hierarchy-frame-rail-visible: 0;
    --sx-flat-hierarchy-frame-boundary-color: transparent;
    --sx-flat-hierarchy-frame-boundary-paint-color: color-mix(in srgb, var(--sx-flat-hierarchy-frame-boundary-color) var(--sx-flat-hierarchy-rail-opacity-percent), transparent);
    --sx-flat-hierarchy-frame-boundary-dash: calc(var(--sx-spacing-sm) + var(--sx-spacing-xxs));
    --sx-flat-hierarchy-frame-boundary-gap: var(--sx-spacing-xxs);
    --sx-flat-hierarchy-frame-radius: var(--sx-radius-md);
    --sx-flat-hierarchy-frame-boundary-line: none;
    --sx-flat-hierarchy-frame-boundary-top-line: none;
    --sx-flat-hierarchy-frame-boundary-bottom-line: none;
    --sx-flat-hierarchy-frame-boundary-top-offset: 0rem;
    --sx-flat-hierarchy-frame-boundary-bottom-offset: 0rem;
    --sx-flat-hierarchy-frame-boundary-overlap-offset: calc(-1 * var(--sx-border-width-thin));
    --sx-flat-hierarchy-frame-boundary-top-left-corner: none;
    --sx-flat-hierarchy-frame-boundary-top-right-corner: none;
    --sx-flat-hierarchy-frame-boundary-bottom-left-corner: none;
    --sx-flat-hierarchy-frame-boundary-bottom-right-corner: none;
    --sx-flat-hierarchy-rail-inset-top: var(--sx-spacing-xs);
    --sx-flat-hierarchy-rail-inset-bottom: var(--sx-spacing-xs);
    --sx-flat-hierarchy-rail-radius-top: 0rem;
    --sx-flat-hierarchy-rail-radius-bottom: 0rem;
    --sx-flat-hierarchy-rail-opacity: 0.36;
    --sx-flat-hierarchy-rail-opacity-percent: 36%;
    --sx-flat-hierarchy-segment-block: 100%;
    --sx-flat-hierarchy-rail-offset-start: 0rem;
    --sx-flat-hierarchy-rail-offset-end: 0rem;
}

.sx-flat-hierarchy-item[data-level] > .sx-flat-hierarchy-row {
    box-sizing: border-box;
    background-image:
        var(--sx-flat-hierarchy-frame-boundary-top-line),
        var(--sx-flat-hierarchy-frame-boundary-bottom-line),
        var(--sx-flat-hierarchy-frame-boundary-top-left-corner),
        var(--sx-flat-hierarchy-frame-boundary-top-right-corner),
        var(--sx-flat-hierarchy-frame-boundary-bottom-left-corner),
        var(--sx-flat-hierarchy-frame-boundary-bottom-right-corner);
    background-position:
        left var(--sx-flat-hierarchy-frame-radius) top var(--sx-flat-hierarchy-frame-boundary-top-offset),
        left var(--sx-flat-hierarchy-frame-radius) bottom var(--sx-flat-hierarchy-frame-boundary-bottom-offset),
        left 0 top var(--sx-flat-hierarchy-frame-boundary-top-offset),
        right 0 top var(--sx-flat-hierarchy-frame-boundary-top-offset),
        left 0 bottom var(--sx-flat-hierarchy-frame-boundary-bottom-offset),
        right 0 bottom var(--sx-flat-hierarchy-frame-boundary-bottom-offset);
    background-repeat: no-repeat;
    background-size:
        calc(100% - (var(--sx-flat-hierarchy-frame-radius) * 2)) var(--sx-flat-hierarchy-line-width),
        calc(100% - (var(--sx-flat-hierarchy-frame-radius) * 2)) var(--sx-flat-hierarchy-line-width),
        var(--sx-flat-hierarchy-frame-radius) var(--sx-flat-hierarchy-frame-radius),
        var(--sx-flat-hierarchy-frame-radius) var(--sx-flat-hierarchy-frame-radius),
        var(--sx-flat-hierarchy-frame-radius) var(--sx-flat-hierarchy-frame-radius),
        var(--sx-flat-hierarchy-frame-radius) var(--sx-flat-hierarchy-frame-radius);
}

.sx-flat-hierarchy-item[data-level] > .sx-flat-hierarchy-row::before,
.sx-flat-hierarchy-item[data-level] > .sx-flat-hierarchy-row::after {
    content: "";
    position: absolute;
    top: var(--sx-flat-hierarchy-rail-inset-top);
    bottom: var(--sx-flat-hierarchy-rail-inset-bottom);
    width: var(--sx-flat-hierarchy-rail-width);
    border-radius:
        var(--sx-flat-hierarchy-rail-radius-top)
        var(--sx-flat-hierarchy-rail-radius-top)
        var(--sx-flat-hierarchy-rail-radius-bottom)
        var(--sx-flat-hierarchy-rail-radius-bottom);
    background-image: linear-gradient(
        to bottom,
        var(--sx-flat-hierarchy-rail-color) 0,
        var(--sx-flat-hierarchy-rail-color) calc(100% - var(--sx-flat-hierarchy-rail-gap)),
        transparent calc(100% - var(--sx-flat-hierarchy-rail-gap)),
        transparent 100%
    );
    background-size: 100% var(--sx-flat-hierarchy-segment-block);
    background-repeat: repeat-y;
    pointer-events: none;
    z-index: 1;
}

.sx-flat-hierarchy-item[data-level] > .sx-flat-hierarchy-row::before {
    left: var(--sx-flat-hierarchy-rail-offset-start);
    opacity: var(--sx-flat-hierarchy-rail-opacity);
}

.sx-flat-hierarchy-item[data-level] > .sx-flat-hierarchy-row::after {
    right: var(--sx-flat-hierarchy-rail-offset-end);
    opacity: calc(var(--sx-flat-hierarchy-frame-rail-visible) * var(--sx-flat-hierarchy-rail-opacity));
    background-image: linear-gradient(
        to bottom,
        var(--sx-flat-hierarchy-frame-rail-color) 0,
        var(--sx-flat-hierarchy-frame-rail-color) calc(100% - var(--sx-flat-hierarchy-rail-gap)),
        transparent calc(100% - var(--sx-flat-hierarchy-rail-gap)),
        transparent 100%
    );
    transition: opacity 0.15s ease;
}

.sx-flat-hierarchy-parent,
.sx-flat-hierarchy-parent > .sx-flat-hierarchy-children > .sx-flat-hierarchy-item {
    --sx-flat-hierarchy-frame-rail-visible: 1;
    --sx-flat-hierarchy-frame-boundary-color: var(--sx-flat-hierarchy-frame-color);
    --sx-flat-hierarchy-frame-boundary-top-left-corner-image: radial-gradient(
        circle at 100% 100%,
        transparent calc(var(--sx-flat-hierarchy-frame-radius) - var(--sx-flat-hierarchy-line-width)),
        var(--sx-flat-hierarchy-frame-boundary-paint-color) calc(var(--sx-flat-hierarchy-frame-radius) - var(--sx-flat-hierarchy-line-width)) var(--sx-flat-hierarchy-frame-radius),
        transparent var(--sx-flat-hierarchy-frame-radius)
    );
    --sx-flat-hierarchy-frame-boundary-top-right-corner-image: radial-gradient(
        circle at 0 100%,
        transparent calc(var(--sx-flat-hierarchy-frame-radius) - var(--sx-flat-hierarchy-line-width)),
        var(--sx-flat-hierarchy-frame-boundary-paint-color) calc(var(--sx-flat-hierarchy-frame-radius) - var(--sx-flat-hierarchy-line-width)) var(--sx-flat-hierarchy-frame-radius),
        transparent var(--sx-flat-hierarchy-frame-radius)
    );
    --sx-flat-hierarchy-frame-boundary-bottom-left-corner-image: radial-gradient(
        circle at 100% 0,
        transparent calc(var(--sx-flat-hierarchy-frame-radius) - var(--sx-flat-hierarchy-line-width)),
        var(--sx-flat-hierarchy-frame-boundary-paint-color) calc(var(--sx-flat-hierarchy-frame-radius) - var(--sx-flat-hierarchy-line-width)) var(--sx-flat-hierarchy-frame-radius),
        transparent var(--sx-flat-hierarchy-frame-radius)
    );
    --sx-flat-hierarchy-frame-boundary-bottom-right-corner-image: radial-gradient(
        circle at 0 0,
        transparent calc(var(--sx-flat-hierarchy-frame-radius) - var(--sx-flat-hierarchy-line-width)),
        var(--sx-flat-hierarchy-frame-boundary-paint-color) calc(var(--sx-flat-hierarchy-frame-radius) - var(--sx-flat-hierarchy-line-width)) var(--sx-flat-hierarchy-frame-radius),
        transparent var(--sx-flat-hierarchy-frame-radius)
    );
    --sx-flat-hierarchy-frame-boundary-line: repeating-linear-gradient(
        to right,
        var(--sx-flat-hierarchy-frame-boundary-paint-color) 0 var(--sx-flat-hierarchy-frame-boundary-dash),
        transparent var(--sx-flat-hierarchy-frame-boundary-dash) calc(var(--sx-flat-hierarchy-frame-boundary-dash) + var(--sx-flat-hierarchy-frame-boundary-gap))
    );
}

.sx-flat-hierarchy-parent:has(> .sx-flat-hierarchy-row:hover),
.sx-flat-hierarchy-parent:has(> .sx-flat-hierarchy-row:hover) > .sx-flat-hierarchy-children > .sx-flat-hierarchy-item,
.sx-flat-hierarchy-parent:has(> .sx-flat-hierarchy-children > .sx-flat-hierarchy-item > .sx-flat-hierarchy-row:hover),
.sx-flat-hierarchy-parent:has(> .sx-flat-hierarchy-children > .sx-flat-hierarchy-item > .sx-flat-hierarchy-row:hover) > .sx-flat-hierarchy-children > .sx-flat-hierarchy-item {
    --sx-flat-hierarchy-frame-rail-visible: 1;
    --sx-flat-hierarchy-frame-boundary-color: var(--sx-flat-hierarchy-frame-color);
    --sx-flat-hierarchy-frame-boundary-line: linear-gradient(
        to right,
        var(--sx-flat-hierarchy-frame-boundary-paint-color),
        var(--sx-flat-hierarchy-frame-boundary-paint-color)
    );
}

.sx-flat-hierarchy-parent.sx-flat-hierarchy-item--active,
.sx-flat-hierarchy-parent.sx-flat-hierarchy-item--active > .sx-flat-hierarchy-children > .sx-flat-hierarchy-item,
.sx-flat-hierarchy-parent:has(> .sx-flat-hierarchy-children > .sx-flat-hierarchy-item--active),
.sx-flat-hierarchy-parent:has(> .sx-flat-hierarchy-children > .sx-flat-hierarchy-item--active) > .sx-flat-hierarchy-children > .sx-flat-hierarchy-item {
    --sx-flat-hierarchy-rail-color: var(--sx-flat-hierarchy-active-frame-color);
    --sx-flat-hierarchy-frame-rail-color: var(--sx-flat-hierarchy-active-frame-color);
    --sx-flat-hierarchy-frame-rail-visible: 1;
    --sx-flat-hierarchy-frame-boundary-color: var(--sx-flat-hierarchy-active-frame-color);
    --sx-flat-hierarchy-frame-boundary-line: linear-gradient(
        to right,
        var(--sx-flat-hierarchy-frame-boundary-paint-color),
        var(--sx-flat-hierarchy-frame-boundary-paint-color)
    );
}

.sx-flat-hierarchy-parent > .sx-flat-hierarchy-row {
    --sx-flat-hierarchy-frame-boundary-top-line: var(--sx-flat-hierarchy-frame-boundary-line);
    --sx-flat-hierarchy-frame-boundary-bottom-line: var(--sx-flat-hierarchy-frame-boundary-line);
    --sx-flat-hierarchy-frame-boundary-top-left-corner: var(--sx-flat-hierarchy-frame-boundary-top-left-corner-image);
    --sx-flat-hierarchy-frame-boundary-top-right-corner: var(--sx-flat-hierarchy-frame-boundary-top-right-corner-image);
    --sx-flat-hierarchy-frame-boundary-bottom-left-corner: var(--sx-flat-hierarchy-frame-boundary-bottom-left-corner-image);
    --sx-flat-hierarchy-frame-boundary-bottom-right-corner: var(--sx-flat-hierarchy-frame-boundary-bottom-right-corner-image);
    --sx-flat-hierarchy-rail-inset-top: 0rem;
    --sx-flat-hierarchy-rail-inset-bottom: 0rem;
    --sx-flat-hierarchy-rail-radius-top: var(--sx-radius-pill);
    --sx-flat-hierarchy-rail-radius-bottom: var(--sx-radius-pill);
}

.sx-flat-hierarchy-parent > .sx-flat-hierarchy-children {
    gap: 0;
}

.sx-flat-hierarchy-parent:has(> .sx-flat-hierarchy-children > .sx-flat-hierarchy-parent:first-child) > .sx-flat-hierarchy-row,
.sx-flat-hierarchy-parent:has(+ .sx-flat-hierarchy-parent) > .sx-flat-hierarchy-children > .sx-flat-hierarchy-item:last-child > .sx-flat-hierarchy-row {
    --sx-flat-hierarchy-frame-boundary-bottom-offset: var(--sx-flat-hierarchy-frame-boundary-overlap-offset);
}

.sx-flat-hierarchy-parent > .sx-flat-hierarchy-children > .sx-flat-hierarchy-parent:first-child > .sx-flat-hierarchy-row,
.sx-flat-hierarchy-parent + .sx-flat-hierarchy-parent > .sx-flat-hierarchy-row {
    --sx-flat-hierarchy-frame-boundary-top-offset: var(--sx-flat-hierarchy-frame-boundary-overlap-offset);
}

.sx-flat-hierarchy-parent > .sx-flat-hierarchy-children > .sx-flat-hierarchy-item:last-child > .sx-flat-hierarchy-row {
    --sx-flat-hierarchy-frame-boundary-bottom-line: var(--sx-flat-hierarchy-frame-boundary-line);
    --sx-flat-hierarchy-frame-boundary-bottom-left-corner: var(--sx-flat-hierarchy-frame-boundary-bottom-left-corner-image);
    --sx-flat-hierarchy-frame-boundary-bottom-right-corner: var(--sx-flat-hierarchy-frame-boundary-bottom-right-corner-image);
    --sx-flat-hierarchy-rail-inset-bottom: 0rem;
    --sx-flat-hierarchy-rail-radius-bottom: var(--sx-radius-pill);
}


/* ================================================================
   CUPERTINO — macOS / iOS
   Signature: spring animations, press-to-shrink, blue focus rings,
              shadow-driven depth (no harsh borders), translucent layers
   ================================================================ */

/* --- SxButton --- */
[data-sx-style="cupertino"] .sx-btn {
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); /* spring-like */
}

[data-sx-style="cupertino"] .sx-btn:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

[data-sx-style="cupertino"] .sx-btn--neutral:hover:not(:disabled),
[data-sx-style="cupertino"] .sx-btn--importance-secondary:hover:not(:disabled),
[data-sx-style="cupertino"] .sx-btn--lightweight:hover:not(:disabled),
[data-sx-style="cupertino"] .sx-btn--importance-quaternary:hover:not(:disabled),
[data-sx-style="cupertino"] .sx-btn--stealth:hover:not(:disabled),
[data-sx-style="cupertino"] .sx-btn--importance-quaternary:hover:not(:disabled) {
    filter: brightness(0.96);
}

[data-sx-style="cupertino"] .sx-btn--accent,
[data-sx-style="cupertino"] .sx-btn--importance-primary {
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0) 50%
    );
}

[data-sx-style="cupertino"] .sx-btn:focus-visible {
    /* Ring plus whatever elevation the button already had at rest — see
       --sx-button-resting-shadow in SxButton.razor.css. Replacing instead of appending
       would make a Primary button lose its shadow the moment it takes focus. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent),
                var(--sx-button-resting-shadow, 0 0 transparent);
}

/* --- SxInput --- */
[data-sx-style="cupertino"] .sx-input-wrapper {
    background: var(--sx-color-neutral-background-1);
}

[data-sx-style="cupertino"] .sx-input-wrapper:focus-within {
    border-color: var(--sx-color-brand-background-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
}

/* cupertino 的「面」统一带一条分隔线的边。
   这一整族原来都是上一版设计：border-color: transparent，只靠阴影分面 ——
   白底白面时等于没有边，读者要盯着看才知道那里有一块东西。
   悬浮层（弹出层 / 菜单 / 吐司）投影够强，边是补足顶边；
   内联面（消息条 / 手风琴 / 表格 / 分段标签底槽）只有 shadow-sm，全靠这条边。
   .sx-tag 不在此列：它有自己的填充，填充就把它和背景分开了。 */

/* --- SxCard + Settings surfaces --- */
/* 卡片的边和影统一由本文件末尾「CUPERTINO: 面层层次」那一段给。
   这里原来是上一版设计（border-color: transparent，只靠阴影分面）——
   白底白卡时它等于没有边，正是要修掉的那个毛病。留着不但没用，还会跟新那版打架。 */

[data-sx-style="cupertino"] :is(.sx-card-header, .sx-settings-group-header) {
    background: var(--sx-color-neutral-background-1);
    border-bottom-color: color-mix(in srgb, var(--sx-color-neutral-stroke-2) 50%, transparent);
}

/* 悬停只把卡片抬高一档，不动那条边 —— 原来这里写的是 border-color: transparent，
   而它是 0,4,0，压得过面层层次那段。结果是「鼠标一放上去，边框就没了」：
   偏偏在读者正盯着这张卡的时候，它的轮廓消失。 */
[data-sx-style="cupertino"] .sx-card.sx-is-hoverable:hover {
    box-shadow: var(--sx-shadow-xl);
}

/* --- SxDialog --- */
[data-sx-style="cupertino"] .sx-dialog-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: transparent;
}

[data-sx-style="cupertino"] .sx-dialog {
    transform: translate3d(var(--sx-dialog-x, 0px), var(--sx-dialog-y, 0px), 0) translateY(12px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.25s ease;
}

[data-sx-style="cupertino"] .sx-dialog-overlay.sx-is-open .sx-dialog {
    transform: translate3d(var(--sx-dialog-x, 0px), var(--sx-dialog-y, 0px), 0) translateY(0) scale(1);
}

[data-sx-style="cupertino"] .sx-dialog-header {
    border-bottom-color: color-mix(in srgb, var(--sx-color-neutral-stroke-2) 40%, transparent);
}

[data-sx-style="cupertino"] .sx-dialog-footer {
    border-top-color: color-mix(in srgb, var(--sx-color-neutral-stroke-2) 40%, transparent);
}

/* --- SxNavMenu --- */
[data-sx-style="cupertino"] .sx-nav-menu-item-link--active {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="cupertino"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="cupertino"] .sx-nav-menu-item-link:hover {
    background-color: var(--sx-color-neutral-background-3);
}

[data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 18%, transparent);
    color: var(--sx-color-brand-foreground-1);
    box-shadow: none;
}

[data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 18%, transparent);
    color: var(--sx-color-brand-foreground-1);
    box-shadow: none;
}

[data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot,
[data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-icon-slot,
[data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-item-text,
[data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-group-expander {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot,
[data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-icon-slot,
[data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-item-text,
[data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-group-expander {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="cupertino"] .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover,
[data-sx-style="cupertino"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover,
[data-sx-style="cupertino"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 18%, transparent);
}

[data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover,
[data-sx-style="cupertino"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
}

[data-sx-style="cupertino"] .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover > .sx-nav-menu-icon-slot,
[data-sx-style="cupertino"] .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover > .sx-nav-menu-item-text,
[data-sx-style="cupertino"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover > .sx-nav-menu-icon-slot,
[data-sx-style="cupertino"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover > .sx-nav-menu-item-text,
[data-sx-style="cupertino"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover > .sx-nav-menu-group-expander {
    color: var(--sx-color-brand-foreground-1) !important;
}

/* --- SxSwitch --- */
[data-sx-style="cupertino"] .sx-switch__track {
    width: 2.75rem;
    height: 1.5rem;
    background-color: var(--sx-color-neutral-stroke-1);
}

[data-sx-style="cupertino"] .sx-switch__thumb {
    width: 1.25rem;
    height: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1);
}

[data-sx-style="cupertino"] input:checked + .sx-switch__track {
    background-color: var(--sx-switch-checked-background);
    border-color: var(--sx-switch-checked-border);
}

[data-sx-style="cupertino"] input:checked + .sx-switch__track .sx-switch__thumb {
    transform: translate(1.25rem, -50%);
}


/* ================================================================
   CUPERTINO — Dark mode adjustments
   ================================================================ */
[data-sx-style="cupertino"][data-theme="dark"] .sx-dialog-overlay {
    background: transparent;
}

[data-sx-style="cupertino"][data-theme="dark"] input:checked + .sx-switch__track {
    background-color: var(--sx-switch-checked-background);
    border-color: var(--sx-switch-checked-border);
}


/* ================================================================
   FLUENT — Windows 11
   Signature: no scale on press, bottom-line focus on inputs,
              subtle brightness shifts, crisp thin borders, Acrylic-style
   ================================================================ */

/* --- SxButton --- */
[data-sx-style="fluent"] .sx-btn {
    transition: all 0.15s ease;
}

[data-sx-style="fluent"] .sx-btn:active:not(:disabled) {
    transform: none;
    filter: brightness(0.92);
}

[data-sx-style="fluent"] .sx-btn--accent:hover:not(:disabled),
[data-sx-style="fluent"] .sx-btn--importance-primary:hover:not(:disabled) {
    filter: brightness(1.06);
}

[data-sx-style="fluent"] .sx-btn--accent,
[data-sx-style="fluent"] .sx-btn--importance-primary {
    background-image: none;
}

[data-sx-style="fluent"] .sx-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--sx-color-neutral-background-1),
                0 0 0 4px var(--sx-color-neutral-foreground-1),
                var(--sx-button-resting-shadow, 0 0 transparent);
}

/* Bottom highlight line on neutral buttons */
[data-sx-style="fluent"] .sx-btn--neutral,
[data-sx-style="fluent"] .sx-btn--importance-secondary {
    border-bottom-color: color-mix(in srgb, var(--sx-color-neutral-stroke-1) 80%, var(--sx-color-neutral-foreground-1) 20%);
}

/* --- SxInput --- */
[data-sx-style="fluent"] .sx-input-wrapper {
    background: var(--sx-color-neutral-background-3);
    border-bottom-width: 2px;
}

[data-sx-style="fluent"] .sx-input-wrapper:focus-within {
    box-shadow: none;
    border-color: var(--sx-color-neutral-stroke-1);
    border-bottom-color: var(--sx-color-brand-background-1);
}

/* --- SxCard + Settings surfaces --- */
[data-sx-style="fluent"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    box-shadow: var(--sx-shadow-sm);
}

[data-sx-style="fluent"] :is(.sx-card-header, .sx-settings-group-header) {
    background: var(--sx-color-neutral-background-2);
}

[data-sx-style="fluent"] .sx-card.sx-is-hoverable:hover {
    border-color: var(--sx-color-brand-background-1);
    box-shadow: var(--sx-shadow-md);
}

/* --- SxDialog --- */
[data-sx-style="fluent"] .sx-dialog-overlay {
    background: transparent;
}

[data-sx-style="fluent"] .sx-dialog {
    transform: translate3d(var(--sx-dialog-x, 0px), var(--sx-dialog-y, 0px), 0) scale(0.95);
    transition: transform 0.2s ease, opacity 0.15s ease;
}

[data-sx-style="fluent"] .sx-dialog-overlay.sx-is-open .sx-dialog {
    transform: translate3d(var(--sx-dialog-x, 0px), var(--sx-dialog-y, 0px), 0) scale(1);
}

/* --- SxNavMenu --- */
/* Fluent keeps the default full-width brand background active style — no overrides needed */

/* --- SxSwitch --- */
[data-sx-style="fluent"] .sx-switch__track {
    background-color: transparent;
    border-color: var(--sx-color-neutral-stroke-1);
    width: 2.5rem;
    height: 1.125rem;
}

[data-sx-style="fluent"] .sx-switch__thumb {
    background-color: var(--sx-color-neutral-foreground-2);
    width: 0.75rem;
    height: 0.75rem;
    left: 0.1875rem;
    box-shadow: none;
}

[data-sx-style="fluent"] input:checked + .sx-switch__track {
    background-color: var(--sx-switch-checked-background);
    border-color: var(--sx-switch-checked-border);
}

[data-sx-style="fluent"] input:checked + .sx-switch__track .sx-switch__thumb {
    background-color: var(--sx-color-neutral-background-1);
    transform: translate(1.375rem, -50%);
    width: 0.875rem;
    height: 0.875rem;
}


/* ================================================================
   FLUENT — Dark mode adjustments
   ================================================================ */
[data-sx-style="fluent"][data-theme="dark"] .sx-input-wrapper {
    background: var(--sx-color-neutral-background-3);
}

[data-sx-style="fluent"][data-theme="dark"] .sx-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--sx-color-neutral-background-1),
                0 0 0 4px var(--sx-color-neutral-foreground-1),
                var(--sx-button-resting-shadow, 0 0 transparent);
}


/* ================================================================
   CLASSIC — Traditional / Win9x-era
   Signature: hard borders, inset shadows on press, no animations,
              square corners, underline/bold for active states
   ================================================================ */

/* --- SxButton --- */
[data-sx-style="classic"] .sx-btn {
    transition: none;
    /* 凸起的四色斜面。box-shadow 里靠前的层画在上面，所以 2px 那一层只会露出 1–2px 的
       那一圈 —— 两层叠出内外两道边，眼睛读到的是一个有坡度的斜面，而不是两条线。
       次序按 Win9x 的 EDGE_RAISED：外圈左上最亮、右下最暗；内圈左上次亮、右下中灰。
       走 --sx-button-resting-shadow 而不是直接写 box-shadow，焦点环才能叠上去而不是抹掉。 */
    --sx-button-resting-shadow:
        inset var(--sx-classic-bevel-width) var(--sx-classic-bevel-width) 0 var(--sx-classic-bevel-highlight),
        inset calc(var(--sx-classic-bevel-width) * -1) calc(var(--sx-classic-bevel-width) * -1) 0 var(--sx-classic-bevel-dark),
        inset calc(var(--sx-classic-bevel-width) * 2) calc(var(--sx-classic-bevel-width) * 2) 0 var(--sx-classic-bevel-light),
        inset calc(var(--sx-classic-bevel-width) * -2) calc(var(--sx-classic-bevel-width) * -2) 0 var(--sx-classic-bevel-shadow);
}

[data-sx-style="classic"] .sx-btn:active:not(:disabled) {
    /* 按下 = 把整个斜面翻过来（凹进去），四层的明暗对调，内容同时位移一个斜角的厚度。
       两件事必须一起发生：只翻斜面像换了个皮肤，只位移像飘走。 */
    --sx-button-resting-shadow:
        inset var(--sx-classic-bevel-width) var(--sx-classic-bevel-width) 0 var(--sx-classic-bevel-dark),
        inset calc(var(--sx-classic-bevel-width) * -1) calc(var(--sx-classic-bevel-width) * -1) 0 var(--sx-classic-bevel-highlight),
        inset calc(var(--sx-classic-bevel-width) * 2) calc(var(--sx-classic-bevel-width) * 2) 0 var(--sx-classic-bevel-shadow),
        inset calc(var(--sx-classic-bevel-width) * -2) calc(var(--sx-classic-bevel-width) * -2) 0 var(--sx-classic-bevel-light);
    transform: translate(var(--sx-classic-bevel-width), var(--sx-classic-bevel-width));
}

/* 输入框是「凹进去的」—— 与按钮的凸起相反，这是这套风格区分「可按」与「可填」的方式，
   不靠颜色也不靠圆角。 */
[data-sx-style="classic"] .sx-input-wrapper,
[data-sx-style="classic"] .sx-textarea,
[data-sx-style="classic"] .sx-select-container {
    box-shadow:
        inset var(--sx-classic-bevel-width) var(--sx-classic-bevel-width) 0 var(--sx-classic-bevel-shadow),
        inset calc(var(--sx-classic-bevel-width) * -1) calc(var(--sx-classic-bevel-width) * -1) 0 var(--sx-classic-bevel-highlight),
        inset calc(var(--sx-classic-bevel-width) * 2) calc(var(--sx-classic-bevel-width) * 2) 0 var(--sx-classic-bevel-dark),
        inset calc(var(--sx-classic-bevel-width) * -2) calc(var(--sx-classic-bevel-width) * -2) 0 var(--sx-classic-bevel-light);
}

/* 浮层（菜单 / 吐司 / 抽屉）是凸起的面，与按钮同一套斜面，只是不参与按下。 */
[data-sx-style="classic"] :is(.sx-menu-dropdown, .sx-select-popup, .sx-toast, .sx-drawer-panel, .sx-dialog) {
    box-shadow:
        inset var(--sx-classic-bevel-width) var(--sx-classic-bevel-width) 0 var(--sx-classic-bevel-highlight),
        inset calc(var(--sx-classic-bevel-width) * -1) calc(var(--sx-classic-bevel-width) * -1) 0 var(--sx-classic-bevel-dark),
        inset calc(var(--sx-classic-bevel-width) * 2) calc(var(--sx-classic-bevel-width) * 2) 0 var(--sx-classic-bevel-light),
        inset calc(var(--sx-classic-bevel-width) * -2) calc(var(--sx-classic-bevel-width) * -2) 0 var(--sx-classic-bevel-shadow);
}

[data-sx-style="classic"] .sx-btn--neutral,
[data-sx-style="classic"] .sx-btn--importance-secondary {
    border-color: var(--sx-color-neutral-stroke-1);
}

[data-sx-style="classic"] .sx-btn--neutral:hover:not(:disabled),
[data-sx-style="classic"] .sx-btn--importance-secondary:hover:not(:disabled) {
    background: var(--sx-color-neutral-background-3);
}

[data-sx-style="classic"] .sx-btn--accent:hover:not(:disabled),
[data-sx-style="classic"] .sx-btn--importance-primary:hover:not(:disabled) {
    filter: brightness(0.9);
}

[data-sx-style="classic"] .sx-btn--accent,
[data-sx-style="classic"] .sx-btn--importance-primary {
    background-image: none;
}

[data-sx-style="classic"] .sx-btn:focus-visible {
    /* Classic draws the ring as an outline, so box-shadow only has to preserve the
       resting elevation rather than clear it. */
    box-shadow: var(--sx-button-resting-shadow, 0 0 transparent);
    outline: 2px dashed var(--sx-color-brand-foreground-1);
    outline-offset: 2px;
}

/* --- SxInput --- */
[data-sx-style="classic"] .sx-input-wrapper {
    background: var(--sx-color-neutral-background-1);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
}

[data-sx-style="classic"] .sx-input-wrapper:focus-within {
    border-color: var(--sx-color-brand-background-1);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* --- SxCard + Settings surfaces --- */
[data-sx-style="classic"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    box-shadow: none;
    border-width: 1px;
    border-color: var(--sx-color-neutral-stroke-1);
}

[data-sx-style="classic"] :is(.sx-card-header, .sx-settings-group-header) {
    background: var(--sx-color-neutral-background-2);
    border-bottom-width: 1px;
}

[data-sx-style="classic"] .sx-card.sx-is-hoverable:hover {
    border-width: 2px;
    border-color: var(--sx-color-neutral-stroke-1);
    box-shadow: none;
}

/* --- SxDialog --- */
[data-sx-style="classic"] .sx-dialog-overlay {
    background: transparent;
}

[data-sx-style="classic"] .sx-dialog {
    transform: translate3d(var(--sx-dialog-x, 0px), var(--sx-dialog-y, 0px), 0);
    transition: none;
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
}

[data-sx-style="classic"] .sx-dialog-overlay.sx-is-open .sx-dialog {
    transform: translate3d(var(--sx-dialog-x, 0px), var(--sx-dialog-y, 0px), 0);
}

[data-sx-style="classic"] .sx-dialog-header {
    border-bottom-width: 2px;
    border-bottom-color: var(--sx-color-neutral-stroke-1);
}

[data-sx-style="classic"] .sx-dialog-footer {
    border-top-width: 2px;
    border-top-color: var(--sx-color-neutral-stroke-1);
}

/* --- SxNavMenu --- */
[data-sx-style="classic"] .sx-nav-menu-item-link--active {
    background-color: transparent;
    border-left: 3px solid var(--sx-color-brand-background-1);
    font-weight: var(--sx-font-weight-bold, 700);
    color: var(--sx-color-neutral-foreground-1);
    padding-left: calc(var(--sx-spacing-xs) - 3px);
}

[data-sx-style="classic"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header {
    background-color: transparent;
    border-left: 3px solid var(--sx-color-brand-background-1);
    font-weight: var(--sx-font-weight-bold, 700);
    color: var(--sx-color-neutral-foreground-1);
    padding-left: calc(var(--sx-spacing-xs) - 3px);
}

[data-sx-style="classic"] .sx-nav-menu-item-link:hover {
    text-decoration: underline;
    background-color: transparent;
}

[data-sx-style="classic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active {
    background-color: transparent;
    color: var(--sx-color-neutral-foreground-1);
    border-left: 3px solid var(--sx-color-brand-background-1);
    box-shadow: none;
}

[data-sx-style="classic"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header {
    background-color: transparent;
    color: var(--sx-color-neutral-foreground-1);
    border-left: 3px solid var(--sx-color-brand-background-1);
    box-shadow: none;
}

[data-sx-style="classic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot,
[data-sx-style="classic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="classic"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-icon-slot,
[data-sx-style="classic"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-item-text,
[data-sx-style="classic"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-group-expander {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="classic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active {
    background-color: transparent;
    color: var(--sx-color-brand-foreground-1);
    border-left: 3px solid var(--sx-color-brand-background-1);
    font-weight: var(--sx-font-weight-bold, 700);
}

[data-sx-style="classic"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header {
    background-color: transparent;
    color: var(--sx-color-brand-foreground-1);
    border-left: 3px solid var(--sx-color-brand-background-1);
    font-weight: var(--sx-font-weight-bold, 700);
}

[data-sx-style="classic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot,
[data-sx-style="classic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="classic"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-icon-slot,
[data-sx-style="classic"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-item-text,
[data-sx-style="classic"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-group-expander {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="classic"] .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover,
[data-sx-style="classic"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover {
    background-color: transparent;
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="classic"] .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover > .sx-nav-menu-icon-slot,
[data-sx-style="classic"] .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover > .sx-nav-menu-item-text,
[data-sx-style="classic"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover > .sx-nav-menu-icon-slot,
[data-sx-style="classic"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover > .sx-nav-menu-item-text,
[data-sx-style="classic"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover > .sx-nav-menu-group-expander {
    color: var(--sx-color-brand-foreground-1) !important;
}

/* --- SxSwitch --- */
[data-sx-style="classic"] .sx-switch__track {
    border-radius: 0.125rem;
    width: 2rem;
    height: 1rem;
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
    background-color: var(--sx-color-neutral-background-1);
}

[data-sx-style="classic"] .sx-switch__thumb {
    border-radius: 0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--sx-color-neutral-foreground-2);
    box-shadow: none;
    left: 0.125rem;
}

[data-sx-style="classic"] input:checked + .sx-switch__track {
    background-color: var(--sx-switch-checked-background);
    border-color: var(--sx-switch-checked-border);
}

[data-sx-style="classic"] input:checked + .sx-switch__track .sx-switch__thumb {
    background-color: var(--sx-color-neutral-background-1);
    transform: translate(1rem, -50%);
}


/* ================================================================
   CLASSIC — Dark mode adjustments
   ================================================================ */
[data-sx-style="classic"][data-theme="dark"] .sx-input-wrapper {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25);
}

[data-sx-style="classic"][data-theme="dark"] .sx-btn:active:not(:disabled) {
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.4);
}


/* ================================================================
   FUTURISTIC — Sci-fi / Neon / Cyberpunk
   Signature: glow effects, brand-color borders, slow luminous
              transitions, translucent dark panels, neon accent lines
   ================================================================ */

/* --- SxButton --- */
[data-sx-style="futuristic"] .sx-btn {
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--sx-type-command-font-size);
    /* 质感在**线**上，不在光斑上：边不是一条被染色的线，而是一张渐变 —— 明暗沿着边走一圈，
       四条边受光各不相同，线上有暗段也有窄而亮的高光带。内渗只留一点点：之前放大到能当
       主角时，亮底上是一层脏兮兮的蓝雾，而且抢了线的戏。

       实现走「遮罩伪元素环」而不是 border-image 或 border-box 渐变，因为只有它三条都占：
       ① 不碰 background —— 组件自己的 hover / pressed / disabled 背景照常工作；
       ② 吃 border-radius —— border-image 不吃，胶囊和圆形按钮会被它压成方框（试过，会）；
       ③ 只有一条环规则 —— 各档只换 --sx-futuristic-edge-image 这一个变量，
          自定义属性会继承进伪元素，所以变体不必各自重写一遍环。
       边框本身留 2px 透明，环正好铺在这 2px 上，布局与其它风格一致、切换风格不跳。 */
    position: relative;
    /* 边宽收成 0，环画在 padding box 最外侧的 2px 上 —— 不是审美选择，是被 .sx-btn 的
       overflow:hidden 逼的：溢出裁剪的边界就是 padding box，画在 border box 上的伪元素
       会被整个裁掉（连一个 background:red 的调试环都看不见）。
       .sx-btn 是 box-sizing:border-box，所以把边宽从 2px 收到 0 不改变按钮外形尺寸，
       只是把那 2px 让给环，文字反而多出 2px 余量。 */
    border-width: 0;
    --sx-futuristic-edge-width: 2px;
    --sx-futuristic-edge-image: var(--sx-futuristic-metal);
    --sx-button-resting-shadow:
        inset 0 0 var(--sx-futuristic-spill) 0 color-mix(in srgb, var(--sx-color-brand-background-1) 22%, transparent);
}

/* 金属环 —— 这套风格里所有「有边的东西」共用同一条规则。
   写成一条而不是每个组件抄一遍：各组件只声明自己那份 --sx-futuristic-edge-image
   和 --sx-futuristic-edge-width，环怎么画由这里统一决定。
   前提是宿主 box-sizing: border-box 且把 border-width 收成 0（按钮、输入框、卡片都满足），
   这样 padding box 与 border box 重合，环既贴着外沿、又落在 overflow 裁剪区之内。 */
[data-sx-style="futuristic"] :is(.sx-btn, .sx-card, .sx-settings-group, .sx-input-wrapper)::after {
    content: "";
    position: absolute;
    /* 边宽为 0 时 padding box 就是 border box，inset:0 正好铺满按钮，
       border-radius: inherit 也就精确对齐（圆角按钮的环会被同一条圆角裁出弧形）。 */
    inset: 0;
    border-radius: inherit;
    padding: var(--sx-futuristic-edge-width);
    background: var(--sx-futuristic-edge-lighting), var(--sx-futuristic-edge-image);
    opacity: var(--sx-futuristic-edge-opacity, 1);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.3s ease;
}

[data-sx-style="futuristic"] .sx-btn--accent,
[data-sx-style="futuristic"] .sx-btn--importance-primary {
    /* 主按钮是实心品牌色，金属边在它上面要更亮才看得见；顶边再压一条灯丝（光源在上方）、
       下缘留一道暗侧 —— 顶亮下暗才有厚度，否则只是一块被涂亮的方片。 */
    --sx-futuristic-edge-image: var(--sx-futuristic-metal-accent);
    --sx-button-resting-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--sx-futuristic-filament) 46%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--sx-color-brand-stroke-1) 55%, transparent),
        inset 0 0 var(--sx-futuristic-spill-accent) 0 color-mix(in srgb, var(--sx-futuristic-filament) 24%, transparent);
}

[data-sx-style="futuristic"] .sx-btn:active:not(:disabled) {
    transform: none;
    filter: var(--sx-futuristic-press-filter);
}

[data-sx-style="futuristic"] .sx-btn--neutral:hover:not(:disabled),
[data-sx-style="futuristic"] .sx-btn--importance-secondary:hover:not(:disabled),
[data-sx-style="futuristic"] .sx-btn--outline:hover:not(:disabled),
[data-sx-style="futuristic"] .sx-btn--importance-tertiary:hover:not(:disabled) {
    /* hover = 光源移动，高光带换个角度扫过去，不是把光摊大。 */
    --sx-futuristic-edge-image: var(--sx-futuristic-metal-hover);
    box-shadow:
        inset 0 0 calc(var(--sx-futuristic-spill) * 1.4) 0 color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
}

[data-sx-style="futuristic"] .sx-btn--accent,
[data-sx-style="futuristic"] .sx-btn--importance-primary {
    /* 原先混的是字面量 white：亮色下勉强像高光，暗色下把品牌色冲淡成一块灰蓝。改走灯丝
       token，两个主题各自朝自己那一极的「亮」混。 */
    background-image: linear-gradient(
        135deg,
        var(--sx-color-brand-background-1) 0%,
        color-mix(in srgb, var(--sx-color-brand-background-1) 82%, var(--sx-futuristic-filament)) 100%
    );
}

[data-sx-style="futuristic"] .sx-btn--accent:hover:not(:disabled),
[data-sx-style="futuristic"] .sx-btn--importance-primary:hover:not(:disabled) {
    box-shadow:
        inset 0 0 9px -4.2px color-mix(in srgb, var(--sx-color-brand-background-1) 50%, transparent),
        inset 0 0 3px -1.4px color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
}

[data-sx-style="futuristic"] .sx-btn:focus-visible {
    /* 焦点环必须在外部看得见 —— 把它一起收进内侧就等于没有焦点指示。
       这里用实心双环而不是模糊光晕：硬线本来就更贴这套风格的语言，
       也不会和「光在内部」那条规则打架。 */
    box-shadow:
        0 0 0 2px var(--sx-color-neutral-background-1),
        0 0 0 4px color-mix(in srgb, var(--sx-color-brand-background-1) 60%, transparent),
        var(--sx-button-resting-shadow, 0 0 transparent);
}

/* --- SxInput --- */
[data-sx-style="futuristic"] .sx-input-wrapper {
    background: color-mix(in srgb, var(--sx-color-neutral-background-1) 85%, transparent);
    position: relative;
    border-width: 0;
    --sx-futuristic-edge-width: 1px;
    --sx-futuristic-edge-image: var(--sx-futuristic-metal-quiet);
    --sx-futuristic-edge-lighting: var(--sx-futuristic-edge-lighting-quiet);
}

[data-sx-style="futuristic"] .sx-input-wrapper:focus-within {
    /* 边宽已收成 0，改边色不再有任何效果 —— 聚焦要换的是那张环渐变本身：
       换成整档金属并加宽一格，「这一格在等你输入」就有了。 */
    --sx-futuristic-edge-width: 2px;
    --sx-futuristic-edge-image: var(--sx-futuristic-metal);
    box-shadow:
        inset 0 0 6px -2.8px color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
}

/* --- SxCard + Settings surfaces --- */
[data-sx-style="futuristic"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    box-shadow: var(--sx-shadow-sm);
}

/* 容器用暗一档的金属、只有一格宽、再整体压低一档：同一块料，但它不该和按钮抢注意力 ——
   一屏里能动的是按钮，容器只是把内容围起来。压低用 opacity 而不是另调一组颜色，
   这样光泽的形状不变，只是整条线退后一步。
   （容器边框不是控件边界，不受 3:1 那条约束；三级按钮那条线才受。） */
[data-sx-style="futuristic"] :is(.sx-card, .sx-settings-group) {
    position: relative;
    border-width: 0;
    --sx-futuristic-edge-opacity: 0.55;
    --sx-futuristic-edge-width: 1px;
    --sx-futuristic-edge-image: var(--sx-futuristic-metal-quiet);
    --sx-futuristic-edge-lighting: var(--sx-futuristic-edge-lighting-quiet);
}

[data-sx-style="futuristic"] :is(.sx-card-header, .sx-settings-group-header) {
    background: color-mix(in srgb, var(--sx-color-neutral-background-2) 90%, transparent);
    border-bottom-color: color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

[data-sx-style="futuristic"] .sx-card.sx-is-hoverable:hover {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 50%, transparent);
    box-shadow:
        inset 0 0 12px -5.6px color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

/* --- SxDialog --- */
[data-sx-style="futuristic"] .sx-dialog-overlay {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

[data-sx-style="futuristic"] .sx-dialog {
    border: var(--sx-border-width-thin) solid color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
}

[data-sx-style] .sx-dialog.sx-dialog--dragging,
[data-sx-style] .sx-dialog.sx-dialog--resizing {
    transition: none;
}

[data-sx-style] .sx-dialog-overlay.sx-dialog-overlay--glass {
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
}

[data-sx-style="futuristic"] .sx-dialog-header {
    border-bottom-color: color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
}

[data-sx-style="futuristic"] .sx-dialog-footer {
    border-top-color: color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
}

/* --- SxNavMenu --- */
[data-sx-style="futuristic"] .sx-nav-menu-item-link--active {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 12%, transparent);
    color: var(--sx-color-brand-foreground-1);
    border-left: 2px solid var(--sx-color-brand-background-1);
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--sx-color-brand-background-1) 10%, transparent);
}

[data-sx-style="futuristic"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 12%, transparent);
    color: var(--sx-color-brand-foreground-1);
    border-left: 2px solid var(--sx-color-brand-background-1);
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--sx-color-brand-background-1) 10%, transparent);
}

[data-sx-style="futuristic"] .sx-nav-menu-item-link:hover {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 6%, transparent);
}

[data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
    color: var(--sx-color-brand-foreground-1);
    border-left: 2px solid var(--sx-color-brand-background-1);
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--sx-color-brand-background-1) 10%, transparent);
}

[data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
    color: var(--sx-color-brand-foreground-1);
    border-left: 2px solid var(--sx-color-brand-background-1);
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--sx-color-brand-background-1) 10%, transparent);
}

[data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot,
[data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-icon-slot,
[data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-item-text,
[data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-group-expander {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 12%, transparent);
    color: var(--sx-color-brand-foreground-1);
    border-left: 2px solid var(--sx-color-brand-background-1);
}

[data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 12%, transparent);
    color: var(--sx-color-brand-foreground-1);
    border-left: 2px solid var(--sx-color-brand-background-1);
}

[data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-icon-slot,
[data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link--active > .sx-nav-menu-item-text {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-icon-slot,
[data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-item-text,
[data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header > .sx-nav-menu-group-expander {
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="futuristic"] .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover,
[data-sx-style="futuristic"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 12%, transparent);
    color: var(--sx-color-brand-foreground-1);
}

[data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"] > .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover,
[data-sx-style="futuristic"] .sx-nav-menu-item[data-level="1"].sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
}

[data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]) > .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover,
[data-sx-style="futuristic"] .sx-nav-menu-item[data-level]:not([data-level="1"]).sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover {
    background-color: color-mix(in srgb, var(--sx-color-brand-background-1) 12%, transparent);
}

[data-sx-style="futuristic"] .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover > .sx-nav-menu-icon-slot,
[data-sx-style="futuristic"] .sx-nav-menu-item-link.sx-nav-menu-item-link--active:hover > .sx-nav-menu-item-text,
[data-sx-style="futuristic"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover > .sx-nav-menu-icon-slot,
[data-sx-style="futuristic"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover > .sx-nav-menu-item-text,
[data-sx-style="futuristic"] .sx-nav-menu-item.sx-nav-menu-item--selected > .sx-nav-menu-group-header:hover > .sx-nav-menu-group-expander {
    color: var(--sx-color-brand-foreground-1) !important;
}

/* --- SxSwitch --- */
[data-sx-style="futuristic"] .sx-switch__track {
    width: 2.25rem;
    height: 0.75rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--sx-color-neutral-stroke-1) 60%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-neutral-stroke-1) 40%, transparent);
}

[data-sx-style="futuristic"] .sx-switch__thumb {
    width: 0.875rem;
    height: 0.875rem;
    box-shadow:
        inset 0 0 3px -1.4px color-mix(in srgb, var(--sx-switch-checked-background) 30%, transparent);
}

[data-sx-style="futuristic"] input:checked + .sx-switch__track {
    background-color: color-mix(in srgb, var(--sx-switch-checked-background) 40%, transparent);
    border-color: var(--sx-switch-checked-border);
    box-shadow:
        inset 0 0 6px -2.8px color-mix(in srgb, var(--sx-switch-checked-background) 30%, transparent);
}

[data-sx-style="futuristic"] input:checked + .sx-switch__track .sx-switch__thumb {
    background-color: var(--sx-switch-checked-background);
    box-shadow:
        inset 0 0 4.5px -2.1px color-mix(in srgb, var(--sx-switch-checked-background) 60%, transparent);
    transform: translate(1.125rem, -50%);
}


/* ================================================================
   FUTURISTIC — Dark mode adjustments (glow intensified)
   ================================================================ */
[data-sx-style="futuristic"][data-theme="dark"] .sx-btn--neutral:hover:not(:disabled),
[data-sx-style="futuristic"][data-theme="dark"] .sx-btn--importance-secondary:hover:not(:disabled),
[data-sx-style="futuristic"][data-theme="dark"] .sx-btn--outline:hover:not(:disabled),
[data-sx-style="futuristic"][data-theme="dark"] .sx-btn--importance-tertiary:hover:not(:disabled) {
    box-shadow:
        inset 0 0 9px -4.2px color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-btn--accent:hover:not(:disabled),
[data-sx-style="futuristic"][data-theme="dark"] .sx-btn--importance-primary:hover:not(:disabled) {
    box-shadow:
        inset 0 0 12px -5.6px color-mix(in srgb, var(--sx-color-brand-background-1) 60%, transparent),
        inset 0 0 4.5px -2.1px color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-input-wrapper {
    background: color-mix(in srgb, var(--sx-color-neutral-background-1) 70%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-input-wrapper:focus-within {
    box-shadow:
        inset 0 0 9px -4.2px color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-card {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 35%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-card.sx-is-hoverable:hover {
    box-shadow:
        inset 0 0 15px -7px color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] input:checked + .sx-switch__track {
    box-shadow:
        inset 0 0 9px -4.2px color-mix(in srgb, var(--sx-switch-checked-background) 50%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] input:checked + .sx-switch__track .sx-switch__thumb {
    box-shadow:
        inset 0 0 7.5px -3.5px color-mix(in srgb, var(--sx-switch-checked-background) 80%, transparent);
}


/* ████████████████████████████████████████████████████████████████
   BATCH 2 — Form Controls
   SxCheckbox, SxRadio, SxSelect, SxTextArea, SxSlider, SxToggleButton
   ████████████████████████████████████████████████████████████████ */


/* ================================================================
   CUPERTINO — Form Controls
   ================================================================ */

/* --- SxCheckbox --- */
[data-sx-style="cupertino"] .sx-checkbox-box {
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

[data-sx-style="cupertino"] .sx-checkbox-wrapper:not(.sx-is-readonly) .sx-checkbox-input:checked + .sx-checkbox-box {
    background-color: var(--sx-color-brand-background-1);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
}

/* --- SxRadio --- */
[data-sx-style="cupertino"] .sx-radio-circle {
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

[data-sx-style="cupertino"] .sx-radio-wrapper:not(.sx-is-readonly) .sx-radio-input:checked + .sx-radio-circle {
    border-color: var(--sx-color-brand-background-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

/* --- SxSelect --- */
[data-sx-style="cupertino"] .sx-select-container {
    background: var(--sx-color-neutral-background-1);
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

[data-sx-style="cupertino"] .sx-select-popup {
    box-shadow: var(--sx-shadow-xl);
    border-color: var(--sx-surface-separator-color);
}

/* --- SxTextArea --- */
[data-sx-style="cupertino"] .sx-textarea:focus {
    border-color: var(--sx-color-brand-background-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
}

/* --- SxSlider --- */
[data-sx-style="cupertino"] .sx-slider.sx-slider--thumb-circle::-webkit-slider-thumb {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- SxToggleButton --- */
[data-sx-style="cupertino"] .sx-toggle-btn {
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

[data-sx-style="cupertino"] .sx-toggle-btn.sx-is-checked {
    box-shadow: var(--sx-shadow-sm);
}


/* ================================================================
   FLUENT — Form Controls
   ================================================================ */

/* --- SxCheckbox --- */
[data-sx-style="fluent"] .sx-checkbox-box {
    border-radius: var(--sx-radius-sm);
}

/* --- SxRadio --- */
[data-sx-style="fluent"] .sx-radio-wrapper:not(.sx-is-readonly) .sx-radio-input:checked + .sx-radio-circle::after {
    width: 0.5rem;
    height: 0.5rem;
}

/* --- SxSelect --- */
[data-sx-style="fluent"] .sx-select-container {
    background: var(--sx-color-neutral-background-3);
    border-bottom-width: 2px;
}

[data-sx-style="fluent"] .sx-select-container:hover:not(.sx-is-disabled):not(.sx-is-readonly) {
    border-color: var(--sx-color-neutral-stroke-1);
    border-bottom-color: var(--sx-color-brand-background-1);
}

/* --- SxTextArea --- */
[data-sx-style="fluent"] .sx-textarea {
    background-color: var(--sx-color-neutral-background-3);
    border-bottom-width: 2px;
}

[data-sx-style="fluent"] .sx-textarea:focus {
    box-shadow: none;
    border-color: var(--sx-color-neutral-stroke-1);
    border-bottom-color: var(--sx-color-brand-background-1);
}

/* --- SxSlider --- */
[data-sx-style="fluent"] .sx-slider.sx-slider--thumb-circle::-webkit-slider-thumb {
    box-shadow: none;
    border-width: 3px;
}

/* --- SxToggleButton --- */
[data-sx-style="fluent"] .sx-toggle-btn {
    transition: all 0.15s ease;
}

[data-sx-style="fluent"] .sx-toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sx-color-neutral-background-1),
                0 0 0 4px var(--sx-color-neutral-foreground-1);
}


/* ================================================================
   CLASSIC — Form Controls
   ================================================================ */

/* --- SxCheckbox --- */
[data-sx-style="classic"] .sx-checkbox-box {
    border-radius: 0;
    border-width: 1px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
    transition: none;
}

/* --- SxRadio --- */
[data-sx-style="classic"] .sx-radio-circle {
    transition: none;
}

/* --- SxSelect --- */
[data-sx-style="classic"] .sx-select-container {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
}

[data-sx-style="classic"] .sx-select-popup {
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
    border-width: 1px;
}

/* --- SxTextArea --- */
[data-sx-style="classic"] .sx-textarea {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
}

[data-sx-style="classic"] .sx-textarea:focus {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* --- SxSlider --- */
[data-sx-style="classic"] .sx-slider {
    border-radius: 0;
}

[data-sx-style="classic"] .sx-slider.sx-slider--thumb-circle::-webkit-slider-thumb {
    border-radius: 0;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

/* --- SxToggleButton --- */
[data-sx-style="classic"] .sx-toggle-btn {
    transition: none;
}

[data-sx-style="classic"] .sx-toggle-btn:focus-visible {
    outline: 2px dashed var(--sx-color-brand-foreground-1);
    outline-offset: 2px;
}


/* ================================================================
   FUTURISTIC — Form Controls
   ================================================================ */

/* --- SxCheckbox --- */
[data-sx-style="futuristic"] .sx-checkbox-box {
    border-color: color-mix(in srgb, var(--sx-color-neutral-stroke-1) 60%, transparent);
    transition: all 0.3s ease;
}

[data-sx-style="futuristic"] .sx-checkbox-wrapper:not(.sx-is-readonly) .sx-checkbox-input:checked + .sx-checkbox-box {
    box-shadow:
        inset 0 0 4.5px -2.1px color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent);
}

/* --- SxRadio --- */
[data-sx-style="futuristic"] .sx-radio-circle {
    border-color: color-mix(in srgb, var(--sx-color-neutral-stroke-1) 60%, transparent);
}

[data-sx-style="futuristic"] .sx-radio-wrapper:not(.sx-is-readonly) .sx-radio-input:checked + .sx-radio-circle {
    box-shadow:
        inset 0 0 4.5px -2.1px color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent);
}

/* --- SxSelect --- */
[data-sx-style="futuristic"] .sx-select-container {
    background: color-mix(in srgb, var(--sx-color-neutral-background-1) 85%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-neutral-stroke-1) 60%, transparent);
}

[data-sx-style="futuristic"] .sx-select-container:hover:not(.sx-is-disabled):not(.sx-is-readonly) {
    border-color: var(--sx-color-brand-background-1);
    box-shadow:
        inset 0 0 4.5px -2.1px color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

[data-sx-style="futuristic"] .sx-select-popup {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
    box-shadow:
        inset 0 0 12px -5.6px color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent),
        0 0 var(--sx-futuristic-halo) color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
}

/* --- SxTextArea --- */
[data-sx-style="futuristic"] .sx-textarea {
    background-color: color-mix(in srgb, var(--sx-color-neutral-background-1) 85%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-neutral-stroke-1) 60%, transparent);
}

[data-sx-style="futuristic"] .sx-textarea:focus {
    border-color: var(--sx-color-brand-background-1);
    box-shadow:
        inset 0 0 6px -2.8px color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
}

/* --- SxSlider --- */
[data-sx-style="futuristic"] .sx-slider {
    background: color-mix(in srgb, var(--sx-color-neutral-stroke-2) 50%, transparent);
}

[data-sx-style="futuristic"] .sx-slider.sx-slider--thumb-circle::-webkit-slider-thumb {
    box-shadow:
        inset 0 0 4.5px -2.1px color-mix(in srgb, var(--sx-color-brand-background-1) 50%, transparent);
}

/* --- SxToggleButton --- */
[data-sx-style="futuristic"] .sx-toggle-btn {
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[data-sx-style="futuristic"] .sx-toggle-btn.sx-is-checked {
    box-shadow:
        inset 0 0 6px -2.8px color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
}


/* ████████████████████████████████████████████████████████████████
   BATCH 3 — Feedback & Navigation
   SxTabs, SxMessageBar, SxToast, SxAccordion, SxTooltip, SxProgress
   ████████████████████████████████████████████████████████████████ */


/* ================================================================
   CUPERTINO — Feedback & Navigation
   ================================================================ */

/* --- SxTabs --- */
[data-sx-style="cupertino"] .sx-tabs-item__indicator {
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

[data-sx-style="cupertino"] .sx-tabs--button > .sx-tabs-list {
    box-shadow: var(--sx-shadow-sm);
    border-color: var(--sx-surface-separator-color);
}

[data-sx-style="cupertino"] .sx-tabs--button > .sx-tabs-list > .sx-tabs-item.sx-is-active {
    box-shadow: var(--sx-shadow-sm);
}

/* --- SxMessageBar --- */
[data-sx-style="cupertino"] .sx-message-bar {
    border-color: var(--sx-surface-separator-color);
    box-shadow: var(--sx-shadow-sm);
}

/* --- SxToast --- */
[data-sx-style="cupertino"] .sx-toast {
    border-color: var(--sx-surface-separator-color);
    box-shadow: var(--sx-shadow-xl);
}

/* --- SxAccordion --- */
[data-sx-style="cupertino"] .sx-accordion {
    border-color: var(--sx-surface-separator-color);
    box-shadow: var(--sx-shadow-sm);
}

[data-sx-style="cupertino"] .sx-accordion-item > .sx-accordion-header:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent);
}

/* --- SxTooltip --- */
[data-sx-style="cupertino"] .sx-tooltip {
    box-shadow: var(--sx-shadow-lg);
}

/* --- SxProgress --- */
[data-sx-style="cupertino"] .sx-progress-bar {
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}


/* ================================================================
   FLUENT — Feedback & Navigation
   ================================================================ */

/* --- SxTabs --- */
[data-sx-style="fluent"] .sx-tabs-item__indicator {
    transition: all 0.2s ease;
}

/* --- SxMessageBar --- */
/* Fluent uses default styling — thin borders, minimal adjustments */

/* --- SxToast --- */
[data-sx-style="fluent"] .sx-toast {
    box-shadow: var(--sx-shadow-md);
}

/* --- SxAccordion --- */
[data-sx-style="fluent"] .sx-accordion-item > .sx-accordion-header:focus-visible {
    box-shadow: 0 0 0 2px var(--sx-color-neutral-background-1),
                0 0 0 4px var(--sx-color-neutral-foreground-1);
}

/* --- SxProgress --- */
[data-sx-style="fluent"] .sx-progress-track {
    border-radius: var(--sx-radius-sm);
}

[data-sx-style="fluent"] .sx-progress-bar {
    border-radius: var(--sx-radius-sm);
}


/* ================================================================
   CLASSIC — Feedback & Navigation
   ================================================================ */

/* --- SxTabs --- */
[data-sx-style="classic"] .sx-tabs-item {
    transition: none !important;
}

[data-sx-style="classic"] .sx-tabs-item__indicator {
    transition: none;
}

[data-sx-style="classic"] .sx-tabs--button > .sx-tabs-list {
    box-shadow: none;
    border-width: 1px;
}

/* --- SxMessageBar --- */
[data-sx-style="classic"] .sx-message-bar {
    border-width: 1px;
    box-shadow: none;
}

/* --- SxToast --- */
[data-sx-style="classic"] .sx-toast {
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
    border-width: 1px;
    animation: none;
}

/* --- SxAccordion --- */
[data-sx-style="classic"] .sx-accordion-item > .sx-accordion-header {
    transition: none;
}

[data-sx-style="classic"] .sx-accordion-item > .sx-accordion-header:focus-visible {
    box-shadow: none;
    outline: 2px dashed var(--sx-color-brand-foreground-1);
    outline-offset: -2px;
}

/* --- SxTooltip --- */
[data-sx-style="classic"] .sx-tooltip {
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
    animation: none;
}

/* --- SxProgress --- */
[data-sx-style="classic"] .sx-progress-track {
    border-radius: 0;
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
}

[data-sx-style="classic"] .sx-progress-bar {
    border-radius: 0;
    transition: width 0.1s linear;
}


/* ================================================================
   FUTURISTIC — Feedback & Navigation
   ================================================================ */

/* --- SxTabs --- */
[data-sx-style="futuristic"] .sx-tabs-item__indicator {
    box-shadow:
        inset 0 0 4.5px -2.1px color-mix(in srgb, var(--sx-color-brand-background-1) 50%, transparent);
}

[data-sx-style="futuristic"] .sx-tabs--button > .sx-tabs-list {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

[data-sx-style="futuristic"] .sx-tabs--button > .sx-tabs-list > .sx-tabs-item.sx-is-active {
    box-shadow:
        inset 0 0 6px -2.8px color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
}

/* --- SxMessageBar --- */
[data-sx-style="futuristic"] .sx-message-bar {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

/* --- SxToast --- */
[data-sx-style="futuristic"] .sx-toast {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
    box-shadow:
        inset 0 0 12px -5.6px color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent),
        0 0 var(--sx-futuristic-halo) color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
}

/* --- SxAccordion --- */
[data-sx-style="futuristic"] .sx-accordion {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

[data-sx-style="futuristic"] .sx-accordion-item > .sx-accordion-header:focus-visible {
    /* 同按钮：焦点环留在外部，实心双环。 */
    box-shadow:
        0 0 0 2px var(--sx-color-neutral-background-1),
        0 0 0 4px color-mix(in srgb, var(--sx-color-brand-background-1) 60%, transparent);
}

/* --- SxTooltip --- */
[data-sx-style="futuristic"] .sx-tooltip {
    border: var(--sx-border-width-thin) solid color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
    box-shadow:
        inset 0 0 6px -2.8px color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent),
        0 0 var(--sx-futuristic-halo) color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
}

/* --- SxProgress --- */
[data-sx-style="futuristic"] .sx-progress-bar {
    box-shadow:
        inset 0 0 4.5px -2.1px color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent);
}


/* ████████████████████████████████████████████████████████████████
   BATCH 4 — Data Display & Panels
   SxDataGrid, SxTable, SxTag, SxDrawer, SxMenu/SxMenuItem
   ████████████████████████████████████████████████████████████████ */


/* ================================================================
   CUPERTINO — Data Display & Panels
   ================================================================ */

/* --- SxDataGrid --- */
[data-sx-style="cupertino"] .sx-datagrid {
    box-shadow: var(--sx-shadow-sm);
}

[data-sx-style="cupertino"] .sx-datagrid-header-row > .sx-datagrid-cell {
    background: color-mix(in srgb, var(--sx-color-neutral-background-3) 60%, var(--sx-color-neutral-background-1));
}

/* --- SxTable --- */
[data-sx-style="cupertino"] .sx-table-wrapper {
    border-color: var(--sx-surface-separator-color);
    box-shadow: var(--sx-shadow-sm);
}

/* --- SxTag --- */
[data-sx-style="cupertino"] .sx-tag {
    border-color: transparent;
}

[data-sx-style="cupertino"] .sx-tag--capsule {
    border-radius: 999px;
}

/* --- SxDrawer --- */
[data-sx-style="cupertino"] .sx-drawer-overlay {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

[data-sx-style="cupertino"] .sx-drawer-panel {
    box-shadow: var(--sx-shadow-overlay);
}

[data-sx-style="cupertino"] .sx-drawer-header {
    border-bottom-color: color-mix(in srgb, var(--sx-color-neutral-stroke-2) 50%, transparent);
}

[data-sx-style="cupertino"] .sx-drawer-footer {
    border-top-color: color-mix(in srgb, var(--sx-color-neutral-stroke-2) 50%, transparent);
}

/* --- SxMenu --- */
[data-sx-style="cupertino"] .sx-menu-dropdown {
    --sx-menu-radius: var(--sx-radius-lg);
    border-color: var(--sx-surface-separator-color);
    box-shadow: var(--sx-shadow-overlay);
}

/* --- SxMenuItem --- */
[data-sx-style="cupertino"] .sx-menu-item {
    transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}


/* ================================================================
   FLUENT — Data Display & Panels
   ================================================================ */

/* --- SxDataGrid --- */
[data-sx-style="fluent"] .sx-datagrid {
    box-shadow: none;
}

/* --- SxTable --- */
[data-sx-style="fluent"] .sx-table-wrapper {
    box-shadow: none;
}

/* --- SxTag --- */
/* Fluent default is fine */

/* --- SxDrawer --- */
[data-sx-style="fluent"] .sx-drawer-panel {
    box-shadow: var(--sx-shadow-lg);
}

/* --- SxMenu --- */
[data-sx-style="fluent"] .sx-menu-dropdown {
    box-shadow: var(--sx-shadow-md);
}

/* --- SxMenuItem --- */
[data-sx-style="fluent"] .sx-menu-item {
    transition: background 0.1s ease;
}


/* ================================================================
   CLASSIC — Data Display & Panels
   ================================================================ */

/* --- SxDataGrid --- */
[data-sx-style="classic"] .sx-datagrid {
    box-shadow: none;
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
}

/* --- SxTable --- */
[data-sx-style="classic"] .sx-table-wrapper {
    box-shadow: none;
    border-width: 1px;
}

/* --- SxTag --- */
[data-sx-style="classic"] .sx-tag {
    border-width: 1px;
}

/* --- SxDrawer --- */
[data-sx-style="classic"] .sx-drawer-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-sx-style="classic"] .sx-drawer-panel {
    box-shadow: 3px 0 0 rgba(0, 0, 0, 0.15);
    border-left: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
}

[data-sx-style="classic"] .sx-drawer--left .sx-drawer-panel {
    box-shadow: -3px 0 0 rgba(0, 0, 0, 0.15);
    border-left: none;
    border-right: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
}

/* --- SxMenu --- */
[data-sx-style="classic"] .sx-menu-dropdown {
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
    border-width: 1px;
    animation: none;
}

/* --- SxMenuItem --- */
[data-sx-style="classic"] .sx-menu-item {
    transition: none;
}


/* ================================================================
   FUTURISTIC — Data Display & Panels
   ================================================================ */

/* --- SxDataGrid --- */
[data-sx-style="futuristic"] .sx-datagrid {
    border: var(--sx-border-width-thin) solid color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

[data-sx-style="futuristic"] .sx-datagrid-header-row > .sx-datagrid-cell {
    border-bottom-color: color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

/* --- SxTable --- */
[data-sx-style="futuristic"] .sx-table-wrapper {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
}

/* --- SxTag --- */
[data-sx-style="futuristic"] .sx-tag--brand {
    box-shadow:
        inset 0 0 3px -1.4px color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
}

/* --- SxDrawer --- */
[data-sx-style="futuristic"] .sx-drawer-overlay {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

[data-sx-style="futuristic"] .sx-drawer-panel {
    border-left: var(--sx-border-width-thin) solid color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
    box-shadow:
        inset 0 0 18px -8.4px color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent),
        0 0 var(--sx-futuristic-halo) color-mix(in srgb, var(--sx-color-brand-background-1) 15%, transparent);
}

[data-sx-style="futuristic"] .sx-drawer-header {
    border-bottom-color: color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

[data-sx-style="futuristic"] .sx-drawer-footer {
    border-top-color: color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

/* --- SxMenu --- */
[data-sx-style="futuristic"] .sx-menu-dropdown {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
    box-shadow:
        inset 0 0 12px -5.6px color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent),
        0 0 var(--sx-futuristic-halo) color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

/* --- SxMenuItem --- */
[data-sx-style="futuristic"] .sx-menu-item:hover:not(.sx-is-disabled) {
    background: var(--sx-menu-item-background-hover);
    color: var(--sx-menu-item-foreground-hover);
}


/* ================================================================
   FUTURISTIC Dark — Batch 2/3/4 glow intensification
   ================================================================ */
[data-sx-style="futuristic"][data-theme="dark"] .sx-checkbox-wrapper:not(.sx-is-readonly) .sx-checkbox-input:checked + .sx-checkbox-box {
    box-shadow:
        inset 0 0 6px -2.8px color-mix(in srgb, var(--sx-color-brand-background-1) 60%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-radio-wrapper:not(.sx-is-readonly) .sx-radio-input:checked + .sx-radio-circle {
    box-shadow:
        inset 0 0 6px -2.8px color-mix(in srgb, var(--sx-color-brand-background-1) 60%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-toggle-btn.sx-is-checked {
    box-shadow:
        inset 0 0 9px -4.2px color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-tabs-item__indicator {
    box-shadow:
        inset 0 0 7.5px -3.5px color-mix(in srgb, var(--sx-color-brand-background-1) 60%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-toast {
    box-shadow:
        inset 0 0 15px -7px color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent),
        0 0 var(--sx-futuristic-halo) color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-progress-bar {
    box-shadow:
        inset 0 0 7.5px -3.5px color-mix(in srgb, var(--sx-color-brand-background-1) 60%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-drawer-panel {
    box-shadow:
        inset 0 0 24px -11.2px color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent),
        0 0 var(--sx-futuristic-halo) color-mix(in srgb, var(--sx-color-brand-background-1) 25%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-menu-dropdown {
    box-shadow:
        inset 0 0 15px -7px color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent),
        0 0 var(--sx-futuristic-halo) color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-tag--brand {
    box-shadow:
        inset 0 0 4.5px -2.1px color-mix(in srgb, var(--sx-color-brand-background-1) 50%, transparent);
}


/* ================================================================
   SxNavBar Icon Buttons — per-style overrides
   ================================================================ */

/* --- CUPERTINO --- */
[data-sx-style="cupertino"] .sx-navbar-icon-btn.sx-btn {
    background: color-mix(in srgb, var(--sx-color-neutral-background-1) 70%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 0.5px solid color-mix(in srgb, var(--sx-color-neutral-stroke-1) 40%, transparent);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-sx-style="cupertino"] .sx-navbar-icon-btn.sx-btn:hover {
    background: color-mix(in srgb, var(--sx-color-neutral-background-1) 85%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    filter: brightness(1.05);
}

[data-sx-style="cupertino"][data-theme="dark"] .sx-navbar-icon-btn.sx-btn {
    background: color-mix(in srgb, var(--sx-color-neutral-background-3) 50%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-neutral-stroke-1) 25%, transparent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

[data-sx-style="cupertino"][data-theme="dark"] .sx-navbar-icon-btn.sx-btn:hover {
    background: color-mix(in srgb, var(--sx-color-neutral-background-3) 70%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* --- FLUENT (minimal — keep defaults, just speed up transition) --- */
[data-sx-style="fluent"] .sx-navbar-icon-btn.sx-btn {
    transition: background-color 0.1s ease, color 0.1s ease;
}

/* --- CLASSIC --- */
[data-sx-style="classic"] .sx-navbar-icon-btn.sx-btn {
    background: var(--sx-color-neutral-background-3);
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
    border-radius: var(--sx-radius-sm);
    box-shadow: none;
    transition: none;
}

[data-sx-style="classic"] .sx-navbar-icon-btn.sx-btn:hover {
    background: var(--sx-color-neutral-background-3-hover);
}

/* --- FUTURISTIC --- */
[data-sx-style="futuristic"] .sx-navbar-icon-btn.sx-btn {
    background: transparent;
    border: var(--sx-border-width-thin) solid color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
    border-radius: var(--sx-radius-md);
    transition: all 0.3s ease;
}

[data-sx-style="futuristic"] .sx-navbar-icon-btn.sx-btn:hover {
    background: color-mix(in srgb, var(--sx-color-brand-background-1) 8%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 50%, transparent);
    box-shadow:
        inset 0 0 6px -2.8px color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-navbar-icon-btn.sx-btn {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-navbar-icon-btn.sx-btn:hover {
    background: color-mix(in srgb, var(--sx-color-brand-background-1) 12%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 60%, transparent);
    box-shadow:
        inset 0 0 9px -4.2px color-mix(in srgb, var(--sx-color-brand-background-1) 35%, transparent);
}


/* ================================================================
   SxMenu Dropdown — per-style overrides
   ================================================================ */

/* --- CUPERTINO: macOS-style menu (larger radius, frosted glass, rounded items) --- */
[data-sx-style="cupertino"] .sx-menu-dropdown:not(.sx-safe-surface--disabled) {
    border-radius: var(--sx-menu-radius);
    border: 0.5px solid color-mix(in srgb, var(--sx-color-neutral-stroke-1) 40%, transparent);
    background: color-mix(in srgb, var(--sx-color-neutral-background-1) 85%, transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
    padding: var(--sx-menu-content-inset);
}

[data-sx-style="cupertino"][data-theme="dark"] .sx-menu-dropdown:not(.sx-safe-surface--disabled) {
    background: color-mix(in srgb, var(--sx-color-neutral-background-1) 75%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-neutral-stroke-1) 25%, transparent);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

[data-sx-style="cupertino"] .sx-menu-dropdown.sx-safe-surface--disabled {
    background: var(--sx-color-neutral-background-1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

[data-sx-style="cupertino"] .sx-menu-item {
    border-radius: var(--sx-menu-item-radius);
    margin: 1px 0;
    padding: var(--sx-spacing-sm) var(--sx-spacing-md);
}

[data-sx-style="cupertino"] .sx-menu-item:hover:not(.sx-is-disabled) {
    background: var(--sx-menu-item-background-hover);
    color: var(--sx-menu-item-foreground-hover);
}

[data-sx-style="cupertino"] .sx-menu-item:hover:not(.sx-is-disabled) > .sx-menu-item-icon:not(.sx-icon--colorful) {
    color: var(--sx-menu-item-icon-color);
}

/* --- CLASSIC: solid bordered menu items --- */
[data-sx-style="classic"] .sx-menu-dropdown {
    border-radius: var(--sx-menu-radius);
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

[data-sx-style="classic"] .sx-menu-item:hover:not(.sx-is-disabled) {
    background: var(--sx-menu-item-background-hover);
    color: var(--sx-menu-item-foreground-hover);
}

/* --- FLUENT: keep defaults, slightly refine --- */
[data-sx-style="fluent"] .sx-menu-dropdown {
    border-radius: var(--sx-menu-radius);
}

/* --- FUTURISTIC: glow + brand accent --- */
[data-sx-style="futuristic"] .sx-menu-dropdown {
    border: var(--sx-border-width-thin) solid color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

[data-sx-style="futuristic"] .sx-menu-item:hover:not(.sx-is-disabled) {
    background: var(--sx-menu-item-background-hover);
    color: var(--sx-menu-item-foreground-hover);
}


/* ================================================================
   SxCard — per-style overrides
   ================================================================ */

/* --- CUPERTINO: 面层层次 --- */
/* 卡片得自己把「我是一块面」画出来 —— 地色是全局的，一种风格没资格替所有应用改地色。
   （试过刷分组灰底：内容区变灰、外壳还是白，交界处很不协调，撤了。）

   所以差值全压在卡自己身上，而这一档原来给的是 0.5px 的 stroke-1@40% 加 6% 的阴影：
   白地白卡时实测对比度 1.00，读者要盯着看才知道有卡。现在两手都给足：
     · 边从 0.5px 抬到 1px，颜色走分隔线 token（白底上约 1.9:1）—— 0.5px 在 1x 屏上
       会被舍掉半个像素，抬到 1px 才每块屏上都在；
     · 影子留着 —— 边说明「到这里为止」，影子说明「它浮在地上面」，两件事。
   设计稿：docs/specs/assets/design-canvas/cupertino-surface-hierarchy/ */
[data-sx-style="cupertino"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    border-radius: var(--sx-radius-lg);
    background-color: var(--sx-surface-raised-background);
    border: 1px solid var(--sx-surface-separator-color);
    box-shadow: var(--sx-surface-raised-shadow);
}

/* 「我是地」是**主动认领**的，不是默认的 —— 一个容器写上 .sx-surface-grouped 才铺分组底。
   曾经把 .sx-shell-main 也算进来（内容区一律铺灰），撤了：地色是全局的，
   一种风格没资格替所有应用改地色；而且外壳还是白的，只有内容区变灰，交界处很不协调。
   页面确实想要 Apple 那种「灰地 + 白卡」时，自己认领这个类。 */
[data-sx-style="cupertino"] .sx-surface-grouped {
    background-color: var(--sx-surface-grouped-background);
}

/* 认领了分组底的容器里，卡片不需要那么重：差值由地提供，边和影各退一步，
   否则一屏里「靠地」和「靠边」两种强度混在一起，看着像两类东西。 */
[data-sx-style="cupertino"] .sx-surface-grouped :is(.sx-card, .sx-settings-group) {
    border-width: 0.5px;
    border-color: color-mix(in srgb, var(--sx-surface-separator-color) 45%, transparent);
    box-shadow: var(--sx-surface-grouped-card-shadow);
}

[data-sx-style="cupertino"] :is(.sx-card .sx-card-header, .sx-settings-group-header) {
    border-top-left-radius: var(--sx-radius-lg);
    border-top-right-radius: var(--sx-radius-lg);
}

/* 边栏是另一块地，不是内容区的一部分。macOS / iPadOS 的做法：半透明材质底。
   外壳自己那几条布局规则（.sx-app-shell.sx-sidebar-inset.sx-winmode-card .sx-shell-sidebar）
   已经是 0,4,0，属性选择器也只算一个类，所以要重复两次类名抬到 0,6,0 才稳赢 ——
   它们管的是位置和圆角，底色归风格管。 */
[data-sx-style="cupertino"] .sx-app-shell.sx-app-shell .sx-shell-sidebar.sx-shell-sidebar {
    background-color: color-mix(in srgb, var(--sx-color-neutral-background-2) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

/* 条目左右留边、整行圆角 —— 圆角不是装饰，它把「这一行是一个可点的整体」画出来，
   方角的行看上去只是一段文字。这条停在 0,4,0：压得过组件默认，让得开应用自己的导航样式
   （应用有权把自己的边栏做成别的样子）。 */
[data-sx-style="cupertino"] .sx-app-shell .sx-shell-sidebar :is(.sx-nav-menu-item-link, .sx-nav-menu-group-header) {
    margin-inline: var(--sx-spacing-xs);
    border-radius: var(--sx-radius-md);
}

[data-sx-style="cupertino"][data-theme="dark"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    border-color: var(--sx-surface-separator-color);
    box-shadow: var(--sx-surface-raised-shadow);
}

/* --- CLASSIC: solid border, no shadow, square corners --- */
[data-sx-style="classic"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    border-radius: var(--sx-radius-sm);
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
    box-shadow: none;
}

[data-sx-style="classic"] :is(.sx-card .sx-card-header, .sx-settings-group-header) {
    border-top-left-radius: var(--sx-radius-sm);
    border-top-right-radius: var(--sx-radius-sm);
    background: var(--sx-color-neutral-background-3);
}

/* --- FLUENT: keep defaults, subtle refinement --- */
[data-sx-style="fluent"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    border-radius: var(--sx-radius-md);
    box-shadow: var(--sx-shadow-sm);
}

/* --- FUTURISTIC: brand-tinted border, glow in dark --- */
[data-sx-style="futuristic"] .sx-settings-sidebar {
    border: var(--sx-border-width-thin) solid color-mix(in srgb, var(--sx-color-brand-background-1) 15%, var(--sx-color-neutral-stroke-1));
}
[data-sx-style="futuristic"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    border-radius: var(--sx-radius-md);
}

[data-sx-style="futuristic"][data-theme="dark"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
    box-shadow:
        inset 0 0 0.75rem -0.35rem color-mix(in srgb, var(--sx-color-brand-background-1) 10%, transparent);
}

[data-sx-style="futuristic"] .sx-card.sx-is-hoverable:hover {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 50%, transparent);
    box-shadow:
        inset 0 0 1.125rem -0.525rem color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

/* ================================================================
   CAPSULE BACK BUTTON — per-style overrides
   ================================================================ */

/* --- CUPERTINO: translucent, spring press, shadow-driven depth --- */
[data-sx-style="cupertino"] .sx-navbar-back-capsule {
    background: color-mix(in srgb, var(--sx-color-neutral-background-3) 70%, transparent);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    border-color: color-mix(in srgb, var(--sx-color-neutral-stroke-2) 50%, transparent);
    box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.06);
}

[data-sx-style="cupertino"] .sx-navbar-back-main:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* --- MATERIAL: filled surface, elevation on hover, ripple-ready --- */
[data-sx-style="material"] .sx-navbar-back-capsule {
    background: var(--sx-color-neutral-background-1);
    border-color: var(--sx-color-neutral-stroke-1);
    box-shadow: var(--sx-shadow-xs);
    transition: box-shadow 0.2s ease;
}

[data-sx-style="material"] .sx-navbar-back-capsule:hover {
    box-shadow: var(--sx-shadow-sm);
}

/* --- FLUENT: subtle background, rounded micro-border --- */
[data-sx-style="fluent"] .sx-navbar-back-capsule {
    background: var(--sx-color-neutral-background-3);
    border-color: var(--sx-color-neutral-stroke-2);
}

/* --- FUTURISTIC: brand-tinted border, glow in dark --- */
[data-sx-style="futuristic"] .sx-navbar-back-capsule {
    background: color-mix(in srgb, var(--sx-color-neutral-background-3) 80%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 20%, var(--sx-color-neutral-stroke-2));
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-navbar-back-capsule {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent);
    box-shadow:
        inset 0 0 0.375rem -0.175rem color-mix(in srgb, var(--sx-color-brand-background-1) 10%, transparent);
}


/* ================================================================
   SxNavBar Back Capsule — per-style overrides
   ================================================================ */

/* --- CUPERTINO: frosted glass capsule --- */
[data-sx-style="cupertino"] .sx-navbar-back-capsule {
    background: color-mix(in srgb, var(--sx-color-neutral-background-1) 70%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 0.5px solid color-mix(in srgb, var(--sx-color-neutral-stroke-1) 40%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-sx-style="cupertino"] .sx-navbar-back-capsule:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

[data-sx-style="cupertino"][data-theme="dark"] .sx-navbar-back-capsule {
    background: color-mix(in srgb, var(--sx-color-neutral-background-3) 50%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-neutral-stroke-1) 25%, transparent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* --- FLUENT: minimal, speed transition --- */
[data-sx-style="fluent"] .sx-navbar-back-capsule {
    transition: background-color 0.1s ease;
}

/* --- CLASSIC: solid border, no effects --- */
[data-sx-style="classic"] .sx-navbar-back-capsule {
    border-radius: var(--sx-radius-sm);
    background: var(--sx-color-neutral-background-3);
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
    box-shadow: none;
}

/* --- FUTURISTIC: brand-tinted glow --- */
[data-sx-style="futuristic"] .sx-navbar-back-capsule {
    background: transparent;
    border: var(--sx-border-width-thin) solid color-mix(in srgb, var(--sx-color-brand-background-1) 30%, transparent);
    transition: all 0.3s ease;
}

[data-sx-style="futuristic"] .sx-navbar-back-capsule:hover {
    background: color-mix(in srgb, var(--sx-color-brand-background-1) 8%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 50%, transparent);
    box-shadow:
        inset 0 0 6px -2.8px color-mix(in srgb, var(--sx-color-brand-background-1) 20%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-navbar-back-capsule {
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 40%, transparent);
}

[data-sx-style="futuristic"][data-theme="dark"] .sx-navbar-back-capsule:hover {
    background: color-mix(in srgb, var(--sx-color-brand-background-1) 12%, transparent);
    border-color: color-mix(in srgb, var(--sx-color-brand-background-1) 60%, transparent);
    box-shadow:
        inset 0 0 9px -4.2px color-mix(in srgb, var(--sx-color-brand-background-1) 35%, transparent);
}

/* === SxAppShell: Mobile fullscreen — flatten inset card appearance ===
   On iOS/Android the native code injects the 'sx-mobile' class on <html>.
   The floating-card-on-background look wastes space on phone screens —
   merge shell background with content for a seamless flat surface,
   keeping safe area insets for status bar / bottom bar protection.
   This must be in a global CSS file because Blazor scoped CSS
   does not support ancestor selectors outside the component. */
html.sx-mobile .sx-app-shell.sx-sidebar-inset {
    background: var(--sx-color-neutral-background-1);
    /* Remove design gap minimum — only safe area insets remain */
    --sx-shell-outer-gap-top: var(--sx-safe-area-inset-top);
    --sx-shell-outer-gap-right: var(--sx-safe-area-inset-right);
    --sx-shell-outer-gap-bottom: var(--sx-safe-area-inset-bottom);
    --sx-shell-outer-gap-left: var(--sx-safe-area-inset-left);
}

html.sx-mobile .sx-app-shell.sx-sidebar-inset .sx-shell-main {
    border-radius: 0;
    box-shadow: none;
}

html.sx-mobile .sx-app-shell.sx-sidebar-inset .sx-shell-sidebar {
    border-radius: 0;
    box-shadow: none;
}

html.sx-mobile .sx-app-shell.sx-sidebar-inset .sx-sidebar-bottom-bar {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Mobile drawer mode must honor the same safe area bounds as the main shell.
   Absolute-positioned shell drawers do not go through SxDrawer's AppShell inset
   calculation path, so constrain them directly with the injected safe-area vars. */
html.sx-mobile .sx-app-shell.sx-sidebar-inset .sx-shell-drawer.sx-drawer--absolute {
    top: var(--sx-shell-outer-gap-top);
    right: var(--sx-shell-outer-gap-right);
    bottom: var(--sx-shell-outer-gap-bottom);
    left: var(--sx-shell-outer-gap-left);
}

html.sx-mobile .sx-app-shell.sx-sidebar-inset .sx-shell-drawer.sx-drawer--absolute .sx-drawer-overlay,
html.sx-mobile .sx-app-shell.sx-sidebar-inset .sx-shell-drawer.sx-drawer--absolute .sx-drawer-panel {
    border-radius: 0;
}

/* ================================================================
   EFFICIENT — 效率型 / 有轨
   身份：不做层（零阴影，发丝线分隔）+ 状态走轨（2px 重点色轨道贴前缘）。
   两条都是为「一屏多放几行、且长时间看不累」服务的，不是省略。
   ================================================================ */

/* --- SxButton --- */
[data-sx-style="efficient"] .sx-btn {
    /* 密集界面里按钮成排出现，过渡越短越跟手；也避免一片按钮同时做动画。 */
    transition: background-color 0.1s linear, border-color 0.1s linear;
    letter-spacing: 0;
}

/* 主按钮是全页唯一填色的东西，所以它不需要再靠阴影或渐变强调自己。 */
[data-sx-style="efficient"] .sx-btn--accent,
[data-sx-style="efficient"] .sx-btn--importance-primary {
    background-image: none;
    --sx-button-resting-shadow: 0 0 transparent;
}

/* 按下不位移、不缩放：一排按钮里任何位移都会让眼睛重新找位置。改为加深填色。 */
[data-sx-style="efficient"] .sx-btn:active:not(:disabled) {
    transform: none;
}

/* 焦点环也是一条轨，不是一圈光晕 —— 与选中态同一种语言。 */
[data-sx-style="efficient"] .sx-btn:focus-visible {
    box-shadow: var(--sx-button-resting-shadow, 0 0 transparent);
    outline: var(--sx-efficient-rail-width) solid var(--sx-efficient-rail-color);
    outline-offset: 0.0625rem;
}

/* --- SxInput / SxTextArea --- */
[data-sx-style="efficient"] .sx-input-wrapper {
    box-shadow: none;
}

/* 输入框聚焦：底部一条轨，而不是整圈变色。表单里一列输入框，看的是哪一条亮着。 */
[data-sx-style="efficient"] .sx-input-wrapper:focus-within {
    border-color: var(--sx-color-neutral-stroke-1);
    box-shadow: inset 0 calc(var(--sx-efficient-rail-width) * -1) 0 var(--sx-efficient-rail-color);
}

/* --- 面：卡片与分组 --- */
/* 零阴影，靠发丝描边分隔。 */
[data-sx-style="efficient"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    box-shadow: none;
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-2);
}

/* --- 浮层：对话框与菜单 --- */
/* 这里是「不做层」的唯一例外，但仍不用投影：浮层与页面的分离靠一圈更实的描边完成，
   投影会把密度好不容易省下来的空间又用掉。 */
[data-sx-style="efficient"] :is(.sx-dialog, .sx-menu-dropdown, .sx-drawer-panel) {
    box-shadow: none;
    border: var(--sx-border-width-thin) solid var(--sx-color-neutral-stroke-1);
}

/* --- 导航：轨在前缘 --- */
[data-sx-style="efficient"] .sx-nav-menu-item-link--active {
    background: transparent;
    box-shadow: inset var(--sx-efficient-rail-width) 0 0 var(--sx-efficient-rail-color);
    font-weight: var(--sx-font-weight-semibold);
}

/* --- 页签：轨在下缘 --- */
[data-sx-style="efficient"] .sx-tabs-item--active {
    box-shadow: inset 0 calc(var(--sx-efficient-rail-width) * -1) 0 var(--sx-efficient-rail-color);
}

/* ================================================================
   PIXEL — 像素
   身份：一处都不模糊。硬影无模糊、2px 墨边、方角、点阵拉丁字。
   ================================================================ */

/* --- SxButton --- */
/* 风格图标（叠加层）—— 像素字形是按 16 格画的，缩放时必须保持硬边，
   否则在 12px / 20px 这类非整数倍尺寸上又被插值回模糊曲线，那就白画了。 */
[data-sx-style="pixel"] .sx-pixel-icon svg {
    image-rendering: pixelated;
}

[data-sx-style="pixel"] .sx-btn {
    /* 点阵语言里没有渐变过渡：颜色瞬时切换，位移一步到位。 */
    transition: none;
    border-color: var(--sx-pixel-ink);
    letter-spacing: 0.02em;
    --sx-button-resting-shadow: var(--sx-pixel-step) var(--sx-pixel-step) 0 var(--sx-pixel-ink);
}

/* 按下：投影收掉 + 内容位移一个步长。两件事必须同时发生 ——
   只收投影像换了个皮肤，只位移像飘走。 */
[data-sx-style="pixel"] .sx-btn:active:not(:disabled) {
    --sx-button-resting-shadow: 0 0 transparent;
    transform: translate(var(--sx-pixel-step), var(--sx-pixel-step));
}

/* 三级/四级不投影：全页只有「能按下去」的那两档带硬影，弱化档不参与这套物理。 */
[data-sx-style="pixel"] .sx-btn--outline,
[data-sx-style="pixel"] .sx-btn--importance-tertiary,
[data-sx-style="pixel"] .sx-btn--lightweight,
[data-sx-style="pixel"] .sx-btn--stealth,
[data-sx-style="pixel"] .sx-btn--importance-quaternary {
    --sx-button-resting-shadow: 0 0 transparent;
}

/* 禁用降对比而不是降透明度：opacity 会把 2px 硬边变成半透明的灰边，
   那就出现了「模糊的东西」，与总规则冲突。 */
[data-sx-style="pixel"] .sx-btn:disabled,
[data-sx-style="pixel"] .sx-btn.sx-is-disabled {
    opacity: 1;
    color: color-mix(in srgb, var(--sx-pixel-ink) 38%, var(--sx-color-neutral-background-1));
    border-color: color-mix(in srgb, var(--sx-pixel-ink) 38%, var(--sx-color-neutral-background-1));
    background: var(--sx-color-neutral-background-3);
    --sx-button-resting-shadow: 0 0 transparent;
}

/* 焦点环用虚线：虚线本身就是点阵语言，实线环会和 2px 墨边糊成一条粗边。 */
[data-sx-style="pixel"] .sx-btn:focus-visible {
    box-shadow: var(--sx-button-resting-shadow, 0 0 transparent);
    outline: var(--sx-pixel-step) dashed var(--sx-color-brand-background-1);
    outline-offset: var(--sx-pixel-step);
}

/* --- 输入 --- */
/* 输入框是「凹进去的」：内侧一道浅墨影，与按钮的外凸硬影相反。 */
[data-sx-style="pixel"] :is(.sx-input-wrapper, .sx-textarea, .sx-select-container) {
    border-color: var(--sx-pixel-ink);
    box-shadow: inset var(--sx-pixel-step) var(--sx-pixel-step) 0
                color-mix(in srgb, var(--sx-pixel-ink) 18%, transparent);
}

[data-sx-style="pixel"] :is(.sx-input-wrapper, .sx-textarea, .sx-select-container):focus-within {
    outline: var(--sx-pixel-step) dashed var(--sx-color-brand-background-1);
    outline-offset: 0rem;
}

/* --- 面与浮层 --- */
[data-sx-style="pixel"] :is(.sx-card, .sx-settings-group, .sx-settings-sidebar) {
    border: var(--sx-border-width-thin) solid var(--sx-pixel-ink);
    box-shadow: var(--sx-pixel-step) var(--sx-pixel-step) 0 var(--sx-pixel-ink);
}

[data-sx-style="pixel"] :is(.sx-dialog, .sx-menu-dropdown, .sx-select-popup, .sx-toast, .sx-drawer-panel) {
    border: var(--sx-border-width-thin) solid var(--sx-pixel-ink);
    box-shadow: var(--sx-pixel-step) var(--sx-pixel-step) 0 var(--sx-pixel-ink);
}

/* --- 导航与页签：选中态是实心反白，不是底色渐变 --- */
[data-sx-style="pixel"] .sx-nav-menu-item-link--active {
    background: var(--sx-color-brand-background-1);
    color: var(--sx-color-on-brand);
}

[data-sx-style="pixel"] .sx-tabs-item--active {
    box-shadow: inset 0 calc(var(--sx-pixel-step) * -1) 0 var(--sx-color-brand-background-1);
}



/* --- 未来型：四档按钮的光要分层，不能一样亮 --- */
/* 上一版给所有档位同一条亮缝，结果 Quaternary 明明写着「纯文字、无底无边」却顶着一整圈
   发光边框，四档看上去一样重。科幻片里的界面也不是满屏都在发光 —— 亮的是当前能动的那个。
   分层：主 = 实心 + 内光 + 顶边灯丝；次 = 亮缝 + 内光；三级 = 亮缝，光弱一半；
   四级 = 不要缝，只让文字自己发光。 */
[data-sx-style="futuristic"] .sx-btn--outline,
[data-sx-style="futuristic"] .sx-btn--importance-tertiary {
    /* 三级没有底色，这圈线是它唯一的边界，任何一段掉到 3:1 以下那一段边界就没了。
       摆幅由 token 层的 halfshade 按主题收（见 sx-styles.css），这里只换更轻的光照层。 */
    --sx-futuristic-edge-lighting: var(--sx-futuristic-edge-lighting-quiet);
    --sx-futuristic-edge-image: var(--sx-futuristic-metal-quiet);
    --sx-button-resting-shadow: 0 0 transparent;
}

[data-sx-style="futuristic"] .sx-btn--lightweight,
[data-sx-style="futuristic"] .sx-btn--stealth,
[data-sx-style="futuristic"] .sx-btn--importance-quaternary {
    --sx-button-resting-shadow: 0 0 transparent;
    border-color: transparent;
    --sx-futuristic-edge-image: none;
    --sx-futuristic-edge-lighting: none;
    --sx-futuristic-edge-width: 0px;
    /* 没有边可发光了，就让字自己发光 —— 这是这一档在这套风格里唯一的存在感。 */
    text-shadow: 0 0 calc(var(--sx-futuristic-spill) * 0.5) color-mix(in srgb, var(--sx-color-brand-background-1) 70%, transparent);
}