/* =====================================================================
 * ai-style-picker.css  2026-09-09
 * 共享「整体风格选择器」样式（AI精修工作台 / 商品库批量AI 共用同一组件）
 * 抽取自 ai-retouch-workbench.html 需求6 整体风格 Modal + 方案E 分组管理弹窗
 * 作用域类：.style-modal（风格选择弹窗）/ .cat-modal（风格分组管理弹窗）
 * ===================================================================== */
        /* ============ 需求6：整体风格 Modal 选择器 CSS ============ */
        .style-modal-header{
            display:flex;align-items:center;justify-content:space-between;
            padding:18px 24px;
            background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(168,85,247,.14));
        }
        .style-modal-header .smh-title{display:flex;align-items:center;gap:14px;}
        .style-modal-header .smh-icon{
            width:36px;height:36px;border-radius:12px;
            background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;
            display:inline-flex;align-items:center;justify-content:center;
        }
        .style-modal-header .smh-hint{font-size:12px;color:#64748b;margin-left:10px;}
        .style-modal-tabs{
            display:flex;gap:6px;padding:10px 24px;border-bottom:1px solid var(--ai-border,#e2e8f0);
            background:#fafbff;
        }
        .style-modal-tabs .sm-tab{
            border:0;background:transparent;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;
            color:#64748b;cursor:pointer;transition:all .18s ease;display:inline-flex;align-items:center;
        }
        .style-modal-tabs .sm-tab.active{
            background:#fff;color:#4f46e5;
            box-shadow:0 2px 6px rgba(99,102,241,.12);border:1px solid #e0e7ff;
        }
        .style-modal-pills{
            display:flex;flex-wrap:wrap;gap:8px;padding:12px 24px;
            border-bottom:1px solid var(--ai-border,#e2e8f0);background:#fff;
        }
        .style-modal-pills .sm-pill{
            border:1px solid #e2e8f0;background:#fff;padding:5px 14px;border-radius:999px;
            font-size:12px;font-weight:600;color:#64748b;cursor:pointer;transition:all .18s;
        }
        .style-modal-pills .sm-pill:hover{border-color:#c7d2fe;color:#4f46e5;}
        .style-modal-pills .sm-pill.active{
            background:linear-gradient(135deg,#eef2ff,#f5f3ff);color:#4f46e5;border-color:#c7d2fe;
        }
        .style-modal-body{padding:20px 24px;min-height:420px;max-height:62vh;overflow-y:auto;background:#fff;}
        .style-grid{
            display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
        }
        @media (max-width:992px){ .style-grid{grid-template-columns:repeat(2,1fr);} }
        .style-card{
            position:relative;border:2px solid #e2e8f0;border-radius:14px;overflow:hidden;cursor:pointer;
            background:#fff;transition:all .2s ease;display:flex;flex-direction:column;
        }
        .style-card:hover{border-color:#c7d2fe;transform:translateY(-2px);box-shadow:0 10px 24px rgba(99,102,241,.10);}
        .style-card.selected{border-color:var(--ai-primary,#6366f1);box-shadow:0 0 0 3px rgba(99,102,241,.15);}
        .style-card .sc-img{
            width:100%;aspect-ratio:4/3;object-fit:contain;object-position:center;background:#f1f5f9;display:block;
        }
        .style-card .sc-heart{
            position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;
            background:rgba(255,255,255,.88);backdrop-filter:blur(6px);
            display:flex;align-items:center;justify-content:center;color:#94a3b8;
            cursor:pointer;transition:all .18s;border:1px solid #e2e8f0;z-index:2;
        }
        .style-card .sc-heart:hover{transform:scale(1.08);}
        .style-card .sc-heart.fav{color:#ef4444;background:rgba(255,228,230,.95);border-color:#fecaca;}
        .style-card .sc-heart.fav i{animation:pop-heart .35s ease;}
        @keyframes pop-heart{0%{transform:scale(1);}45%{transform:scale(1.35);}100%{transform:scale(1);}}
        /* 删除按钮：左上角，仅用户自定义风格显示 */
        .style-card .sc-delete{
            position:absolute;top:8px;left:38px;width:28px;height:28px;border-radius:50%;
            background:rgba(255,255,255,.88);backdrop-filter:blur(6px);
            display:flex;align-items:center;justify-content:center;color:#94a3b8;
            cursor:pointer;transition:all .18s;border:1px solid #e2e8f0;z-index:2;font-size:13px;
        }
        .style-card .sc-delete:hover{color:#ef4444;background:rgba(254,226,226,.95);border-color:#fecaca;transform:scale(1.08);}
        .style-card .sc-body{padding:10px 12px;}
        .style-card .sc-name{font-weight:600;font-size:13px;color:#1e293b;line-height:1.4;}
        .style-card .sc-desc{font-size:11px;color:#94a3b8;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .style-card .sc-check{
            position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;
            background:var(--ai-primary,#6366f1);color:#fff;display:none;
            align-items:center;justify-content:center;z-index:2;box-shadow:0 3px 8px rgba(99,102,241,.35);
        }
        .style-card.selected .sc-check{display:inline-flex;}
        /* 空状态 */
        .sm-empty{padding:60px 0;text-align:center;color:#94a3b8;}
        .sm-empty i{font-size:44px;opacity:.6;}
        .sm-empty .sm-empty-text{margin-top:14px;font-size:13px;}
        /* 自定义上传 */
        .sm-custom-upload{
            border:2px dashed #cbd5e1;border-radius:16px;padding:40px 20px;text-align:center;
            cursor:pointer;transition:all .2s;background:linear-gradient(135deg,#fafbff,#f5f6ff);
        }
        .sm-custom-upload:hover{border-color:var(--ai-primary);}
        .sm-preview-custom{
            max-height:220px;border-radius:12px;border:2px solid var(--ai-primary);object-fit:contain;object-position:center;
        }
        /* 页脚 */
        .style-modal-footer{
            display:flex;align-items:center;justify-content:space-between;
            padding:14px 24px;border-top:1px solid var(--ai-border,#e2e8f0);background:#fafbff;
        }
        .style-modal-footer .smf-left{display:flex;align-items:center;gap:12px;}
        .style-modal-footer .smf-right{display:flex;align-items:center;gap:10px;}
        .smf-badge{
            display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;
            background:linear-gradient(135deg,#eef2ff,#f5f3ff);color:#4f46e5;border:1px solid #e0e7ff;
        }

        /* =====================================================================
         * 2026-09-03 UI 优化整体风格弹窗：ui-ux-pro-max 设计系统注入
         * Style=Modern Dark Cinema → 取色板/缓动/效果 → 在浅色弹窗上作用域覆盖
         * ===================================================================== */

        /* (a) 设计 Token 全局 */
        :root {
            /* 颜色：ui-ux-pro-max 规范 */
            --sm-primary:       #7C3AED;
            --sm-primary-600:   #6D28D9;
            --sm-secondary:     #6366F1;
            --sm-secondary-600: #4F46E5;
            --sm-accent:        #0891B2;
            --sm-ring:          rgba(124, 58, 237, 0.18);
            --sm-ring-solid:    #7C3AED;

            --sm-text:          #0F172A;
            --sm-text-muted:    #64748B;
            --sm-text-soft:     #94A3B8;
            --sm-border:        #E2E8F0;
            --sm-border-soft:   #F1F5F9;
            --sm-bg:            #FFFFFF;
            --sm-bg-soft:       #FAFBFF;

            /* 圆角三级 */
            --sm-radius-sm:  10px;
            --sm-radius-md:  14px;
            --sm-radius-lg:  24px;
            --sm-radius-pill:999px;

            /* 阴影三级 */
            --sm-shadow-sm: 0 2px  8px rgba(15,23,42,0.05);
            --sm-shadow-md: 0 8px  24px rgba(15,23,42,0.08);
            --sm-shadow-lg: 0 20px 48px rgba(99,102,241,0.20);
            --sm-shadow-primary: 0 14px 32px rgba(124,58,237,0.28);

            /* 动效曲线：Expo.out Bezier(0.16,1,0.3,1) */
            --sm-ease: cubic-bezier(0.16, 1, 0.3, 1);
            --sm-duration-fast: 150ms;
            --sm-duration-base: 220ms;
            --sm-duration-slow: 350ms;

            /* 按压缩放 */
            --sm-press-scale: 0.97;
        }

        /* (b) #smCustomFile 七重隐藏 —— 彻底修复原生"选择文件 未选择任何文件"外露 bug */
        #smCustomFile {
            position: absolute !important;
            left: -99999px !important;
            top:  -99999px !important;
            width:  0 !important;
            height: 0 !important;
            min-width:  0 !important;
            min-height: 0 !important;
            padding: 0 !important;
            margin:  0 !important;
            border:  0 !important;
            outline: 0 !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            overflow: hidden !important;
            clip: rect(0,0,0,0) !important;
            clip-path: inset(50%) !important;
            white-space: nowrap !important;
            z-index: -9999 !important;
        }

        /* ============================================================
         * (c) 按钮层级矩阵：Primary / Secondary / Tertiary
         *    统一高度 ≥44px · 对齐 WCAG 触控尺寸
         * ============================================================ */
        .style-modal .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 22px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -0.005em;
            border-radius: var(--sm-radius-md);
            border: 1px solid transparent;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            transition:
                transform var(--sm-duration-base) var(--sm-ease),
                background-color var(--sm-duration-base) var(--sm-ease),
                border-color var(--sm-duration-base) var(--sm-ease),
                color var(--sm-duration-base) var(--sm-ease),
                box-shadow var(--sm-duration-base) var(--sm-ease),
                opacity var(--sm-duration-fast) linear;
            will-change: transform;
            white-space: nowrap;
        }
        .style-modal .btn svg,
        .style-modal .btn i { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

        /* Primary：紫→蓝紫 渐变实心 */
        .style-modal .btn.btn-primary {
            background: linear-gradient(135deg, var(--sm-primary) 0%, var(--sm-secondary) 100%);
            color: #FFFFFF;
            border-color: transparent;
            box-shadow: var(--sm-shadow-primary);
        }
        .style-modal .btn.btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 18px 40px rgba(124, 58, 237, 0.34);
        }
        .style-modal .btn.btn-primary:focus-visible {
            outline: none;
            box-shadow: var(--sm-shadow-primary), 0 0 0 4px var(--sm-ring);
        }
        .style-modal .btn.btn-primary:active {
            transform: scale(var(--sm-press-scale));
            box-shadow: 0 8px 18px rgba(124, 58, 237, 0.22);
        }
        .style-modal .btn.btn-primary:disabled {
            background: linear-gradient(135deg, #C4B5FD 0%, #A5B4FC 100%);
            box-shadow: 0 4px 10px rgba(99,102,241,0.15);
            cursor: not-allowed;
            opacity: 0.7;
            transform: none;
        }

        /* Secondary：白底 + 1px 灰边 pill （收藏风格）hover 浅粉底+红心 */
        .style-modal .btn.btn-secondary {
            background: #FFFFFF;
            color: var(--sm-text);
            border: 1px solid var(--sm-border);
            border-radius: var(--sm-radius-pill);
            box-shadow: var(--sm-shadow-sm);
        }
        .style-modal .btn.btn-secondary:hover {
            background: linear-gradient(135deg, #FFF1F2, #FEF2F2);
            border-color: #FECACA;
            color: #DC2626;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
        }
        .style-modal .btn.btn-secondary:hover i,
        .style-modal .btn.btn-secondary:hover svg { color: #EF4444; }
        .style-modal .btn.btn-secondary:focus-visible {
            outline: none;
            box-shadow: var(--sm-shadow-sm), 0 0 0 4px rgba(239,68,68,0.12);
        }
        .style-modal .btn.btn-secondary:active { transform: scale(var(--sm-press-scale)); }

        /* Tertiary：纯文字无底（取消 / 重新选择） */
        .style-modal .btn.btn-tertiary {
            background: transparent;
            color: var(--sm-text-muted);
            border-color: transparent;
            padding-left: 14px;
            padding-right: 14px;
            box-shadow: none;
        }
        .style-modal .btn.btn-tertiary:hover {
            background: rgba(15, 23, 42, 0.05);
            color: var(--sm-text);
        }
        .style-modal .btn.btn-tertiary:focus-visible {
            outline: none;
            background: rgba(15, 23, 42, 0.05);
            box-shadow: 0 0 0 4px var(--sm-ring);
            color: var(--sm-primary);
        }
        .style-modal .btn.btn-tertiary:active { transform: scale(var(--sm-press-scale)); }

        /* 拖拽区内的 Primary 伪 CTA 按钮（略小一码但仍 ≥44px） */
        .style-modal .btn-cta-pseudo {
            min-height: 46px;
            padding: 0 26px;
            font-size: 14.5px;
            border-radius: var(--sm-radius-pill);
        }

        /* ============================================================
         * (d) .sm-dropzone 单入口拖拽上传区
         * ============================================================ */
        .sm-dropzone {
            position: relative;
            overflow: hidden;
            border: 2px dashed #CBD5E1;
            border-radius: var(--sm-radius-lg);
            padding: 56px 28px 44px;
            text-align: center;
            cursor: pointer;
            background:
                linear-gradient(135deg, rgba(124,58,237,0.04) 0%, rgba(99,102,241,0.05) 50%, rgba(8,145,178,0.03) 100%),
                #FFFFFF;
            box-shadow: var(--sm-shadow-sm);
            transition:
                border-color var(--sm-duration-base) var(--sm-ease),
                background-color var(--sm-duration-base) var(--sm-ease),
                box-shadow var(--sm-duration-base) var(--sm-ease),
                transform var(--sm-duration-base) var(--sm-ease);
            isolation: isolate;
        }
        .sm-dropzone:hover {
            border-color: var(--sm-primary);
            box-shadow: var(--sm-shadow-md);
            transform: translateY(-1px);
        }
        /* 细网格 pattern 背景（装饰底层） */
        .sm-dropzone__grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background-image:
                linear-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
            background-size: 22px 22px;
            mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 100%);
            -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 100%);
            opacity: 0.8;
        }
        /* 渐变 blob 装饰 1（左上紫） */
        .sm-dropzone__blob--1 {
            position: absolute;
            top:    -60px;
            left:   -40px;
            width:  220px;
            height: 220px;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.22), transparent 65%);
            filter: blur(6px);
            animation: sm-float 11s ease-in-out infinite;
        }
        /* 渐变 blob 装饰 2（右下青蓝） */
        .sm-dropzone__blob--2 {
            position: absolute;
            bottom: -70px;
            right:  -50px;
            width:  260px;
            height: 260px;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(circle at 65% 65%, rgba(8, 145, 178, 0.18), transparent 65%),
                        radial-gradient(circle at 35% 35%, rgba(99, 102, 241, 0.15), transparent 60%);
            filter: blur(8px);
            animation: sm-float 14s ease-in-out -4s infinite reverse;
        }
        @keyframes sm-float {
            0%,100% { transform: translate(0,0) scale(1); }
            50%     { transform: translate(8px,-10px) scale(1.06); }
        }
        /* 内容区（z-index 高于装饰） */
        .sm-dropzone__content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }
        /* 大图标容器 */
        .sm-dropzone__icon {
            width:  96px;
            height: 96px;
            border-radius: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--sm-primary);
            background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(99,102,241,0.08));
            border: 1px solid rgba(124, 58, 237, 0.18);
            filter: drop-shadow(0 6px 20px rgba(124, 58, 237, 0.28));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
            margin-bottom: 2px;
        }
        .sm-dropzone__title {
            font-size: 20px;
            font-weight: 700;
            color: var(--sm-text);
            letter-spacing: -0.01em;
        }
        .sm-dropzone__desc {
            font-size: 14px;
            color: var(--sm-text-muted);
            line-height: 1.6;
            max-width: 420px;
            margin-bottom: 6px;
        }
        .sm-dropzone__hint {
            margin-top: 14px;
            font-size: 12px;
            color: var(--sm-text-soft);
            letter-spacing: 0.005em;
        }
        /* URL 链接上传行：分隔线 + 链接输入框 + 使用按钮（与 dropzone 同紫青设计语言） */
        .sm-url-row { margin-top: 18px; }
        .sm-url-divider {
            display: flex; align-items: center; text-align: center;
            color: var(--sm-text-soft); font-size: 12px; margin-bottom: 12px;
        }
        .sm-url-divider::before, .sm-url-divider::after {
            content: ''; flex: 1; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(124,58,237,.18), transparent);
        }
        .sm-url-divider span { padding: 0 14px; white-space: nowrap; }
        .sm-url-input-wrap {
            position: relative; display: flex; align-items: center;
            gap: 8px;
        }
        .sm-url-input-icon {
            position: absolute; left: 12px; display: inline-flex;
            color: var(--sm-secondary-600, #6366f1); font-size: 15px; pointer-events: none;
        }
        .sm-url-input {
            flex: 1; height: 40px; padding-left: 36px; padding-right: 12px;
            border: 1px solid #e2e8f0; border-radius: 12px;
            font-size: 13px; color: #1e293b; background: #fff;
            transition: border-color .16s ease, box-shadow .16s ease;
        }
        .sm-url-input::placeholder { color: #94a3b8; }
        .sm-url-input:focus {
            border-color: var(--sm-primary, #7c3aed);
            box-shadow: 0 0 0 4px var(--sm-ring, rgba(124,58,237,.12));
        }
        .sm-url-btn {
            height: 40px; padding: 0 18px; border: none; border-radius: 12px;
            font-size: 13px; font-weight: 600; white-space: nowrap;
            background: linear-gradient(135deg, var(--sm-primary, #7c3aed) 0%, var(--sm-secondary-600, #6366f1) 100%);
            color: #fff; box-shadow: 0 4px 14px rgba(124,58,237,.28);
            transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
        }
        .sm-url-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,58,237,.34); color:#fff; }
        .sm-url-btn:disabled { opacity: .65; transform: none; box-shadow: none; }
        /* AI 帮写按钮：紫青渐变胶囊，与风格弹窗主色系一致 */
        .sm-ai-btn{
            display:inline-flex;align-items:center;gap:6px;
            height:30px;padding:0 14px;border:none;border-radius:999px;
            font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;cursor:pointer;
            background:linear-gradient(135deg,var(--sm-primary,#7c3aed) 0%,var(--sm-secondary-600,#6366f1) 100%);
            box-shadow:0 3px 12px rgba(124,58,237,.30);
            transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease;
        }
        .sm-ai-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 5px 16px rgba(124,58,237,.38); }
        .sm-ai-btn:disabled{ opacity:.45;cursor:not-allowed;transform:none;box-shadow:none; }
        .sm-ai-btn .spinner-border{ width:13px;height:13px;border-width:2px; }
        /* 拖拽进入态：dashed 变实心 + 边框变 Primary + 背景亮 + shake none */
        .sm-dropzone--active {
            border-color: var(--sm-primary);
            border-style: solid;
            background: linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(99,102,241,0.10) 100%), #FFFFFF;
            box-shadow: 0 0 0 6px var(--sm-ring), var(--sm-shadow-md);
        }
        .sm-dropzone--active .sm-dropzone__icon {
            color: var(--sm-secondary-600);
            transform: scale(1.06);
            transition: transform var(--sm-duration-base) var(--sm-ease), color var(--sm-duration-base) var(--sm-ease);
        }

        /* ============================================================
         * (e) 表单控件：Label / Input / Textarea focus-ring
         * ============================================================ */
        .sm-form-label {
            font-size: 13.5px;
            color: var(--sm-text) !important;
            margin-bottom: 8px;
            letter-spacing: 0.005em;
        }
        .sm-form-input {
            border: 1px solid var(--sm-border);
            border-radius: var(--sm-radius-md) !important;
            padding: 11px 14px !important;
            font-size: 14px;
            color: var(--sm-text);
            background: #FFFFFF;
            transition:
                border-color var(--sm-duration-fast) var(--sm-ease),
                box-shadow var(--sm-duration-fast) var(--sm-ease),
                background-color var(--sm-duration-fast) var(--sm-ease);
        }
        .sm-form-input::placeholder { color: var(--sm-text-soft); opacity: 0.95; }
        .sm-form-input:hover { border-color: #CBD5E1; }
        .sm-form-input:focus {
            outline: none !important;
            border-color: var(--sm-primary) !important;
            box-shadow: 0 0 0 4px var(--sm-ring) !important;
            background-color: #FEFEFF;
        }
        textarea.sm-form-input { resize: vertical; line-height: 1.6; }

        /* ============================================================
         * (f) 预览卡左上角风格标签 sm-preview-tag
         * ============================================================ */
        .sm-preview-tag {
            position: absolute;
            top: 16px;
            left: 16px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: var(--sm-radius-pill);
            font-size: 11.5px;
            font-weight: 600;
            color: #FFFFFF;
            background: linear-gradient(135deg, rgba(124,58,237,0.92), rgba(99,102,241,0.92));
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32);
            letter-spacing: 0.01em;
            border: 1px solid rgba(255,255,255,0.22);
        }
        .sm-preview-tag svg { color: #FFFFFF; }

        /* ============================================================
         * (g) sm-tab 激活态渐变下划线 + 阴影加深
         * ============================================================ */
        .style-modal-tabs .sm-tab {
            position: relative;
            padding-left: 18px !important;
            padding-right: 18px !important;
            min-height: 40px;
        }
        .style-modal-tabs .sm-tab.active {
            color: var(--sm-primary) !important;
            background: linear-gradient(135deg, #FFFFFF, #FAFBFF) !important;
            border: 1px solid rgba(124, 58, 237, 0.18) !important;
            box-shadow: 0 6px 18px rgba(124, 58, 237, 0.10) !important;
        }
        .style-modal-tabs .sm-tab.active::after {
            content: '';
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: -11px;
            height: 3px;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--sm-primary), var(--sm-secondary), var(--sm-accent));
            box-shadow: 0 2px 6px rgba(124,58,237,0.28);
        }
        .style-modal-tabs .sm-tab:hover:not(.active) {
            color: var(--sm-text);
            background: rgba(15,23,42,0.04);
        }

        /* ============================================================
         * (h) sm-actions-row 按钮组对齐兜底
         * ============================================================ */
        .sm-actions-row .btn {
            flex-shrink: 0;
        }
        .sm-actions-row .btn.btn-primary { min-width: 156px; }

        /* ============================================================
         * (i) 全量 cursor:pointer（所有可点击）
         * ============================================================ */
        .style-modal .sm-dropzone,
        .style-modal .style-card,
        .style-modal .sc-heart,
        .style-modal .sc-delete,
        .style-modal .sm-pill,
        .style-modal .sm-tab,
        .style-modal .sm-custom-preview-close,
        .style-modal button,
        .style-modal [onclick] {
            cursor: pointer;
        }

        /* ============================================================
         * (j) prefers-reduced-motion：关闭所有过渡/动画（无障碍 P1）
         * ============================================================ */
        @media (prefers-reduced-motion: reduce) {
            .style-modal *,
            .style-modal *::before,
            .style-modal *::after {
                animation: none !important;
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition: none !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }
            .sm-dropzone__blob--1,
            .sm-dropzone__blob--2 {
                animation: none !important;
                opacity: 0.85;
            }
            .style-modal .btn:active,
            .style-modal .btn-primary:active,
            .style-modal .btn-secondary:active,
            .style-modal .btn-tertiary:active {
                transform: none !important;
            }
        }

        /* ============================================================
         * (k) 预览卡右上 × 删除按钮：清爽半透明深灰 36×36 纯热区
         *     无白底无阴影，仅深灰半透明背景 + 白色 X 图标（反模式：白底+阴影+圆形）
         * ============================================================ */
        .sm-custom-preview-close {
            position: absolute !important;
            top:  12px !important; right: 12px !important;
            width:  36px !important; height: 36px !important;
            min-width: 36px !important; min-height: 36px !important;
            padding: 0 !important; margin: 0 !important;
            border: none !important; outline: none !important;
            border-radius: 10px !important;
            background: rgba(15, 23, 42, 0.50) !important;
            color: #FFFFFF !important;
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
            cursor: pointer !important; z-index: 10 !important;
            transition: background-color 180ms var(--sm-ease),
                        transform 180ms var(--sm-ease),
                        opacity 150ms linear !important;
            opacity: 0.92;
        }
        .sm-custom-preview-close i {
            font-size: 16px !important; line-height: 1 !important;
            color: #FFFFFF !important;
        }
        .sm-custom-preview-close:hover {
            background: rgba(15, 23, 42, 0.78) !important;
            transform: scale(1.05) !important;
            opacity: 1;
        }
        .sm-custom-preview-close:active { transform: scale(0.95) !important; }
        .sm-custom-preview-close:focus-visible {
            outline: none !important;
            box-shadow: 0 0 0 3px var(--sm-ring) !important;
        }
        @media (prefers-reduced-motion: reduce) {
            .sm-custom-preview-close,
            .sm-custom-preview-close:hover,
            .sm-custom-preview-close:active {
                transition: none !important;
                transform: none !important;
            }
        }

        /* ============================================================
         * (l) 按钮公用：icon+文字前导对齐（避免 i 标签 + me-1 的间隙不一致）
         * ============================================================ */
        .btn-icon-leading {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
        }
        .btn-icon-leading i,
        .btn-icon-leading svg { flex-shrink: 0; }

        .smf-selected { font-weight: 600; color: var(--ai-text, #0f172a); }

        /* ============================================================
         * (m) 方案 E：保存分组大弹窗（#styleCatModal.cat-modal）
         *     【作用域限定】不污染 Bootstrap modal / style-modal 其它组件
         *     配色：统一紫青 Primary=#7C3AED / Accent=#0891B2 / Ring
         *     玻璃 Header + 柔和渐变侧栏 + Stagger 树节点 + CTA callout
         * ============================================================ */
        .cat-modal { z-index: 1056 !important; }
        .cat-modal-dialog { max-width: 1180px !important; margin: 1.75rem auto; }
        .cat-modal-content {
            border: none !important;
            border-radius: 20px !important;
            overflow: hidden !important;
            background: #FFFFFF !important;
            box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22),
                        0 8px 24px rgba(99, 102, 241, 0.10) !important;
        }
        /* 顶栏：玻璃态 紫蓝→紫青（匹配 style-modal-header 的 style-modal token 体系） + 毛玻璃 16px blur */
        .cat-modal-header {
            background:
                radial-gradient(1200px 200px at 0% 0%, rgba(99, 102, 241, 0.22), transparent 60%),
                radial-gradient(900px 200px at 100% 0%, rgba(8, 145, 178, 0.20), transparent 60%),
                linear-gradient(135deg, #5b21b6 0%, #7c3aed 45%, #4f46e5 100%) !important;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 20px 28px !important;
            border-bottom: none !important;
        }
        .cat-modal-header .smh-title { gap: 16px; }
        .cat-modal-header .smh-icon {
            width: 44px !important; height: 44px !important;
            border-radius: 14px !important;
            background: rgba(255,255,255,0.20) !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 6px 18px rgba(15,23,42,0.18);
            color: #FFFFFF !important;
            font-size: 20px !important;
        }
        .cat-modal-header .smh-text-block { display: flex; flex-direction: column; gap: 4px; }
        .cat-modal-header .smh-title-main {
            color: #FFFFFF !important;
            font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
        }
        .cat-modal-header .smh-hint { color: rgba(255,255,255,0.82) !important; margin: 0 !important; font-size: 13px; }
        .cat-modal-header .btn-close { filter: none; opacity: 0.9; }
        .cat-modal-header .btn-close:hover { opacity: 1; }

        /* 左右主容器：d-flex 布局 + min-height 520（密度 7） */
        .cat-modal-body {
            display: flex; flex-direction: row;
            min-height: 520px;
        }
        /* 左侧栏：玻璃态 280px 宽（原 260 → density=7 略宽），浅紫渐变 */
        .cat-modal-side {
            width: 280px; flex-shrink: 0;
            display: flex; flex-direction: column; min-height: 0;
            border-right: 1px solid var(--sm-border, #e2e8f0);
            background:
                linear-gradient(180deg, rgba(124,58,237,0.05) 0%, rgba(255,255,255,1) 45%) !important;
            padding: 16px 0;
        }
        .cat-modal-side-actions { padding: 6px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
        .cat-modal-side-actions .btn-sm { height: 40px; font-weight: 600; font-size: 13px; }

        /* 分组树：li 行卡片式（圆角 12 + Hover紫） */
        .style-cat-tree {
            list-style: none !important; padding: 0 8px !important; margin: 0 !important;
            flex: 1 1 auto; overflow-y: auto; min-height: 0;
        }
        .style-cat-tree > li {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 12px; margin: 2px 0;
            border-radius: 12px;
            cursor: pointer;
            color: var(--ai-text, #0f172a);
            transition: background-color 180ms var(--sm-ease), transform 160ms var(--sm-ease), box-shadow 180ms var(--sm-ease);
            border: 1px solid transparent;
        }
        .style-cat-tree > li .cat-item-icon {
            width: 30px; height: 30px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(124,58,237,0.08); color: #7C3AED; font-size: 14px; flex-shrink: 0;
        }
        .style-cat-tree > li .cat-item-name {
            flex: 1; font-weight: 600; font-size: 13.5px; color: #0f172a;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .style-cat-tree > li .cat-item-count {
            font-size: 11px; font-weight: 600; color: #64748b;
            padding: 2px 8px; border-radius: 999px; background: rgba(148,163,184,0.10);
            flex-shrink: 0;
        }
        .style-cat-tree > li:hover {
            background: rgba(124,58,237,0.06);
            border-color: rgba(124,58,237,0.12);
            transform: translateX(2px);
        }
        .style-cat-tree > li.active,
        .style-cat-tree > li[aria-selected="true"] {
            background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(8,145,178,0.08));
            border-color: rgba(124,58,237,0.24);
            box-shadow: 0 4px 14px rgba(124,58,237,0.08);
        }
        .style-cat-tree > li.active .cat-item-icon,
        .style-cat-tree > li[aria-selected="true"] .cat-item-icon {
            background: var(--sm-gradient, linear-gradient(135deg,#7c3aed,#0891b2));
            color: #FFFFFF;
        }

        /* 右侧主内容（选择模式 / 管理模式共享） */
        .cat-modal-main {
            flex: 1 1 auto; min-width: 0;
            padding: 28px 32px;
            overflow-y: auto;
            /* 兜底防御：绝对禁止 system-config.js 注入的 "顶部用户栏 topbar" 出现在本弹窗内
               （用户明确指出 styleCatModal 不需要"系统管理员/卡密激活/退出登录" topbar）
               三重封锁：渲染隐藏 + 布局 0 尺寸 + 屏幕外负定位 + 内容不可读 */
        }
        .cat-modal .topbar,
        .cat-modal .topbar-user,
        .cat-modal #topbarUser,
        .cat-modal #topbarDropdown,
        .cat-modal [class*="topbar-"] {
            all: unset !important;
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
            max-width: 0 !important;
            max-height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            min-height: 0 !important;
            min-width: 0 !important;
            overflow: hidden !important;
            position: absolute !important;
            left: -99999px !important;
            top: -99999px !important;
            pointer-events: none !important;
            clip: rect(0 0 0 0) !important;
            clip-path: inset(50%) !important;
            color: transparent !important;
            background: transparent !important;
            font-size: 0 !important;
            line-height: 0 !important;
            box-shadow: none !important;
        }
        .cat-section-title { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
        .cat-section-title-main {
            display: inline-flex; align-items: center; gap: 10px;
            font-weight: 700; font-size: 16px; color: #0f172a;
        }
        .cat-section-title-main i { font-size: 18px; color: #7C3AED; }
        .cat-section-title-sub { font-size: 13px; color: #64748b; line-height: 1.6; }

        /* 保存说明 CTA 卡片：紫青柔和渐变+虚线（替代原红底警告） */
        .cat-modal-callout {
            display: flex; align-items: flex-start; gap: 16px;
            padding: 20px 22px; margin-top: 8px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(124,58,237,0.05) 0%, rgba(8,145,178,0.05) 100%);
            border: 1px dashed #c4b5fd;
        }
        .cat-modal-callout__icon {
            flex-shrink: 0;
            width: 42px; height: 42px; border-radius: 14px;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #7C3AED 0%, #0891B2 100%);
            color: #FFFFFF; font-size: 18px;
            box-shadow: 0 8px 22px rgba(124,58,237,0.24);
        }
        .cat-modal-callout__body { flex: 1; min-width: 0; }
        .cat-modal-callout__title {
            font-weight: 700; font-size: 15px; color: #1e1b4b; margin-bottom: 6px;
        }
        .cat-modal-callout__desc {
            font-size: 13px; line-height: 1.7; color: #4338ca;
        }

        /* 管理模式 */
        .cat-manage-head {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 16px; gap: 12px;
        }
        .cat-table-wrap {
            border: 1px solid var(--sm-border, #e2e8f0);
            border-radius: 14px; overflow: hidden;
            background: #FFFFFF;
            box-shadow: 0 2px 12px rgba(15,23,42,0.04);
        }
        .cat-manage-table { margin: 0; }
        .cat-manage-table thead th {
            background: linear-gradient(90deg, rgba(124,58,237,0.06) 0%, rgba(8,145,178,0.05) 100%);
            color: #1e1b4b !important; font-weight: 700 !important; font-size: 13px;
            padding: 14px 16px !important;
            border-bottom: 1px solid var(--sm-border, #e2e8f0) !important;
            white-space: nowrap;
        }
        .cat-manage-table tbody td {
            padding: 14px 16px !important;
            border-top: 1px solid var(--sm-border, #e2e8f0) !important;
            vertical-align: middle;
            font-size: 13.5px; color: #0f172a;
        }
        .cat-manage-table tbody tr:hover td { background: rgba(124,58,237,0.03); }
        .cat-manage-table .btn-sm { min-height: 34px; padding: 4px 14px; }

        /* 交互：cat-modal 下所有 clickable 统一 pointer + 三态 */
        .cat-modal button,
        .cat-modal [onclick],
        .cat-modal .style-cat-tree > li,
        .cat-modal .btn { cursor: pointer !important; }
        .cat-modal *:focus-visible {
            outline: none !important;
            box-shadow: 0 0 0 4px var(--sm-ring, rgba(124,58,237,0.18)) !important;
        }

        /* Motion: cat-modal modal-content 入场（Expo.out + 轻微上移） */
        .cat-modal .modal-content {
            animation: catModalInKf 420ms var(--sm-ease, cubic-bezier(0.16,1,0.3,1)) both;
        }
        @keyframes catModalInKf {
            0%   { opacity: 0; transform: translateY(16px) scale(0.98); }
            60%  { opacity: 1; }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @media (prefers-reduced-motion: reduce) {
            .cat-modal * {
                animation: none !important;
                transition: none !important;
            }
            .cat-modal .modal-content { transform: none !important; opacity: 1 !important; }
            .style-cat-tree > li:hover { transform: none !important; }
        }
/* ---- 2026-09-09 组件补齐：分组管理弹窗按钮与风格弹窗同设计语言（紫青） ---- */
.cat-modal .btn.btn-primary{
    background:linear-gradient(135deg,var(--sm-primary,#7c3aed),var(--sm-secondary,#6366f1));
    border:0;color:#fff;border-radius:12px;font-weight:600;box-shadow:0 6px 16px -6px rgba(124,58,237,.45);
}
.cat-modal .btn.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);}
.cat-modal .btn.btn-primary:disabled{opacity:.55;box-shadow:none;transform:none;}
.cat-modal .btn.btn-secondary{
    background:#fff;border:1px solid #e2e8f0;color:#475569;border-radius:12px;font-weight:600;
}
.cat-modal .btn.btn-secondary:hover{border-color:#c4b5fd;color:#6d28d9;background:#faf5ff;}
/* ---- 组件自有 Toast（不依赖宿主页面） ---- */
.asp-toast-wrap{position:fixed;top:18px;right:18px;z-index:1120;display:flex;flex-direction:column;gap:10px;max-width:340px;}
.asp-toast{border:none;border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.18);overflow:hidden;}
.asp-toast .toast-body{font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;}
.asp-toast.asp-toast-ok{background:linear-gradient(135deg,#ecfdf5,#f0fdfa);color:#047857;border:1px solid #a7f3d0;}
.asp-toast.asp-toast-err{background:linear-gradient(135deg,#fef2f2,#fff7ed);color:#b91c1c;border:1px solid #fecaca;}