/* ==========================================================================
   Wologic 控制面设计令牌
   - 所有组件颜色只允许引用本区块定义的 --wcp-* 语义变量
   - 主题：azure（默认，蔚蓝）/ graphite（石墨）/ paper（暖纸）
   - 明暗：根元素 data-wcp-mode="dark" 切换深色变体
   ========================================================================== */

:root,
[data-wcp-theme="azure"] {
    color-scheme: light;
    --wcp-bg: #f4f6f9;
    --wcp-surface: #ffffff;
    --wcp-surface-2: #f9fafc;
    --wcp-surface-3: #edf0f5;
    --wcp-text: #1c2330;
    --wcp-text-2: #4e5a6e;
    --wcp-text-3: #98a2b3;
    --wcp-line: rgba(28, 35, 48, 0.08);
    --wcp-line-strong: rgba(28, 35, 48, 0.28);
    --wcp-accent: #2563eb;
    --wcp-accent-hover: #1d4ed8;
    --wcp-accent-soft: #eaf1fe;
    --wcp-on-accent: #ffffff;
    --wcp-focus: rgba(37, 99, 235, 0.16);
    --wcp-success: #157a4e;
    --wcp-success-soft: #e7f6ee;
    --wcp-danger: #dc2626;
    --wcp-danger-hover: #b91c1c;
    --wcp-danger-soft: #fef2f2;
    --wcp-warning: #b45309;
    --wcp-warning-soft: #fdf3e3;
    --wcp-shadow-card: 0 1px 2px rgba(28, 35, 48, 0.04), 0 8px 24px -12px rgba(28, 35, 48, 0.10);
    --wcp-shadow-pop: 0 16px 36px rgba(15, 23, 42, 0.16);
    --wcp-shadow-modal: 0 28px 64px rgba(15, 23, 42, 0.28), 0 8px 24px rgba(15, 23, 42, 0.14);
    --wcp-shadow-sticky: -8px 0 14px -14px rgba(36, 54, 79, 0.38);
    --wcp-mask: rgba(8, 12, 24, 0.56);
    --wcp-busy-mask: rgba(245, 248, 252, 0.58);
    --wcp-shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.08);
    --wcp-on-danger: #ffffff;
    --wcp-radius-sm: 8px;
    --wcp-radius-md: 10px;
    --wcp-radius-lg: 14px;
}

[data-wcp-theme="graphite"] {
    color-scheme: light;
    --wcp-bg: #f5f5f6;
    --wcp-surface: #ffffff;
    --wcp-surface-2: #fafafa;
    --wcp-surface-3: #f1f1f3;
    --wcp-text: #18181b;
    --wcp-text-2: #52525b;
    --wcp-text-3: #a1a1aa;
    --wcp-line: rgba(24, 24, 27, 0.08);
    --wcp-line-strong: rgba(24, 24, 27, 0.28);
    --wcp-accent: #18181b;
    --wcp-accent-hover: #3f3f46;
    --wcp-accent-soft: #ececef;
    --wcp-on-accent: #ffffff;
    --wcp-focus: rgba(24, 24, 27, 0.16);
    --wcp-success: #157a4e;
    --wcp-success-soft: #e7f6ee;
    --wcp-danger: #dc2626;
    --wcp-danger-hover: #b91c1c;
    --wcp-danger-soft: #fef2f2;
    --wcp-warning: #b45309;
    --wcp-warning-soft: #fdf3e3;
    --wcp-shadow-card: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px -12px rgba(24, 24, 27, 0.10);
    --wcp-shadow-pop: 0 16px 36px rgba(15, 15, 18, 0.16);
    --wcp-shadow-modal: 0 28px 64px rgba(15, 15, 18, 0.28), 0 8px 24px rgba(15, 15, 18, 0.14);
    --wcp-shadow-sticky: -8px 0 14px -14px rgba(24, 24, 27, 0.38);
    --wcp-mask: rgba(9, 9, 11, 0.56);
    --wcp-busy-mask: rgba(245, 245, 246, 0.58);
    --wcp-shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.08);
    --wcp-on-danger: #ffffff;
    --wcp-radius-sm: 8px;
    --wcp-radius-md: 10px;
    --wcp-radius-lg: 14px;
}

[data-wcp-theme="paper"] {
    color-scheme: light;
    --wcp-bg: #f6f3ed;
    --wcp-surface: #fffefb;
    --wcp-surface-2: #faf7f1;
    --wcp-surface-3: #f0ebe1;
    --wcp-text: #292524;
    --wcp-text-2: #57534e;
    --wcp-text-3: #a8a29e;
    --wcp-line: rgba(60, 52, 44, 0.10);
    --wcp-line-strong: rgba(60, 52, 44, 0.30);
    --wcp-accent: #1b5e4b;
    --wcp-accent-hover: #154a3b;
    --wcp-accent-soft: #e2eee7;
    --wcp-on-accent: #fbfaf7;
    --wcp-focus: rgba(27, 94, 75, 0.18);
    --wcp-success: #1b5e4b;
    --wcp-success-soft: #e2eee7;
    --wcp-danger: #c23333;
    --wcp-danger-hover: #9c2828;
    --wcp-danger-soft: #fbecec;
    --wcp-warning: #92600e;
    --wcp-warning-soft: #f8efdc;
    --wcp-shadow-card: 0 1px 2px rgba(70, 60, 45, 0.05), 0 8px 24px -12px rgba(70, 60, 45, 0.12);
    --wcp-shadow-pop: 0 16px 36px rgba(45, 38, 28, 0.18);
    --wcp-shadow-modal: 0 28px 64px rgba(45, 38, 28, 0.30), 0 8px 24px rgba(45, 38, 28, 0.16);
    --wcp-shadow-sticky: -8px 0 14px -14px rgba(70, 60, 45, 0.38);
    --wcp-mask: rgba(24, 20, 14, 0.56);
    --wcp-busy-mask: rgba(246, 243, 237, 0.58);
    --wcp-shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.08);
    --wcp-on-danger: #ffffff;
    --wcp-radius-sm: 8px;
    --wcp-radius-md: 10px;
    --wcp-radius-lg: 14px;
}

[data-wcp-mode="dark"],
[data-wcp-theme="azure"][data-wcp-mode="dark"] {
    color-scheme: dark;
    --wcp-bg: #0d1320;
    --wcp-surface: #151d2e;
    --wcp-surface-2: #1b2538;
    --wcp-surface-3: #242f47;
    --wcp-text: #e7eaf1;
    --wcp-text-2: #9ba6bd;
    --wcp-text-3: #68738e;
    --wcp-line: rgba(151, 163, 190, 0.13);
    --wcp-line-strong: rgba(151, 163, 190, 0.35);
    --wcp-accent: #3b82f6;
    --wcp-accent-hover: #60a5fa;
    --wcp-accent-soft: rgba(59, 130, 246, 0.18);
    --wcp-on-accent: #ffffff;
    --wcp-focus: rgba(96, 165, 250, 0.25);
    --wcp-success: #4ade80;
    --wcp-success-soft: rgba(74, 222, 128, 0.14);
    --wcp-danger: #f87171;
    --wcp-danger-hover: #fca5a5;
    --wcp-danger-soft: rgba(248, 113, 113, 0.14);
    --wcp-warning: #fbbf24;
    --wcp-warning-soft: rgba(251, 191, 36, 0.14);
    --wcp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.45);
    --wcp-shadow-pop: 0 16px 36px rgba(0, 0, 0, 0.50);
    --wcp-shadow-modal: 0 28px 64px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.40);
    --wcp-shadow-sticky: -8px 0 14px -14px rgba(0, 0, 0, 0.60);
    --wcp-mask: rgba(2, 6, 16, 0.62);
    --wcp-busy-mask: rgba(13, 19, 32, 0.58);
    --wcp-shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.40);
    --wcp-on-danger: #450a0a;
    --wcp-radius-sm: 8px;
    --wcp-radius-md: 10px;
    --wcp-radius-lg: 14px;
}

[data-wcp-theme="graphite"][data-wcp-mode="dark"] {
    color-scheme: dark;
    --wcp-bg: #0e0e11;
    --wcp-surface: #16161a;
    --wcp-surface-2: #1c1c21;
    --wcp-surface-3: #26262c;
    --wcp-text: #f4f4f5;
    --wcp-text-2: #a1a1aa;
    --wcp-text-3: #71717a;
    --wcp-line: rgba(244, 244, 245, 0.08);
    --wcp-line-strong: rgba(244, 244, 245, 0.32);
    --wcp-accent: #3f3f46;
    --wcp-accent-hover: #52525b;
    --wcp-accent-soft: rgba(255, 255, 255, 0.08);
    --wcp-on-accent: #fafafa;
    --wcp-focus: rgba(255, 255, 255, 0.20);
    --wcp-success: #4ade80;
    --wcp-success-soft: rgba(74, 222, 128, 0.14);
    --wcp-danger: #f87171;
    --wcp-danger-hover: #fca5a5;
    --wcp-danger-soft: rgba(248, 113, 113, 0.14);
    --wcp-warning: #fbbf24;
    --wcp-warning-soft: rgba(251, 191, 36, 0.14);
    --wcp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.45);
    --wcp-shadow-pop: 0 16px 36px rgba(0, 0, 0, 0.50);
    --wcp-shadow-modal: 0 28px 64px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.40);
    --wcp-shadow-sticky: -8px 0 14px -14px rgba(0, 0, 0, 0.60);
    --wcp-mask: rgba(0, 0, 0, 0.62);
    --wcp-busy-mask: rgba(14, 14, 17, 0.58);
    --wcp-shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.40);
    --wcp-on-danger: #450a0a;
    --wcp-radius-sm: 8px;
    --wcp-radius-md: 10px;
    --wcp-radius-lg: 14px;
}

[data-wcp-theme="paper"][data-wcp-mode="dark"] {
    color-scheme: dark;
    --wcp-bg: #16130f;
    --wcp-surface: #1f1b16;
    --wcp-surface-2: #26211b;
    --wcp-surface-3: #322b23;
    --wcp-text: #efe9e0;
    --wcp-text-2: #b5ac9f;
    --wcp-text-3: #7d7568;
    --wcp-line: rgba(235, 225, 210, 0.10);
    --wcp-line-strong: rgba(235, 225, 210, 0.32);
    --wcp-accent: #4ca987;
    --wcp-accent-hover: #68c1a0;
    --wcp-accent-soft: rgba(76, 169, 135, 0.16);
    --wcp-on-accent: #0c1b15;
    --wcp-focus: rgba(104, 193, 160, 0.25);
    --wcp-success: #5fc79b;
    --wcp-success-soft: rgba(95, 199, 155, 0.14);
    --wcp-danger: #f87171;
    --wcp-danger-hover: #fca5a5;
    --wcp-danger-soft: rgba(248, 113, 113, 0.14);
    --wcp-warning: #fbbf24;
    --wcp-warning-soft: rgba(251, 191, 36, 0.14);
    --wcp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.45);
    --wcp-shadow-pop: 0 16px 36px rgba(0, 0, 0, 0.50);
    --wcp-shadow-modal: 0 28px 64px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.40);
    --wcp-shadow-sticky: -8px 0 14px -14px rgba(0, 0, 0, 0.60);
    --wcp-mask: rgba(0, 0, 0, 0.62);
    --wcp-busy-mask: rgba(22, 19, 15, 0.58);
    --wcp-shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.40);
    --wcp-on-danger: #450a0a;
    --wcp-radius-sm: 8px;
    --wcp-radius-md: 10px;
    --wcp-radius-lg: 14px;
}

.wcp-page {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.wcp-business-page {
    position: relative;
}

.wcp-business-page--busy {
    min-height: 220px;
}

.wcp-business-page__busy {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--wcp-busy-mask);
    backdrop-filter: blur(2px);
}

.wcp-business-page__busy-panel {
    min-width: min(280px, 100%);
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 18px 20px;
    border-radius: var(--wcp-radius-lg);
    color: var(--wcp-text-2);
    background: var(--wcp-surface);
    box-shadow: var(--wcp-shadow-pop);
    text-align: center;
}

.wcp-business-page__busy-panel strong {
    color: var(--wcp-text);
    font-size: 15px;
}

.wcp-business-page__busy-panel span {
    color: var(--wcp-text-2);
    font-size: 13px;
}

.wcp-business-page__busy-spinner,
.wcp-loading-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid var(--wcp-accent-soft);
    border-top-color: var(--wcp-accent);
    border-radius: 999px;
    animation: wcp-spin 0.82s linear infinite;
}

.wcp-page-top {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.wcp-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.wcp-page-header-toolbar-only {
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    margin-bottom: 0;
    padding: 8px 10px;
    border-radius: var(--wcp-radius-lg);
    background: var(--wcp-surface);
    box-shadow: var(--wcp-shadow-card);
}

.wcp-page-head-main {
    min-width: 0;
}

.wcp-page-head-main h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--wcp-text);
}

.wcp-page-head-main p {
    margin: 6px 0 0;
    color: var(--wcp-text-2);
    font-size: 13px;
}

.wcp-page-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
}

.wcp-page-toolbar-in-filter {
    display: inline-flex;
}

.wcp-card {
    background: var(--wcp-surface);
    border-radius: var(--wcp-radius-lg);
    padding: 12px 14px;
}

.wcp-filter-card,
.wcp-content-card {
    box-shadow: var(--wcp-shadow-card);
}

.wcp-content-card {
    overflow: hidden;
    min-width: 0;
}

.wcp-filter-panel {
    display: grid;
    gap: 6px;
}

.wcp-filter-title {
    display: none;
}

.wcp-filter-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.wcp-filter-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 8px;
}

.wcp-filter-main {
    min-width: 0;
    flex: 1 1 720px;
    display: grid;
    gap: 6px;
}

.wcp-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 320px));
    justify-content: start;
    gap: 6px 8px;
}

.wcp-filter-meta {
    display: flex;
    justify-content: flex-start;
}

.wcp-filter-item {
    display: flex;
    align-items: center;
    min-width: 0;
}

.wcp-filter-item label {
    margin: 0;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--wcp-text-2);
    white-space: nowrap;
}

.wcp-filter-item label::after {
    content: "：";
}

.wcp-filter-item > input,
.wcp-filter-item > select,
.wcp-filter-item > textarea,
.wcp-filter-item > .wcp-select {
    flex: 1 1 auto;
    min-width: 0;
}

.wcp-filter-item-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.wcp-filter-item input,
.wcp-filter-item select,
.wcp-filter-item textarea {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-sm);
    padding: 7px 11px;
    font-size: 13px;
    color: var(--wcp-text);
    background: var(--wcp-surface-3);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.wcp-filter-item input::placeholder,
.wcp-filter-item textarea::placeholder {
    color: var(--wcp-text-3);
}

.wcp-filter-item select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--wcp-surface-3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='10' height='10' fill='%2364748b'%3E%3Cpath d='M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    padding-right: 30px;
    cursor: pointer;
}

.wcp-filter-item input:hover,
.wcp-filter-item select:hover,
.wcp-filter-item textarea:hover {
    background: var(--wcp-surface-2);
    border-color: var(--wcp-text-3);
}

.wcp-filter-item input:focus,
.wcp-filter-item select:focus,
.wcp-filter-item textarea:focus {
    outline: none;
    background: var(--wcp-surface);
    border-color: var(--wcp-accent);
    box-shadow: 0 0 0 3px var(--wcp-focus);
}

.wcp-btn {
    border: 0;
    background: var(--wcp-accent);
    color: var(--wcp-on-accent);
    border-radius: var(--wcp-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
    box-shadow: var(--wcp-shadow-btn);
    text-decoration: none;
    white-space: nowrap;
}

.wcp-btn:hover {
    background: var(--wcp-accent-hover);
}

.wcp-btn:active {
    transform: scale(0.98);
}

.wcp-btn:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.wcp-btn-primary {
    background: var(--wcp-accent);
    color: var(--wcp-on-accent);
}

.wcp-btn-primary:hover {
    background: var(--wcp-accent-hover);
}

.wcp-btn-secondary {
    background: var(--wcp-surface-3);
    color: var(--wcp-text);
    box-shadow: none;
}

.wcp-btn-secondary:hover {
    background: var(--wcp-line);
}

.wcp-btn-mini {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

.wcp-link {
    border: 0;
    padding: 0;
    color: var(--wcp-accent);
    background: transparent;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.wcp-link:hover {
    color: var(--wcp-accent-hover);
    text-decoration: underline;
}

.wcp-btn-danger {
    background: var(--wcp-danger);
    color: var(--wcp-on-danger);
}

.wcp-btn-danger:hover {
    background: var(--wcp-danger-hover);
}

.wcp-table-wrap {
    width: 100%;
    min-width: 0;
    overflow: auto;
    border-radius: var(--wcp-radius-lg);
    background: var(--wcp-surface);
}

/* 列表页高度链：页面锁定视口，表格区内部滚动，分页与页脚始终可见。 */
.wcp-page:has(.wcp-table-wrap) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.wcp-content-card:has(.wcp-table-wrap) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* 表格区：数据少时 flex 撑满剩余空间（分页沉底），数据多时 clamp 封顶并内部滚动。 */
.wcp-content-card:has(.wcp-table-wrap) > .wcp-table-wrap,
.wcp-table-wrap {
    max-height: clamp(440px, calc(100vh - 260px), 660px);
}

.wcp-content-card:has(.wcp-table-wrap) > .wcp-table-wrap {
    flex: 1 1 0;
    height: 0;
    min-height: 0;
}

@media (min-height: 980px) {
    .wcp-content-card:has(.wcp-table-wrap) > .wcp-table-wrap,
    .wcp-table-wrap {
        max-height: clamp(500px, calc(100vh - 340px), 760px);
    }
}

.wcp-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    color: var(--wcp-text);
    font-size: 13px;
}

.wcp-table th,
.wcp-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--wcp-line);
    text-align: left;
    vertical-align: middle;
}

.wcp-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--wcp-surface);
    color: var(--wcp-text-3);
    font-size: 12px;
    font-weight: 500;
}

/* 普通列表默认保持单行，避免长 URL、错误消息或编码撑高行并遮挡相邻内容。 */
.wcp-table th:not(.wcp-actions-column),
.wcp-table td:not(.wcp-actions-cell) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 只有列定义明确声明 Wrap 时才允许行高随内容增长。 */
.wcp-table th.wcp-table-cell-wrap:not(.wcp-actions-column),
.wcp-table td.wcp-table-cell-wrap:not(.wcp-actions-cell),
.wcp-table th[data-overflow-mode="wrap"]:not(.wcp-actions-column),
.wcp-table td[data-overflow-mode="wrap"]:not(.wcp-actions-cell) {
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.wcp-table tbody tr:hover {
    background: var(--wcp-surface-2);
}

.wcp-table tbody tr[class*="is-selected"] {
    background: var(--wcp-accent-soft);
}

.wcp-table tbody tr:last-child td {
    border-bottom: 0;
}

.wcp-table-empty {
    color: var(--wcp-text-3);
    text-align: center;
}

.wcp-table-select-cell {
    width: 42px;
    text-align: center;
}

.wcp-table-select-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 表格复选框统一为圆角自定义样式，避免浏览器原生外观跳戏。 */
.wcp-table input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1.5px solid var(--wcp-line-strong);
    border-radius: 4px;
    background: var(--wcp-surface);
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.wcp-table input[type="checkbox"]:checked {
    border-color: var(--wcp-accent);
    background-color: var(--wcp-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 10px;
    background-repeat: no-repeat;
}

.wcp-table input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--wcp-focus);
}

.wcp-actions-cell {
    position: sticky;
    right: 0;
    z-index: 3;
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    white-space: nowrap;
    overflow: visible;
    text-align: center;
    background: var(--wcp-surface);
    box-shadow: var(--wcp-shadow-sticky);
}

.wcp-table th.wcp-actions-column {
    position: sticky;
    right: 0;
    z-index: 6;
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    overflow: visible;
    text-align: center;
    background: var(--wcp-surface);
    box-shadow: var(--wcp-shadow-sticky);
}

.wcp-table tbody tr:hover .wcp-actions-cell {
    background: var(--wcp-surface-2);
}

.wcp-table tbody tr[class*="is-selected"] .wcp-actions-cell {
    background: var(--wcp-accent-soft);
}

.wcp-table th[class*="wcp-table-resizable"] {
    position: sticky;
    user-select: none;
}

.wcp-table-resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    z-index: 3;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

.wcp-table th[class*="wcp-table-resizable"]::after {
    content: "";
    position: absolute;
    top: 20%;
    right: 0;
    width: 1px;
    height: 60%;
    background: var(--wcp-line);
    opacity: 0.85;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.wcp-table th[class*="wcp-table-resizable"]:hover::after,
.wcp-table th[class*="wcp-table-resizing"]::after {
    background: var(--wcp-accent);
    opacity: 1;
}

body[class*="wcp-table-resizing"],
body[class*="wcp-table-resizing"] * {
    cursor: col-resize !important;
}

.wcp-table-wrap[class*="wcp-table-wrap-minor-overflow"] {
    overflow-x: hidden;
}

.wcp-action-menu-item {
    min-height: 30px;
    border: 0;
    border-radius: 6px;
    padding: 6px 9px;
    color: var(--wcp-text-2);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.wcp-action-menu-item:hover {
    background: var(--wcp-surface-3);
    color: var(--wcp-text);
}

.wcp-action-menu-item[class*="is-danger"] {
    color: var(--wcp-danger);
}

.wcp-action-menu-item[class*="is-danger"]:hover {
    background: var(--wcp-danger-soft);
    color: var(--wcp-danger-hover);
}

.wcp-action-menu-item[class*="is-disabled"],
.wcp-action-menu-item:disabled {
    color: var(--wcp-text-3);
    cursor: not-allowed;
}

.wcp-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 8px;
    color: var(--wcp-accent);
    background: var(--wcp-accent-soft);
    font-size: 12px;
    font-weight: 500;
}

/* 统一文件选择器：隐藏原生 input，按钮加文件名文本。 */
.wcp-file-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wcp-file-picker__input {
    display: none;
}

.wcp-file-picker__trigger {
    cursor: pointer;
    user-select: none;
}

.wcp-file-picker__text {
    max-width: 220px;
    overflow: hidden;
    color: var(--wcp-text-2);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wcp-file-picker.is-disabled {
    opacity: 0.62;
}

.wcp-file-picker.is-disabled .wcp-file-picker__trigger {
    cursor: not-allowed;
    pointer-events: none;
}

/* 状态徽章：列表“系统/启用”等状态列统一使用，带状态点。 */
.wcp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    border-radius: 999px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.wcp-badge::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.75;
}

.wcp-badge-neutral {
    color: var(--wcp-text-2);
    background: var(--wcp-surface-3);
}

.wcp-badge-success {
    color: var(--wcp-success);
    background: var(--wcp-success-soft);
}

.wcp-badge-danger {
    color: var(--wcp-danger);
    background: var(--wcp-danger-soft);
}

.wcp-badge-warning {
    color: var(--wcp-warning);
    background: var(--wcp-warning-soft);
}

.wcp-badge-accent {
    color: var(--wcp-accent);
    background: var(--wcp-accent-soft);
}

/* 时间、数量等数字列对齐工具类。 */
.wcp-nums {
    font-variant-numeric: tabular-nums;
}

.wcp-tree-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.wcp-menu-icon-cell {
    width: 48px;
    min-width: 48px;
    text-align: center;
}

.wcp-menu-icon-preview {
    display: block;
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    margin: 0 auto;
    object-fit: contain;
}

.wcp-menu-icon-preview-lg {
    display: block;
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
    margin: 0 auto;
    object-fit: contain;
}

.wcp-menu-icon-font {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--wcp-text);
    font-size: 18px !important;
    line-height: 1;
    vertical-align: middle;
}

/* 菜单字段较多时按内容保留可读列宽，由表格容器承接窄屏横向滚动。 */
.wcp-menu-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.wcp-menu-table th,
.wcp-menu-table td {
    white-space: nowrap;
}

.wcp-menu-table th:not(.wcp-actions-column),
.wcp-menu-table td:not(.wcp-actions-cell) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.wcp-menu-icon-column,
.wcp-menu-table .wcp-menu-icon-cell {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    padding-inline: 0;
    text-align: center;
}

.wcp-menu-table .wcp-menu-icon-cell > * {
    margin-inline: auto;
}

.wcp-menu-table .wcp-menu-icon-font {
    display: flex;
}

.wcp-menu-icon-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    max-width: 72px;
    height: 20px;
    padding: 0 4px;
    overflow: hidden;
    border: 1px solid var(--wcp-line);
    border-radius: 4px;
    color: var(--wcp-text-2);
    background: var(--wcp-surface-2);
    font-size: 11px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wcp-menu-icon-empty {
    color: var(--wcp-text-3);
    font-size: 12px;
}

.wcp-menu-icon-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 94px;
    gap: 10px;
    align-items: center;
}

.wcp-menu-icon-inline-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wcp-menu-icon-selection-chip {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    min-height: 34px;
    padding: 0 12px;
    overflow: hidden;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-sm);
    color: var(--wcp-text-2);
    background: var(--wcp-surface-2);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wcp-menu-icon-selection-chip[class*="is-empty"] {
    color: var(--wcp-text-3);
}

.wcp-menu-icon-editor-preview {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.wcp-menu-icon-editor-preview-panel {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-sm);
    background: var(--wcp-surface-2);
    justify-content: center;
}

.wcp-menu-icon-editor-preview-inline {
    width: 94px;
    justify-content: center;
}

.wcp-menu-icon-preview-chip {
    box-shadow: inset 0 0 0 1px var(--wcp-line);
}

.wcp-menu-icon-picker {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-sm);
    padding: 8px;
    background: var(--wcp-surface);
}

.wcp-menu-icon-picker-group + .wcp-menu-icon-picker-group {
    margin-top: 10px;
}

.wcp-menu-icon-picker-title {
    margin-bottom: 6px;
    color: var(--wcp-text-2);
    font-size: 12px;
    line-height: 1;
}

.wcp-menu-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 6px;
}

.wcp-menu-icon-picker-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--wcp-line);
    border-radius: 6px;
    padding: 0;
    background: var(--wcp-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wcp-menu-icon-picker-item:hover {
    border-color: var(--wcp-accent);
    background: var(--wcp-surface-3);
}

.wcp-menu-icon-picker-item[class*="active"] {
    border-color: var(--wcp-accent);
    background: var(--wcp-accent-soft);
    box-shadow: 0 0 0 2px var(--wcp-focus);
}

.wcp-editor-form {
    display: grid;
    gap: 14px;
}

.wcp-form-error {
    padding: 9px 11px;
    border: 1px solid var(--wcp-danger);
    border-radius: var(--wcp-radius-sm);
    color: var(--wcp-danger-hover);
    background: var(--wcp-danger-soft);
    font-size: 13px;
    line-height: 1.45;
}

.wcp-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 12px;
}

.wcp-editor-field,
.wcp-field-block {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.wcp-editor-field-wide {
    grid-column: 1 / -1;
}

.wcp-editor-field-tight {
    max-width: 180px;
}

.wcp-editor-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 240px));
    gap: 10px;
}

.wcp-editor-status-grid-single {
    grid-template-columns: minmax(min(220px, 100%), 280px);
}

.wcp-editor-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-sm);
    padding: 9px 11px;
    background: var(--wcp-surface-2);
}

.wcp-editor-toggle-title {
    color: var(--wcp-text-2);
    font-weight: 500;
}

.wcp-editor-inline-hint,
.wcp-form-help {
    color: var(--wcp-text-2);
    font-size: 12px;
    line-height: 1.45;
}

.wcp-field-required::after {
    content: " *";
    color: var(--wcp-danger);
}

.wcp-field-optional {
    color: var(--wcp-text-3);
}

.wcp-editor-form label,
.wcp-editor-field label {
    color: var(--wcp-text-2);
    font-size: 13px;
    font-weight: 500;
}

.wcp-editor-form input:not([type="checkbox"]):not([type="radio"]),
.wcp-editor-form select,
.wcp-editor-form textarea {
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: var(--wcp-radius-sm);
    padding: 7px 10px;
    color: var(--wcp-text);
    background: var(--wcp-surface-3);
    transition: box-shadow 0.18s ease, background-color 0.18s ease;
}

.wcp-editor-form textarea {
    min-height: 88px;
    resize: vertical;
}

.wcp-editor-form input:focus,
.wcp-editor-form select:focus,
.wcp-editor-form textarea:focus {
    outline: none;
    background: var(--wcp-surface);
    box-shadow: 0 0 0 3px var(--wcp-focus);
}

.wcp-checkbox-cell,
.wcp-checkbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wcp-text-2);
}

.wcp-checkbox-chip {
    border: 1px solid var(--wcp-line);
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--wcp-surface);
}

.wcp-confirm-body {
    display: grid;
    gap: 10px;
}

.wcp-confirm-title {
    color: var(--wcp-text);
    font-weight: 700;
}

.wcp-confirm-target {
    display: flex;
    gap: 8px;
    align-items: baseline;
    color: var(--wcp-text-2);
}

.wcp-confirm-target-label {
    color: var(--wcp-text-3);
}

.wcp-detail-grid {
    display: grid;
    gap: 8px;
}

.wcp-detail-grid-compact {
    gap: 6px;
}

.wcp-detail-row {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--wcp-line);
}

.wcp-detail-label {
    color: var(--wcp-text-2);
    font-weight: 500;
}

.wcp-detail-value {
    min-width: 0;
    color: var(--wcp-text);
    overflow-wrap: anywhere;
}

.wcp-select {
    position: relative;
    min-width: 0;
    width: 100%;
}

.wcp-select-registration {
    display: none;
}

.wcp-select-trigger {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    color: var(--wcp-text);
    background: var(--wcp-surface-3);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.wcp-select-trigger:hover {
    background: var(--wcp-surface-2);
    border-color: var(--wcp-text-3);
}

.wcp-select:focus-visible .wcp-select-trigger,
.wcp-select[class*="is-open"] .wcp-select-trigger {
    outline: none;
    background: var(--wcp-surface);
    border-color: var(--wcp-accent);
    box-shadow: 0 0 0 3px var(--wcp-focus);
}

.wcp-select[class*="is-disabled"] .wcp-select-trigger {
    opacity: 0.62;
    cursor: not-allowed;
    background: var(--wcp-surface-3);
}

.wcp-select-trigger-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.wcp-select-trigger-text[class*="is-placeholder"] {
    color: var(--wcp-text-3);
}

.wcp-select-trigger-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wcp-select-clear-btn {
    border: 0;
    background: transparent;
    padding: 2px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wcp-text-3);
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.wcp-select-clear-btn:hover {
    color: var(--wcp-text);
    background: var(--wcp-surface-2);
}

.wcp-select-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wcp-text-2);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.wcp-select[class*="is-open"] .wcp-select-trigger-icon {
    transform: rotate(180deg);
}

.wcp-select-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    max-height: 280px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-md);
    background: var(--wcp-surface);
    box-shadow: var(--wcp-shadow-pop);
    overflow: hidden;
}

.wcp-select-actions-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--wcp-line);
    background: var(--wcp-surface-2);
}

.wcp-select-action-btn {
    border: 0;
    background: transparent;
    padding: 2px 6px;
    font-size: 12px;
    color: var(--wcp-accent);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.wcp-select-action-btn:hover {
    background: var(--wcp-accent-soft);
}

.wcp-select-options-list {
    padding: 5px;
    display: grid;
    gap: 2px;
    overflow-y: auto;
    max-height: 230px;
}

.wcp-select-option {
    min-height: 32px;
    border: 0;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 13px;
    color: var(--wcp-text);
    background: transparent;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wcp-select-option:hover:not([disabled]) {
    background: var(--wcp-surface-3);
    color: var(--wcp-text);
}

.wcp-select-option[class*="is-selected"] {
    background: var(--wcp-accent-soft);
    color: var(--wcp-accent);
    font-weight: 500;
}

.wcp-select-option[disabled],
.wcp-select-option[class*="is-disabled"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.wcp-select-option-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wcp-select-checkbox {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--wcp-line);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wcp-surface);
    transition: all 0.15s ease;
}

.wcp-select-checkbox[class*="is-checked"] {
    background: var(--wcp-accent);
    border-color: var(--wcp-accent);
    color: var(--wcp-on-accent);
}

.wcp-select-check-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--wcp-accent);
}

.wcp-action-menu {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

table tr:has(.wcp-action-menu[class*="is-open"]) {
    position: relative;
    z-index: 30;
}

table td:has(.wcp-action-menu[class*="is-open"]) {
    z-index: 40 !important;
    overflow: visible;
}

.wcp-action-menu[class*="is-open"] {
    z-index: 120;
}

.wcp-action-menu-trigger {
    position: relative;
    width: auto;
    min-width: 58px;
    border-color: transparent;
    background: transparent;
    color: var(--wcp-text-2);
    box-shadow: none;
}

.wcp-action-menu-trigger:hover,
.wcp-action-menu-trigger:focus-visible,
.wcp-action-menu[class*="is-open"] .wcp-action-menu-trigger {
    background: var(--wcp-surface-3);
    color: var(--wcp-text);
}

.wcp-action-menu-dots {
    display: none;
}

.wcp-action-menu-dots svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.wcp-action-menu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}

.wcp-action-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 130;
    min-width: 128px;
    display: none;
    padding: 6px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-md);
    background: var(--wcp-surface);
    box-shadow: var(--wcp-shadow-pop);
}

.wcp-action-menu-panel[class*="is-open"] {
    display: grid;
    gap: 4px;
}

.wcp-action-menu-panel-up {
    top: auto;
    bottom: calc(100% + 8px);
}

.wcp-action-menu-panel button,
.wcp-action-menu-panel a {
    width: 100%;
    justify-content: flex-start;
}

.wcp-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0 0;
    color: var(--wcp-text-2);
    font-size: 13px;
}

.wcp-pagination-section,
.wcp-pagination-size,
.wcp-pagination-pages,
.wcp-pagination-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.wcp-pagination-section-pages {
    flex: 0 0 auto;
    justify-content: flex-start;
}

.wcp-pagination-section-jump {
    margin-left: auto;
}

.wcp-pagination-size-select,
.wcp-pagination-jump-input {
    min-height: 30px;
    border: 0;
    border-radius: var(--wcp-radius-sm);
    padding: 4px 8px;
    color: var(--wcp-text);
    background: var(--wcp-surface-3);
}

.wcp-pagination-size-select {
    min-width: 70px;
}

.wcp-pagination-jump-input {
    width: 68px;
}

.wcp-pagination-ellipsis {
    padding: 0 4px;
    color: var(--wcp-text-3);
}

.wcp-pagination-page,
.wcp-pagination-nav {
    min-width: 30px;
}

@media (max-width: 720px) {
    .wcp-pagination-section-jump {
        margin-left: 0;
    }
}

.wcp-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--wcp-mask);
    backdrop-filter: blur(8px);
}

.wcp-modal-mask[class*="is-closing"] {
    pointer-events: none;
}

.wcp-modal {
    width: min(760px, 100%);
    max-height: calc(100vh - 44px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-lg);
    background: var(--wcp-surface);
    box-shadow: var(--wcp-shadow-modal);
    overflow: hidden;
    transform-origin: center;
    animation: wcp-modal-in var(--ui-modal-duration, 180ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.wcp-modal[class*="is-closing"] {
    animation: wcp-modal-out var(--ui-modal-duration, 180ms) ease both;
}

.wcp-modal-sm {
    width: min(520px, 100%);
}

.wcp-modal-md {
    width: min(700px, 100%);
}

.wcp-modal-lg {
    width: min(940px, 100%);
}

.wcp-modal-xl {
    width: min(980px, 100%);
}

.wcp-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--wcp-line);
    background: var(--wcp-surface-2);
}

.wcp-modal-header strong {
    font-size: 20px;
    line-height: 1.2;
    color: var(--wcp-text);
}

.wcp-modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-sm);
    background: var(--wcp-surface);
    color: var(--wcp-text-2);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.wcp-modal-close:hover {
    background: var(--wcp-surface-3);
    border-color: var(--wcp-line-strong);
}

.wcp-modal-body {
    padding: 12px 16px 14px;
    overflow: auto;
    scrollbar-gutter: stable;
}

.wcp-modal-loading {
    min-height: 220px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    color: var(--wcp-text-2);
    font-size: 14px;
}

.wcp-modal-lg .wcp-modal-body,
.wcp-modal-xl .wcp-modal-body {
    max-height: calc(100vh - 170px);
}

.wcp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--wcp-line);
    background: var(--wcp-surface-2);
}

.wcp-toast-host {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 1500;
    transform: translateX(-50%);
    pointer-events: none;
}

.wcp-toast {
    min-width: 260px;
    max-width: min(460px, calc(100vw - 44px));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-md);
    background: var(--wcp-surface);
    color: var(--wcp-text);
    box-shadow: var(--wcp-shadow-pop);
    pointer-events: auto;
    animation: wcp-toast-in 0.18s ease-out both;
}

.wcp-toast[class*="is-leaving"] {
    animation: wcp-toast-out 0.24s ease-in both;
}

.wcp-toast-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--wcp-accent);
}

.wcp-toast-success .wcp-toast-dot {
    background: var(--wcp-success);
}

.wcp-toast-warning .wcp-toast-dot {
    background: var(--wcp-warning);
}

.wcp-toast-error .wcp-toast-dot {
    background: var(--wcp-danger);
}

.wcp-toast-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.wcp-empty-state {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px dashed var(--wcp-line-strong);
    border-radius: var(--wcp-radius-md);
    color: var(--wcp-text-2);
    background: var(--wcp-surface-2);
}

.wcp-empty-state__icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--wcp-accent);
    background: var(--wcp-accent-soft);
}

.wcp-empty-state__content {
    min-width: 0;
}

.wcp-empty-state__title {
    font-weight: 600;
    color: var(--wcp-text);
}

.wcp-empty-state__description {
    margin: 0.25rem 0 0;
    color: var(--wcp-text-2);
}

.wcp-empty-state__actions {
    margin-top: 0.75rem;
}

/* ========== Shell 外壳布局（WcpShellLayout） ========== */
.wcp-shell-layout {
    display: grid;
    grid-template-columns: var(--wcp-shell-sidebar-width, 228px) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--wcp-bg);
    color: var(--wcp-text);
}

.wcp-shell-layout__content {
    min-width: 0;
    display: flex;
    padding: 8px 10px 6px;
}

.wcp-shell-layout__inner {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    min-height: calc(100vh - 14px);
}

.wcp-shell-layout__header {
    position: relative;
    z-index: 140;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 9px 5px 12px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-lg);
    background: var(--wcp-surface);
    overflow: visible;
}

.wcp-shell-layout__guide {
    min-width: 0;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wcp-text-2);
    font-size: 13px;
    line-height: 1.1;
}

.wcp-shell-layout__guide-root,
.wcp-shell-layout__guide-current {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wcp-shell-layout__guide-root {
    max-width: 36%;
    color: var(--wcp-text-3);
    font-weight: 600;
}

.wcp-shell-layout__guide-current {
    max-width: 58%;
    color: var(--wcp-text);
    font-size: 14px;
    font-weight: 760;
}

.wcp-shell-layout__guide-sep {
    color: var(--wcp-text-3);
}

/* ShellMenuPanel 的品牌区容器，品牌内容由宿主注入。 */
.wcp-shell-brand {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--wcp-line);
    border-radius: 0;
    background: var(--wcp-surface);
    text-decoration: none;
    color: inherit;
}

.wcp-shell-brand-logo {
    height: auto;
    max-height: 25px;
    width: 60px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
}

.wcp-shell-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wcp-shell-brand-title {
    color: var(--wcp-text);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
    white-space: nowrap;
}

.wcp-shell-brand-subtitle {
    margin-top: 2px;
    color: var(--wcp-text-3);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 1160px) {
    .wcp-shell-layout__header {
        flex-wrap: wrap;
    }
}

@media (max-width: 860px) {
    .wcp-shell-layout {
        grid-template-columns: 1fr;
    }
}

/* ========== Shell 菜单面板（ShellMenuPanel） ========== */
.wcp-shell-section {
    min-width: 0;
}

.wcp-shell-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.wcp-shell-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wcp-text);
}

.wcp-shell-section__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.wcp-shell-section__body {
    min-width: 0;
}

.wcp-shell-menu-panel {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100vh;
    min-height: 0;
    padding: 0 0 12px;
    border-right: 1px solid var(--wcp-line);
    background: var(--wcp-surface);
    color: var(--wcp-text);
}

.wcp-shell-menu {
    display: grid;
    align-content: start;
    gap: 5px;
    flex: 1;
    min-height: 0;
    padding: 12px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--wcp-line-strong) transparent;
}

.wcp-shell-menu::-webkit-scrollbar {
    width: 8px;
}

.wcp-shell-menu::-webkit-scrollbar-track {
    background: transparent;
}

.wcp-shell-menu::-webkit-scrollbar-thumb {
    background: var(--wcp-line-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.wcp-shell-menu::-webkit-scrollbar-thumb:hover {
    background: var(--wcp-text-3);
    background-clip: padding-box;
}

.wcp-shell-menu__group {
    display: grid;
    gap: 3px;
}

.wcp-shell-menu__toggle {
    width: 100%;
    min-height: 36px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    padding: 7px 9px;
    background: transparent;
    color: var(--wcp-text-3);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

.wcp-shell-menu__toggle:hover,
.wcp-shell-menu__toggle--active {
    background: var(--wcp-surface-3);
    color: var(--wcp-text-2);
}

.wcp-shell-menu__toggle-left {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wcp-shell-menu__toggle-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.wcp-shell-menu__icon,
.wcp-shell-menu__item-icon {
    min-width: 24px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--wcp-text-3);
    background: transparent;
    flex-shrink: 0;
}

.wcp-shell-menu__toggle--active .wcp-shell-menu__icon,
.wcp-shell-menu__item--active .wcp-shell-menu__item-icon {
    color: var(--wcp-accent);
}

.wcp-shell-menu__icon--image img,
.wcp-shell-menu__item-icon--image img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.wcp-shell-menu__icon--font i,
.wcp-shell-menu__item-icon--font i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
}

.wcp-shell-menu__text {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.25;
}

.wcp-shell-menu__chevron {
    font-size: 11px;
    color: var(--wcp-text-3);
    line-height: 1;
}

.wcp-shell-menu__children {
    display: grid;
    gap: 3px;
    padding: 4px 0 8px 11px;
}

.wcp-shell-menu__section {
    margin: 7px 8px 2px;
    color: var(--wcp-text-3);
    font-size: 12px;
    font-weight: 600;
}

.wcp-shell-menu__item {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 8px;
    padding: 7px 9px 7px 11px;
    color: var(--wcp-text-2);
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: none;
}

.wcp-shell-menu__item:hover {
    background: var(--wcp-surface-3);
    color: var(--wcp-text);
}

.wcp-shell-menu__item--active {
    position: relative;
    background: var(--wcp-surface-3);
    color: var(--wcp-text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--wcp-accent);
}

.wcp-shell-menu__empty {
    border: 1px dashed var(--wcp-line-strong);
    border-radius: 10px;
    background: var(--wcp-surface-2);
    color: var(--wcp-text-2);
    font-size: 12px;
    padding: 10px;
}

/* ========== Shell 页签栏（ShellTabBar） ========== */
.wcp-shell-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    min-height: 34px;
    padding: 3px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
}

.wcp-shell-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 26px;
    max-width: 184px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wcp-text-2);
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
    box-shadow: none;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.wcp-shell-tabs__item:hover {
    background: var(--wcp-surface-3);
    color: var(--wcp-text);
}

.wcp-shell-tabs__item--active {
    background: var(--wcp-surface);
    color: var(--wcp-text);
    box-shadow: var(--wcp-shadow-btn);
}

.wcp-shell-tabs__button,
.wcp-shell-tabs__close {
    border: 0;
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0;
    color: inherit;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.wcp-shell-tabs__button {
    max-width: 150px;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.wcp-shell-tabs__close {
    width: 22px;
    border-radius: 0;
    opacity: 0.76;
}

.wcp-shell-tabs__close:hover {
    opacity: 1;
}

.wcp-shell-tabs__backdrop {
    position: fixed;
    inset: 0;
    z-index: 89;
    border: 0;
    padding: 0;
    background: transparent;
}

.wcp-shell-tabs__menu {
    position: fixed;
    z-index: 90;
    width: 164px;
    padding: 4px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-md);
    background: var(--wcp-surface);
    box-shadow: var(--wcp-shadow-pop);
}

.wcp-shell-tabs__menu-item {
    width: 100%;
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 6px;
    padding: 0 10px;
    background: transparent;
    color: var(--wcp-text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

.wcp-shell-tabs__menu-item:hover {
    background: var(--wcp-surface-3);
    color: var(--wcp-text);
}

.wcp-shell-tabs__menu-icon {
    width: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wcp-text-3);
    flex: 0 0 12px;
}

/* ========== Shell 用户面板（ShellUserPanel / ShellAppSwitcher） ========== */
.wcp-shell-user-panel {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wcp-shell-icon-btn {
    width: 30px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 1px solid var(--wcp-line);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wcp-surface);
    color: var(--wcp-text-2);
    cursor: pointer;
    box-shadow: none;
}

.wcp-shell-icon-btn:hover,
.wcp-shell-icon-btn--active {
    border-color: var(--wcp-line-strong);
    background: var(--wcp-surface-3);
    color: var(--wcp-text);
}

.wcp-shell-icon-btn__icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wcp-shell-user {
    position: relative;
    z-index: 141;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.wcp-shell-user > * {
    flex-shrink: 0;
}

.wcp-shell-user__chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--wcp-line);
    border-radius: 8px;
    background: var(--wcp-surface);
    color: var(--wcp-text-2);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.wcp-shell-user__trigger {
    position: relative;
    z-index: 141;
    max-width: 132px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    margin-left: 0;
    padding: 0 4px 0 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--wcp-text);
    font-family: inherit;
    cursor: pointer;
    box-shadow: none;
}

.wcp-shell-user__trigger:hover,
.wcp-shell-user__trigger--open {
    background: var(--wcp-surface-3);
}

.wcp-shell-user__avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--wcp-accent-soft);
    color: var(--wcp-accent);
    font-size: 15px;
    font-weight: 800;
}

.wcp-shell-user__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wcp-shell-user__avatar-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wcp-shell-user__name {
    display: inline-block;
    max-width: 70px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--wcp-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.wcp-shell-user__trigger:hover .wcp-shell-user__name,
.wcp-shell-user__trigger--open .wcp-shell-user__name {
    color: var(--wcp-accent);
}

.wcp-shell-user__chevron {
    flex: 0 0 auto;
    color: var(--wcp-text-3);
    font-size: 10px;
    line-height: 1;
    transition: transform 0.18s ease, color 0.18s ease;
}

.wcp-shell-user__trigger:hover .wcp-shell-user__chevron,
.wcp-shell-user__trigger--open .wcp-shell-user__chevron {
    color: var(--wcp-accent);
}

.wcp-shell-user__trigger--open .wcp-shell-user__chevron {
    transform: rotate(180deg);
}

.wcp-shell-user__backdrop {
    position: fixed;
    inset: 0;
    z-index: 142 !important;
    border: 0;
    padding: 0;
    background: transparent;
}

.wcp-shell-user__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 143 !important;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-md);
    background: var(--wcp-surface);
    box-shadow: var(--wcp-shadow-pop);
}

.wcp-shell-user__menu-item {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wcp-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.wcp-shell-user__menu-item:hover {
    background: var(--wcp-surface-3);
    color: var(--wcp-text);
}

.wcp-shell-user__menu-item--danger {
    color: var(--wcp-danger);
}

.wcp-shell-user__menu-item--danger:hover {
    background: var(--wcp-danger-soft);
    color: var(--wcp-danger-hover);
}

.wcp-shell-user__copy {
    display: grid;
    min-width: 0;
}

.wcp-shell-user__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--wcp-text-2);
    font-size: 0.8125rem;
}

.wcp-shell-user__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.wcp-shell-app-switcher {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.wcp-shell-app-switcher__select {
    min-width: 168px;
    min-height: 28px;
    height: 28px;
    padding-left: 10px;
    padding-right: 30px;
    border: 1px solid var(--wcp-line);
    border-radius: 8px;
    background-color: var(--wcp-surface);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--wcp-text-2) 50%),
        linear-gradient(135deg, var(--wcp-text-2) 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 50%,
        calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    appearance: none;
    color: var(--wcp-text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    box-shadow: none;
}

.wcp-shell-app-switcher__select:hover {
    border-color: var(--wcp-line-strong);
    background-color: var(--wcp-surface-2);
}

.wcp-shell-app-switcher__select:focus {
    outline: none;
    border-color: var(--wcp-accent);
    box-shadow: 0 0 0 3px var(--wcp-focus);
}

.wcp-shell-app-switcher__label {
    color: var(--wcp-text-2);
}

.wcp-shell-overlay-host {
    display: contents;
}

@media (max-width: 1180px) {
    .wcp-shell-user__chip {
        display: none;
    }

    .wcp-shell-app-switcher__select {
        min-width: 132px;
    }
}

@media (max-width: 860px) {
    .wcp-shell-menu-panel {
        position: relative;
        height: auto;
        max-height: 46vh;
        border-right: 0;
        border-bottom: 1px solid var(--wcp-line);
    }
}

/* ========== Shell 账号弹窗（个人信息 / 修改个人信息 / 修改密码） ========== */
.wcp-shell-account-modal {
    width: min(860px, calc(100vw - 56px));
}

.wcp-shell-account-profile {
    display: grid;
    gap: 18px;
}

.wcp-shell-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
    background: var(--wcp-accent-soft);
    color: var(--wcp-accent);
    flex-shrink: 0;
}

.wcp-shell-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.wcp-shell-account-avatar-icon {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wcp-shell-account-hero {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 2px 2px 0;
}

.wcp-shell-account-hero-avatar {
    width: 104px;
    height: 104px;
    border: 1px solid var(--wcp-line);
    box-shadow: var(--wcp-shadow-card);
}

.wcp-shell-account-hero-avatar .wcp-shell-account-avatar-icon {
    width: 30px;
    height: 30px;
}

.wcp-shell-account-hero-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
    align-content: center;
}

.wcp-shell-account-hero-name {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--wcp-text);
}

.wcp-shell-account-hero-subtitle {
    font-size: 14px;
    color: var(--wcp-text-2);
    font-weight: 700;
}

.wcp-shell-account-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wcp-shell-account-chip {
    min-height: 30px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--wcp-line);
    border-radius: 999px;
    background: var(--wcp-surface-2);
    color: var(--wcp-text-2);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.wcp-shell-account-details {
    margin-top: 2px;
}

.wcp-shell-account-editor {
    display: block;
}

.wcp-shell-account-editor-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.wcp-shell-account-editor-side {
    min-width: 0;
}

.wcp-shell-account-editor-card {
    display: grid;
    grid-template-columns: 76px minmax(132px, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    padding: 14px;
    border: 1px solid var(--wcp-line);
    border-radius: 16px;
    background: var(--wcp-surface-2);
    box-shadow: var(--wcp-shadow-card);
}

.wcp-shell-account-editor-avatar {
    width: 76px;
    height: 76px;
    border: 1px solid var(--wcp-line);
    box-shadow: var(--wcp-shadow-card);
}

.wcp-shell-account-editor-avatar .wcp-shell-account-avatar-icon {
    width: 38px;
    height: 38px;
}

.wcp-shell-account-editor-aside {
    display: grid;
    gap: 6px;
    align-content: start;
    justify-items: start;
    min-width: 0;
}

.wcp-shell-account-editor-title {
    color: var(--wcp-text);
    font-size: 13px;
    font-weight: 800;
}

.wcp-shell-account-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.wcp-shell-account-file-input {
    display: none;
}

.wcp-shell-account-file-trigger {
    min-width: 112px;
    height: 32px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--wcp-line);
    border-radius: 10px;
    background: var(--wcp-surface);
    color: var(--wcp-accent);
    box-shadow: none;
    white-space: nowrap;
    cursor: pointer;
}

.wcp-shell-account-file-trigger:hover {
    border-color: var(--wcp-line-strong);
    background: var(--wcp-surface-3);
}

.wcp-shell-account-file-text {
    color: var(--wcp-text-2);
    font-size: 11px;
    line-height: 1.35;
    max-width: 156px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wcp-shell-account-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 520px;
    width: 100%;
    margin: 4px 0 0;
    gap: 12px 18px;
    align-content: start;
    padding-top: 0;
    justify-self: start;
}

.wcp-shell-account-password-form {
    width: min(100%, 620px);
    max-width: 620px;
}

@media (max-width: 860px) {
    .wcp-shell-account-hero,
    .wcp-shell-account-editor-layout,
    .wcp-shell-account-editor-grid {
        grid-template-columns: 1fr;
    }

    .wcp-shell-account-hero-copy,
    .wcp-shell-account-editor-aside,
    .wcp-shell-account-editor-card {
        width: 100%;
    }

    .wcp-shell-account-editor-card {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 12px;
    }
}

/* 账号弹窗“外观”分区：主题色板与明暗选择。 */
.wcp-theme-section {
    display: grid;
    gap: 10px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--wcp-line);
}

.wcp-theme-section__title {
    margin: 0;
    color: var(--wcp-text-3);
    font-size: 12px;
    font-weight: 500;
}

.wcp-theme-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.wcp-theme-option {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 8px 6px;
    border: 1px solid var(--wcp-line);
    border-radius: var(--wcp-radius-sm);
    background: var(--wcp-surface);
    color: var(--wcp-text-2);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wcp-theme-option:hover {
    border-color: var(--wcp-line-strong);
}

.wcp-theme-option[class*="is-active"] {
    border-color: var(--wcp-accent);
    box-shadow: 0 0 0 2px var(--wcp-focus);
    color: var(--wcp-text);
}

.wcp-theme-swatch {
    display: flex;
    width: 100%;
    height: 28px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px var(--wcp-line);
}

.wcp-theme-swatch span {
    flex: 1 1 0;
}

.wcp-theme-modes {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--wcp-surface-3);
}

.wcp-theme-mode {
    flex: 1 1 0;
    height: 26px;
    border: 0;
    border-radius: 999px;
    padding: 0 6px;
    background: transparent;
    color: var(--wcp-text-2);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wcp-theme-mode:hover {
    color: var(--wcp-text);
}

.wcp-theme-mode[class*="is-active"] {
    background: var(--wcp-surface);
    color: var(--wcp-text);
    font-weight: 500;
    box-shadow: var(--wcp-shadow-btn);
}

@media (max-width: 760px) {
    .wcp-page-header,
    .wcp-filter-layout,
    .wcp-filter-action-row,
    .wcp-page-toolbar-in-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .wcp-filter-main {
        flex-basis: auto;
        width: 100%;
    }

    .wcp-filter-grid {
        grid-template-columns: 1fr;
    }

    .wcp-filter-item {
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
    }

    .wcp-filter-item label::after {
        content: "";
    }

    .wcp-filter-item-actions {
        width: 100%;
    }

    .wcp-modal-mask {
        padding: 12px;
    }

    .wcp-modal-header,
    .wcp-modal-body,
    .wcp-modal-footer {
        padding-inline: 12px;
    }
}

@keyframes wcp-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes wcp-modal-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes wcp-modal-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
}

@keyframes wcp-toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wcp-toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}