@import url('./host-status.css');
@import url('./weather.css');
@import url('./clock.css');
@import url('./markdown.css');
@import url('./pdf-preview.css');
@import url('./pdf-annotations.css');
@import url('./pdf-ink.css');
@import url('./pdf-highlights.css');
@import url('./role-card.css');
@import url('./reported-display.css');
@import url('./printer-status.css');
@import url('./chat.css');
@import url('./progress.css');
@import url('./metric.css');
@import url('./trend-chart.css');
@import url('./paper-graph.css');
@import url('./paper-graph-teams.css');
@import url('./status-message.css');
@import url('./pagination.css');
@import url('./file-picker.css');
@import url('./tree-browser.css');
@import url('./image-region-selector.css');
@import url('./image-cropper.css');
@import url('./date-slider.css');
@import url('./question-selector.css');
@import url('./cyberpunk.css');
@import url('./sidonia.css');
@import url('./sidonia-components.css');
@import url('./sidonia-ornaments.css');
@import url('./endfield.css');
@import url('./endfield-components.css');
@import url('./minimal.css');
@import url('./display-font.css');

/* 两种基础颜色通过继承传播；每层重新派生色板，保证组件可单独覆盖其中一色。 */
.flexsystem,
.flexsystem-component {
    --flex-paper: var(--flex-primary, #f2e6cc);
    --flex-ink: var(--flex-secondary, #76583c);
    --flex-tile: color-mix(in srgb, var(--flex-paper) 88%, var(--flex-ink));
    --flex-line: color-mix(in srgb, var(--flex-ink) 24%, transparent);
    --flex-light: color-mix(in srgb, var(--flex-ink) 12%, white);
}

/* 容器和组件内的所有原生滚动区共用主题；低优先级允许调用方按需覆盖。
   只设置外观，不开启滚动、不预留空轨道，也不改变原生滚动链。 */
:where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *) {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--flex-ink) 55%, var(--flex-paper)) var(--flex-paper);
}
/* Chromium / WebKit 使用实际占位的窄轨道，避免浮动滚动条盖住文字和控件。
   标准属性置 auto，让下方伪元素控制尺寸、颜色和交汇角。 */
@supports selector(::-webkit-scrollbar) {
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *) {
        scrollbar-width: auto; scrollbar-color: auto;
    }
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *)::-webkit-scrollbar {
        width: 8px; height: 8px;
    }
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *)::-webkit-scrollbar-track,
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *)::-webkit-scrollbar-corner {
        background: var(--flex-paper);
    }
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *)::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--flex-ink) 55%, var(--flex-paper));
        border: 2px solid var(--flex-paper); border-radius: 4px;
    }
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *)::-webkit-scrollbar-thumb:hover {
        background: var(--flex-ink);
    }
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *)::-webkit-scrollbar-button { display: none; }
}
@media (forced-colors: active) {
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *) { scrollbar-color: auto; }
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *)::-webkit-scrollbar-track,
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *)::-webkit-scrollbar-corner { background: Canvas; }
    :where(.flexsystem, .flexsystem *, .flexsystem-component, .flexsystem-component *)::-webkit-scrollbar-thumb {
        background: CanvasText; border-color: Canvas;
    }
}

/* 容器高度须由调用方指定，不要让它依赖内部组件撑开。 */
.flexsystem {
    position: relative;
    overflow: hidden;
    background-color: var(--flex-paper);
    color: var(--flex-ink);
    transition: background-color 320ms ease, color 240ms ease;
}

.flexsystem > .flexsystem-surface {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: content-box;
    /* 动画和旧位置不能反过来撑大滚动区；只有画布的最终网格尺寸参与滚动。 */
    overflow: clip;
}

/* 添加 flexsystem--grid 类可显示网格辅助线。 */
.flexsystem--grid > .flexsystem-surface {
    background-image:
        linear-gradient(to right, var(--flex-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--flex-line) 1px, transparent 1px);
    background-size: 40px 40px;
}

.flexsystem-component {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--flex-line);
    border-radius: 2px;
    background-color: var(--flex-tile);
    color: var(--flex-ink);
    transform-origin: top left;
    transition: background-color 320ms ease, color 240ms ease, border-color 240ms ease,
        opacity 160ms ease, box-shadow 200ms ease;
}

.flexsystem-component[hidden] { display: none !important; }

.flexsystem-component > .flexsystem-content {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: inherit;
}

.flexsystem-component > :is(img, video, canvas).flexsystem-content { padding: 0; }
.flexsystem-component > button.flexsystem-content { cursor: pointer; }
.flexsystem-component > button.flexsystem-content:active:not(:disabled) { background-color: #ffffff16; }
.flexsystem-component > .flexsystem-content:disabled { cursor: default; opacity: .55; }
.flexsystem-component > .flexsystem-content::placeholder { color: inherit; opacity: .65; }

/* 原生表单控件沿用磁贴尺寸和主题，内容高度由网格决定。 */
.flexsystem-component > .flexsystem-textarea { resize: none; overflow: auto; line-height: 1.5; }
.flexsystem-component > .flexsystem-number-input { appearance: textfield; }
.flexsystem-number-input::-webkit-inner-spin-button,
.flexsystem-number-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.flexsystem-component > .flexsystem-select:not([multiple]) {
    appearance: none; padding-right: 24px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--flex-ink) 50%),
        linear-gradient(135deg, var(--flex-ink) 50%, transparent 50%);
    background-size: 4px 4px; background-position: calc(100% - 12px) center, calc(100% - 8px) center;
    background-repeat: no-repeat;
}
.flexsystem-select > option { color: var(--flex-ink); background: var(--flex-paper); padding: 4px 6px; }
.flexsystem-select > option:checked { background: var(--flex-tile); font-weight: 600; }
.flexsystem-select > option:disabled { color: color-mix(in srgb, var(--flex-ink) 55%, var(--flex-paper)); }
.flexsystem-component > .flexsystem-checkbox,
.flexsystem-radio-group > .flexsystem-radio-group__option {
    display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 0;
    margin: 0; color: inherit; font: inherit; cursor: pointer;
}
.flexsystem-component > .flexsystem-checkbox { overflow: hidden; }
.flexsystem-checkbox:has(input:disabled) { opacity: .55; cursor: default; }
.flexsystem-component > .flexsystem-radio-group {
    display: flex; flex-direction: column; gap: 0; padding: 0; min-inline-size: 0; overflow: auto;
}
.flexsystem-radio-group[aria-orientation='horizontal'] { flex-direction: row; flex-wrap: wrap; align-content: start; }
.flexsystem-radio-group > .flexsystem-radio-group__option {
    box-sizing: border-box; flex: 0 0 auto; min-height: 38px; max-width: 100%; padding: 6px;
}
.flexsystem-radio-group__option:has(input:disabled) { opacity: .55; cursor: default; }
.flexsystem-radio-group__empty { padding: 6px; }
.flexsystem-choice-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.flexsystem-component .flexsystem-content input.flexsystem-choice-input {
    appearance: none; display: inline-grid; place-content: center; flex: 0 0 16px;
    box-sizing: border-box; width: 16px; height: 16px; min-width: 16px; min-height: 16px; padding: 0; margin: 0;
    border: 1px solid var(--flex-ink); border-radius: 2px; background: var(--flex-paper); color: var(--flex-ink);
    accent-color: var(--flex-ink); cursor: inherit;
}
.flexsystem-choice-input[type='checkbox']:checked::before {
    content: ''; width: 8px; height: 4px; margin-bottom: 3px;
    border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.flexsystem-choice-input[type='checkbox']:indeterminate::before {
    content: ''; width: 8px; height: 2px; margin: 0; border: 0; background: currentColor; transform: none;
}
.flexsystem-component .flexsystem-content input.flexsystem-choice-input[type='radio'] { border-radius: 50%; }
.flexsystem-choice-input[type='radio']:checked::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.flexsystem-component > :is(.flexsystem-select, .flexsystem-textarea, .flexsystem-number-input):focus-visible,
.flexsystem-choice-input:focus-visible { outline: 2px solid var(--flex-ink); outline-offset: -2px; }
@media (forced-colors: active) {
    .flexsystem-component .flexsystem-content input.flexsystem-choice-input { appearance: auto; }
    .flexsystem-choice-input::before { display: none; }
    .flexsystem-component > .flexsystem-select:not([multiple]) { appearance: auto; background-image: none; }
}

/* 开关轨道保持固定可用尺寸，窄网格优先保留开关，长标签截断。 */
.flexsystem-component > .flexsystem-switch {
    display: flex; align-items: center; gap: 6px; overflow: hidden; text-align: start;
}
.flexsystem-switch__track {
    position: relative; flex: 0 0 26px; box-sizing: border-box; width: 26px; height: 16px;
    border: 1px solid var(--flex-ink); border-radius: 10px;
    background: var(--flex-paper); transition: background-color 160ms ease;
}
.flexsystem-switch__track::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--flex-ink);
    transition: transform 160ms ease, background-color 160ms ease;
}
.flexsystem-switch[aria-checked='true'] .flexsystem-switch__track { background: var(--flex-ink); }
.flexsystem-switch[aria-checked='true'] .flexsystem-switch__track::before {
    transform: translateX(10px); background: var(--flex-paper);
}
.flexsystem-switch__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 列表的线条绘制在格子内，不扣除 40px 轨道的可用尺寸。 */
.flexsystem-component.flexsystem-list-tile { border: 0; box-shadow: inset 0 0 0 1px var(--flex-line); }
.flexsystem-component > .flexsystem-list { padding: 0; overflow: auto; overscroll-behavior: auto; }
.flexsystem-list__header, .flexsystem-list__row { display: grid; min-width: 0; }
.flexsystem-list__header { height: 40px; position: sticky; top: 0; z-index: 1; background: var(--flex-paper); }
.flexsystem-list__heading, .flexsystem-list__cell {
    min-width: 0; min-height: 0; box-sizing: border-box;
}
.flexsystem-list__heading { padding: 6px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 28px; box-shadow: inset -1px -1px var(--flex-line); }
.flexsystem-list__cell { position: relative; isolation: isolate; overflow: hidden; }
/* 分隔线属于单元格，覆盖子组件底色，并且不随内容滚动或占用网格尺寸。 */
.flexsystem-list__cell::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset -1px -1px var(--flex-line); }
/* 保留原生滚动链：单元格滚到边缘后交给列表，列表到边缘后交给页面。 */
.flexsystem-list__viewport { width: 100%; height: 100%; overflow: auto; overscroll-behavior: auto; }
.flexsystem-list__text { box-sizing: border-box; padding: 6px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.flexsystem-list__empty { padding: 12px; color: var(--flex-ink); }
.flexsystem-list__host.flexsystem { background: transparent; }
/* 仅去掉单元格内组件的外框；内容层的悬停填充和键盘焦点提示继续保留。 */
.flexsystem-list__host > .flexsystem-surface > .flexsystem-component {
    border: 0; border-radius: 0; padding: 0; box-shadow: none; outline: none;
}
.flexsystem-list__host > .flexsystem-surface > .flexsystem-component::before,
.flexsystem-list__host > .flexsystem-surface > .flexsystem-component > .flexsystem-group-border { display: none; }
.flexsystem-list__header[hidden], .flexsystem-list__empty[hidden] { display: none; }
@media (forced-colors: active) {
    .flexsystem-list__heading, .flexsystem-list__cell { outline: 1px solid CanvasText; outline-offset: -1px; }
}

/* 图片选择器的业务布局只作用于 content 内部，外壳仍由网格控制。 */
.flexsystem-component > .flexsystem-image-picker {
    display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow: auto;
}
.flexsystem-image-picker__preview {
    display: grid; place-items: center; flex: 1 1 auto; min-height: 64px; overflow: hidden;
    background: color-mix(in srgb, var(--flex-paper) 90%, var(--flex-ink));
    border: 1px dashed var(--flex-line); border-radius: 2px; position: relative;
}
.flexsystem-image-picker__preview > span { font: inherit; font-size: 12px; padding: 8px; text-align: center; }
.flexsystem-image-picker__list {
    position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(84px, 100%), 1fr));
    align-content: start; gap: 6px; padding: 5px; margin: 0; list-style: none; overflow: auto;
}
.flexsystem-image-picker__item { position: relative; min-width: 0; border: 1px solid var(--flex-line); background: var(--flex-paper); }
.flexsystem-image-picker__open {
    display: block; width: 100%; height: 76px; min-width: 0; min-height: 0; padding: 0;
    border: 0; background: transparent; cursor: zoom-in; overflow: hidden;
}
.flexsystem-image-picker__open > img { display: block; width: 100%; height: 100%; }
.flexsystem-image-picker__open:focus-visible { outline: 2px solid var(--flex-ink); outline-offset: -2px; }
.flexsystem-image-picker__caption { display: block; padding: 2px 4px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flexsystem-component > .flexsystem-image-picker--single { overflow: hidden; }
.flexsystem-image-picker--single .flexsystem-image-picker__preview { min-height: 0; }
.flexsystem-image-picker__list--single {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    align-content: stretch; padding: 0; overflow: hidden;
}
.flexsystem-image-picker__list--single .flexsystem-image-picker__item {
    display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 0; min-height: 0; overflow: hidden;
}
.flexsystem-image-picker__list--single img { height: 100%; min-height: 0; min-width: 0; object-position: center; }
.flexsystem-image-picker__list--single .flexsystem-image-picker__open { height: 100%; }
.flexsystem-image-picker__remove {
    position: absolute; top: 2px; right: 2px; display: grid; place-items: center; min-width: 26px; min-height: 26px;
    width: 26px; height: 26px; padding: 0; font: 18px/1 system-ui, sans-serif; color: var(--flex-ink);
    background: var(--flex-paper); border: 1px solid var(--flex-line); border-radius: 2px; cursor: pointer;
}
.flexsystem-image-picker__remove:disabled { opacity: .5; cursor: default; }
.flexsystem-image-picker__remove:focus-visible { outline: 2px solid var(--flex-ink); outline-offset: -2px; }
.flexsystem-image-picker [hidden] { display: none !important; }
.flexsystem-image-picker__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.flexsystem-image-picker__actions > button {
    flex: 1 0 auto; min-width: 0; min-height: 30px; padding: 4px 8px;
    font: inherit; font-size: 12px; color: inherit; background: var(--flex-paper);
    border: 1px solid var(--flex-line); border-radius: 2px; cursor: pointer;
}
.flexsystem-image-picker__actions > button:hover:not(:disabled) { background: var(--flex-tile); }
.flexsystem-image-picker__actions > button:disabled { opacity: .5; cursor: default; }
.flexsystem-image-picker__actions > button:focus-visible { outline: 2px solid var(--flex-ink); outline-offset: -2px; }
.flexsystem-image-picker__status { margin: 0; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.flexsystem-image-picker[data-state='error'] .flexsystem-image-picker__status { font-weight: 600; }

/* 临时图片预览使用原生 dialog 顶层；关闭或卸载后自动解除页面滚动限制。 */
html:has(.flexsystem-image-viewer[open]) { overflow: hidden; }
.flexsystem-image-viewer {
    position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100%; height: 100dvh;
    max-width: none; max-height: none; margin: 0; padding: 20px; border: 0;
    color: #f5f5f5; background: transparent; overflow: hidden; overscroll-behavior: contain;
    font: 14px/1.5 system-ui, sans-serif; touch-action: none; color-scheme: dark;
}
.flexsystem-image-viewer[open] {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-rows: 44px minmax(0, 1fr) 44px; gap: 12px;
}
.flexsystem-image-viewer::backdrop { background: rgb(8 13 18 / 90%); }
.flexsystem-image-viewer [hidden] { display: none !important; }
.flexsystem-image-viewer__caption {
    grid-column: 1 / 3; grid-row: 1; align-self: center; margin: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.flexsystem-image-viewer__stage { grid-column: 2; grid-row: 2; display: grid; place-items: center; min-width: 0; min-height: 0; }
.flexsystem-image-viewer__stage > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.flexsystem-image-viewer button {
    display: grid; place-items: center; align-self: center; box-sizing: border-box; width: 44px; height: 44px; padding: 0;
    border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; background: rgb(255 255 255 / 8%);
    color: inherit; font: 32px/1 system-ui, sans-serif; cursor: pointer;
}
.flexsystem-image-viewer button:hover { background: rgb(255 255 255 / 20%); }
.flexsystem-image-viewer button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.flexsystem-image-viewer__close { grid-column: 3; grid-row: 1; }
.flexsystem-image-viewer__previous { grid-column: 1; grid-row: 2; }
.flexsystem-image-viewer__next { grid-column: 3; grid-row: 2; }
@media (max-width: 600px) {
    .flexsystem-image-viewer { padding: 12px; }
    .flexsystem-image-viewer__stage { grid-column: 1 / -1; }
    .flexsystem-image-viewer__previous, .flexsystem-image-viewer__next { grid-row: 3; }
}

/* 两层光效都不接收指针事件，按钮、输入框、图片原有交互不受影响。 */
.flexsystem-component::before,
.flexsystem-component::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 180ms ease-out;
}

/* Reveal 边框：遮罩只留下 1px 轮廓，光斑跟随指针并按距边框的距离减弱。 */
.flexsystem-component::before {
    z-index: 2;
    padding: 1px;
    background: radial-gradient(96px circle at var(--flex-pointer-x, -200px) var(--flex-pointer-y, -200px),
        var(--flex-light), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: var(--flex-proximity, 0);
}

/* 微弱的整体提亮加局部光斑，不抬升、不缩放、不添加厚重阴影。 */
.flexsystem-component::after {
    z-index: 1;
    background: radial-gradient(140px circle at var(--flex-pointer-x, 50%) var(--flex-pointer-y, 50%),
        #ffffff1c, transparent), #ffffff0a;
    opacity: 0;
}

.flexsystem-component--hover::after { opacity: 1; }
.flexsystem-component--hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flex-light) 24%, transparent); }

/* 同组只去掉实际共用的边段；用等宽 padding 替代边框，不改变内容盒大小。
   遮罩同时约束静态轮廓和 Reveal，避免悬停时接缝再次亮起。 */
.flexsystem-component--merged {
    border-color: transparent;
    border-width: 0;
    padding: 1px;
    border-radius: 0;
    box-shadow: none;
    transition-property: background-color, color, opacity, box-shadow;
}
.flexsystem-group-border,
.flexsystem-component--merged::before {
    position: absolute;
    inset: 0;
    padding: 0;
    pointer-events: none;
    -webkit-mask: var(--flex-group-mask) 0 0 / 100% 100% no-repeat;
    mask: var(--flex-group-mask) 0 0 / 100% 100% no-repeat;
}
.flexsystem-group-border { z-index: 2; background: var(--flex-line); }
.flexsystem-component--merged.flexsystem-component--hover > .flexsystem-group-border {
    background: color-mix(in srgb, var(--flex-line), var(--flex-light) 24%);
}
.flexsystem-component:focus-within {
    outline: 2px solid var(--flex-ink);
    outline-offset: -2px;
}
.flexsystem-component > .flexsystem-content:focus-visible { outline: 2px solid var(--flex-ink); outline-offset: -3px; }

/* 列表只在自身获得键盘焦点时描边，画在不滚动的外壳上，避免双层描边与裁切。 */
.flexsystem-component.flexsystem-list-tile:focus-within,
.flexsystem-component > .flexsystem-list:focus-visible { outline: none; }
.flexsystem-component.flexsystem-list-tile:has(> .flexsystem-list:focus-visible)::after {
    z-index: 4;
    box-sizing: border-box;
    border: 2px solid var(--flex-ink);
    background: none;
    opacity: 1;
}

/* 编辑模式使用 Pointer Events，统一鼠标、触控笔和触摸拖放；关闭后恢复原生操作。 */
.flexsystem--editable > .flexsystem-surface > .flexsystem-component,
.flexsystem--editable > .flexsystem-surface > .flexsystem-component * {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.flexsystem-component--dragging { opacity: .38; }
.flexsystem--editable > .flexsystem-surface > .flexsystem-component--dragging,
.flexsystem--editable > .flexsystem-surface > .flexsystem-component--dragging * { cursor: grabbing; }
.flexsystem-drop-preview {
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    border: 2px dashed var(--flex-ink);
    border-radius: 2px;
    background: color-mix(in srgb, var(--flex-ink) 10%, transparent);
    pointer-events: none;
    overflow: hidden;
    transition: left 110ms ease-out, top 110ms ease-out, opacity 160ms ease;
    animation: flexsystem-preview-pulse 1400ms ease-in-out infinite;
}
.flexsystem-drop-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--flex-light) 42%, transparent), transparent 80%);
    pointer-events: none;
    animation: flexsystem-preview-sweep 1800ms ease-in-out infinite;
}
.flexsystem-drop-preview--outside { opacity: .25; }

@keyframes flexsystem-preview-pulse {
    0%, 100% { box-shadow: inset 0 0 12px transparent; }
    50% { box-shadow: inset 0 0 18px color-mix(in srgb, var(--flex-light) 40%, transparent); }
}
@keyframes flexsystem-preview-sweep {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .flexsystem-switch__track,
    .flexsystem-switch__track::before { transition: none; }
    .flexsystem,
    .flexsystem-component,
    .flexsystem-component::before,
    .flexsystem-component::after,
    .flexsystem-drop-preview,
    .flexsystem-drop-preview::after { transition: none; animation: none; }
}

@media (forced-colors: active) {
    .flexsystem-switch__track { forced-color-adjust: none; border-color: ButtonText; background: Canvas; }
    .flexsystem-switch__track::before { background: ButtonText; }
    .flexsystem-switch[aria-checked='true'] .flexsystem-switch__track { background: Highlight; }
    .flexsystem-switch[aria-checked='true'] .flexsystem-switch__track::before { background: HighlightText; }
    .flexsystem-switch:disabled .flexsystem-switch__track { border-color: GrayText; }
    .flexsystem-drop-preview { border-color: Highlight; }
    .flexsystem-component { border-color: CanvasText; }
    .flexsystem-component--hover { border-color: Highlight; }
    .flexsystem-component--merged { border-color: transparent; }
    .flexsystem-group-border { background: CanvasText; forced-color-adjust: none; }
    .flexsystem-component--merged.flexsystem-component--hover > .flexsystem-group-border { background: Highlight; }
    .flexsystem-component:focus-within { outline-color: Highlight; }
    .flexsystem-component.flexsystem-list-tile:has(> .flexsystem-list:focus-visible)::after {
        display: block;
        border-color: Highlight;
    }
    .flexsystem-component::before,
    .flexsystem-component::after,
    .flexsystem-drop-preview::after { display: none; }
}
/* 组合容器：标题栏占一格，内部网格不被外壳边框扣掉两个像素。 */
.flexsystem-container-tile { border: 0; box-shadow: inset 0 0 0 1px var(--flex-line); }
.flexsystem-component > .flexsystem-container { padding: 0; display: flex; flex-direction: column; }
.flexsystem-container__heading {
    flex: 0 0 40px; min-width: 0; height: 40px; box-sizing: border-box; margin: 0; padding: 0 10px;
    display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font: inherit; font-weight: 600; line-height: 40px; color: var(--flex-ink);
    box-shadow: inset 0 -1px var(--flex-line);
}
.flexsystem-container__heading[hidden] { display: none; }
.flexsystem-container__body, .flexsystem-tabs__pages { flex: 1 1 0; min-width: 0; min-height: 0; width: 100%; }
.flexsystem-tabs__pages { position: relative; }
.flexsystem-tabs__page { position: absolute; inset: 0; width: 100%; height: 100%; }
.flexsystem-tabs__page[hidden] { display: none; }
.flexsystem-tabs__bar {
    display: flex; flex: 0 0 40px; min-width: 0; overflow: auto hidden; box-sizing: border-box;
    box-shadow: inset 0 -1px var(--flex-line);
}
.flexsystem-tabs__tab, .flexsystem-dialog__trigger, .flexsystem-dialog__close {
    border: 0; border-radius: 0; margin: 0; background: transparent; color: var(--flex-ink); font: inherit; cursor: pointer;
}
.flexsystem-tabs__tab { flex: 0 0 auto; min-width: 80px; min-height: 0; padding: 0 10px; white-space: nowrap; }
.flexsystem-tabs__tab[aria-selected='true'] { background: var(--flex-tile); box-shadow: inset 0 -2px var(--flex-ink); }
.flexsystem-tabs__tab:hover:not(:disabled), .flexsystem-dialog__close:hover, .flexsystem-dialog__trigger:hover:not(:disabled) { background: var(--flex-tile); }
.flexsystem-tabs__tab:disabled, .flexsystem-dialog__trigger:disabled { opacity: .5; cursor: not-allowed; }
.flexsystem-tabs__tab:focus-visible, .flexsystem-tabs__page:focus-visible,
.flexsystem-dialog__trigger:focus-visible, .flexsystem-dialog__close:focus-visible { outline: 2px solid var(--flex-ink); outline-offset: -3px; }
.flexsystem-tabs__empty { position: absolute; inset: 40px 0 0; margin: 0; padding: 12px; font: inherit; overflow: auto; }
.flexsystem-tabs__empty[hidden] { display: none; }
.flexsystem-component > .flexsystem-dialog-trigger { padding: 0; }
.flexsystem-dialog__trigger { width: 100%; height: 100%; padding: 6px; overflow: hidden; text-overflow: ellipsis; }
html:has(.flexsystem-dialog[open]) { overflow: hidden; }
.flexsystem-dialog {
    position: fixed; inset: 0; margin: auto; padding: 0; border: 0; border-radius: 2px; box-sizing: border-box;
    max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: hidden;
    background: var(--flex-paper); color: var(--flex-ink); font: inherit;
    box-shadow: 0 12px 48px #0005, inset 0 0 0 1px var(--flex-line);
}
.flexsystem-dialog[open] { display: flex; flex-direction: column; }
.flexsystem-dialog::backdrop { background: #0006; }
.flexsystem-dialog__header { display: flex; flex: 0 0 40px; min-width: 0; box-shadow: inset 0 -1px var(--flex-line); }
.flexsystem-dialog__header .flexsystem-container__heading { flex: 1 1 0; box-shadow: none; }
.flexsystem-dialog__close { flex: 0 0 40px; height: 40px; font-size: 24px; line-height: 1; }
.flexsystem-list__host > .flexsystem-surface > .flexsystem-container-tile { box-shadow: none; }
@media (forced-colors: active) {
    .flexsystem-container-tile, .flexsystem-dialog { outline: 1px solid CanvasText; outline-offset: -1px; }
    .flexsystem-tabs__tab[aria-selected='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
}