body { margin: 0; height: 100vh; background-color: rgba(10, 14, 23, 0.85); font-family: -apple-system, "Microsoft YaHei", sans-serif; color: #e0e0e0; display: flex; flex-direction: column; overflow: hidden; user-select: none; border-radius: 12px; border: 1px solid rgba(0, 243, 255, 0.2); box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset; }
        .title-bar { height: 35px; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; background: linear-gradient(90deg, rgba(0, 243, 255, 0.1) 0%, transparent 100%); border-bottom: 1px solid rgba(0, 243, 255, 0.1); box-sizing: border-box; -webkit-app-region: drag; }
        .title-text { color: #00f3ff; font-size: 12px; letter-spacing: 2px; font-weight: bold; }
        .window-controls { display: flex; align-items: center; gap: 8px; -webkit-app-region: no-drag; }
        .customer-quota-state { color: #72e8a5; font-size: 11px; margin-right: 6px; white-space: nowrap; }
        .customer-redeem-btn { -webkit-app-region: no-drag; min-height: 25px; padding: 0 10px; border: 1px solid rgba(0, 243, 255, .32); border-radius: 999px; background: rgba(0, 243, 255, .06); color: #8beef2; font-size: 10px; cursor: pointer; white-space: nowrap; }
        .customer-redeem-btn:hover { border-color: #00f3ff; background: rgba(0, 243, 255, .14); color: #fff; }
        .app-body { display: flex; flex: 1; position: relative; overflow: hidden; background: #20242b; }
        .motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .72; }
        
        .sidebar { width: 75px; position: relative; z-index: 1; background-color: rgba(9, 12, 17, .94); border-right: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; align-items: center; padding-top: 25px; gap: 30px; flex-shrink: 0; }
        .nav-item { width: 100%; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; cursor: pointer; color: #6b7280; font-size: 11px; transition: color 0.2s ease; }
        .nav-item::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: #00f3ff; opacity: 0; box-shadow: 0 0 10px rgba(0,243,255,.65); transition: opacity .2s ease; }
        .nav-item.active, .nav-item:hover { color: #00f3ff; text-shadow: 0 0 10px rgba(0, 243, 255, 0.45); }
        .nav-item.active::before { opacity: 1; }
        .nav-icon { width: 22px; height: 22px; display: grid; place-items: center; }
        .nav-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .nav-button { border: 0; background: transparent; font-family: inherit; margin-bottom: 18px; }
        
        /* === 瀑布流与悬浮控制台物理隔离 === */
        .main-workspace { flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1; overflow: hidden; background: rgba(45, 48, 55, .9); }
        .chat-feed { flex: 1; padding: 30px 40px 5px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; scroll-behavior: smooth; }
        .time-divider { display: flex; align-items: center; text-align: center; color: #8f9da6; font-size: 12px; margin: 10px 0; }
        .time-divider::before, .time-divider::after { content: ''; flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.11); margin: 0 15px; }

        /* === 批次母盒 UI 架构 (弹性紧致包裹优化) === */
        .batch-card { width: fit-content; max-width: 100%; box-sizing: border-box; background-color: rgba(20, 23, 29, .74); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 16px; margin-bottom: 10px; display: flex; flex-direction: column; animation: slideUp 0.3s ease-out forwards; transition: width 0.3s ease; }
        .batch-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 12px; min-width: 0; }
        .batch-prompt-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
        .batch-media-flow { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 8px; flex-wrap: nowrap; scroll-behavior: smooth; }
        .media-item-wrapper { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; width: 250px; }
        .media-item-wrapper .result-media-box, .media-item-wrapper .rendering-box { width: 100%; height: 250px; }

        @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .result-header { font-size: 12px; line-height: 1.4; }
        .result-prompt { color: #f7fafb; font-size: 13px; font-weight: 700; letter-spacing: 0; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        .result-meta { color: #aebbc3; font-size: 11px; white-space: nowrap; }
        
        .result-media-box { position: relative; height: 250px; box-sizing: border-box; border-radius: 8px; overflow: hidden; background: #000; display: flex; justify-content: center; align-items: center; cursor: pointer; border: 1px solid transparent; transition: 0.2s; width: 100%; }
        .result-media-box:hover { border-color: #00f3ff; box-shadow: 0 0 15px rgba(0, 243, 255, 0.2); }
        .result-media-box img, .result-media-box video { height: 100%; width: 100%; object-fit: contain; display: block; }

        .rendering-box { flex: 0 0 auto; height: 250px; background-color: #05090f; border: 1px dashed #00f3ff; border-radius: 8px; position: relative; display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center; box-shadow: 0 0 20px rgba(0, 243, 255, 0.05); animation: cyberPulse 2s infinite ease-in-out; box-sizing: border-box; overflow: hidden; isolation: isolate; }
        .task-loader-video { position: relative; z-index: 0; width: 136px; height: 136px; flex: 0 0 136px; object-fit: contain; mix-blend-mode: lighten; display: block; pointer-events: none; opacity: 1; }
        .rendering-box::after { display: none; }
        @keyframes cyberPulse { 0%, 100% { border-color: rgba(0, 243, 255, 0.3); box-shadow: 0 0 15px rgba(0, 243, 255, 0.05); } 50% { border-color: #ff007f; box-shadow: 0 0 25px rgba(255, 0, 127, 0.2); } }
        .rendering-text { position: relative; top: auto; left: auto; max-width: 85%; font-size: 13px; color: transparent; font-weight: 800; font-family: monospace; letter-spacing: 0; text-align: center; background: linear-gradient(90deg, #00f3ff, #ff4f9a); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 5px rgba(0,243,255,.22); z-index: 2; }
        @keyframes textBlink { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; color: #ff007f; text-shadow: 0 0 8px rgba(255,0,127,0.6); } }
        .rendering-spinner { width: 35px; height: 35px; border: 2px solid rgba(0, 243, 255, 0.1); border-top-color: #00f3ff; border-bottom-color: #ff007f; border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }

        .result-actions { display: flex; gap: 8px; margin-top: 2px; }
        .action-btn { flex: 1; justify-content: center; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.13); color: #edf2f4; padding: 5px 0; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; transition: 0.2s; white-space: nowrap; }
        .action-btn:hover { background: rgba(0, 243, 255, 0.05); border-color: rgba(0, 243, 255, 0.3); color: #00f3ff; }
        .action-btn.del:hover { background: rgba(255, 60, 92, 0.05); border-color: rgba(255, 60, 92, 0.3); color: #ff3c5c; }

        .bottom-console-wrapper { width: 100%; box-sizing: border-box; padding: 0 24px 30px; display: flex; justify-content: center; z-index: 10; flex-shrink: 0; }
        .floating-console { width: min(750px, 100%); box-sizing: border-box; background-color: rgba(15, 20, 30, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(0, 243, 255, 0.3); border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9); padding: 15px; display: flex; flex-direction: column; gap: 10px; }
        
        .gallery-container { display: flex; gap: 10px; overflow-x: auto; max-width: 100%; padding-bottom: 5px; }
        .gallery-item { position: relative; width: 60px; height: 60px; flex-shrink: 0; border-radius: 8px; border: 1px solid rgba(0, 243, 255, 0.3); overflow: hidden; background: #000; cursor: grab; user-select: none; touch-action: pan-y; }
        .gallery-item.reordering { cursor: grabbing; border-color: #00f3ff; box-shadow: 0 0 0 2px rgba(0, 243, 255, 0.22); opacity: 0.82; }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
        .gallery-item .btn-del { position: absolute; top: 2px; right: 2px; background: rgba(255, 60, 92, 0.8); color: #fff; width: 16px; height: 16px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 10px; cursor: pointer; opacity: 0; transition: 0.2s; font-weight: bold; }
        .gallery-item:hover .btn-del { opacity: 1; }

        .input-area { display: flex; gap: 15px; position: relative; align-items: flex-start;}
        .upload-box { width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(0, 243, 255, 0.4); border-radius: 10px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; color: #00f3ff; font-size: 18px; font-weight: 500; cursor: pointer; transition: 0.3s; }
        .prompt-input { flex: 1; min-height: 72px; max-height: 150px; box-sizing: border-box; overflow-y: auto; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; font-size: 16px; color: #fff; outline: none; padding: 13px 14px; font-family: inherit; line-height: 1.6; cursor: text; transition: 0.2s; }
        .prompt-input[empty="true"]::before { content: attr(placeholder); color: #4b5563; pointer-events: none; }
        .prompt-input.drag-over { background: rgba(0, 243, 255, 0.1) !important; border-color: rgba(0, 243, 255, 0.5) !important; box-shadow: 0 0 15px rgba(0, 243, 255, 0.2) inset; }

        .control-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
        .controls-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
        .custom-select { position: relative; user-select: none; }
        .select-trigger { background-color: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); padding: 7px 26px 7px 12px; border-radius: 8px; font-size: 13px; color: #d1d5db; cursor: pointer; transition: 0.2s; white-space: nowrap; }
        .select-trigger:hover { border-color: rgba(0, 243, 255, 0.5); color: #fff; }
        .select-trigger::after { content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 4px solid #00f3ff; }
        .select-options { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 120px; max-height: 350px; overflow-y: auto; background-color: #0d111a; border: 1px solid rgba(0, 243, 255, 0.4); border-radius: 8px; box-shadow: 0 -5px 25px rgba(0,0,0,0.9); display: none; flex-direction: column; z-index: 100; }
        .custom-select.open .select-options { display: flex; }
        .custom-select.open .select-trigger { border-color: #00f3ff; color: #fff; box-shadow: 0 0 10px rgba(0,243,255,0.2) inset;}
        .option-item { padding: 9px 12px; font-size: 12px; color: #9ca3af; cursor: pointer; white-space: nowrap; transition: 0.1s;}
        .option-item:hover { background-color: rgba(0, 243, 255, 0.1); color: #00f3ff; }
        .option-item.selected { color: #00f3ff; font-weight: bold; background-color: rgba(0, 243, 255, 0.05); }

        #modeSelect .select-trigger { color: #ff007f; background-color: rgba(255, 0, 127, 0.05); border-color: rgba(255, 0, 127, 0.3); }
        #modeSelect .select-trigger::after { border-bottom-color: #ff007f; }
        
        .submit-btn { background: rgba(7, 16, 25, 0.96); color: #8af7fb; border: 1px solid rgba(0, 243, 255, 0.34); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: default; box-shadow: 0 0 12px rgba(0, 243, 255, 0.08) inset, 0 6px 16px rgba(0,0,0,.35); transition: 0.2s; flex-shrink: 0; opacity: 0.35; pointer-events: none; }
        .submit-btn.active { opacity: 1; pointer-events: auto; cursor: pointer; background: linear-gradient(145deg, rgba(0,243,255,.16), rgba(255,0,127,.08)); border-color: rgba(0,243,255,.62); box-shadow: 0 0 14px rgba(0, 243, 255, 0.18) inset, 0 0 16px rgba(0, 243, 255, 0.2); }
        .submit-btn.active:hover { transform: translateY(-1px); color: #fff; border-color: rgba(255,0,127,.58); box-shadow: 0 0 16px rgba(255,0,127,.12) inset, 0 0 20px rgba(0,243,255,.28); }

        .preview-modal { position: fixed; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 24px 32px; background: rgba(0,0,0,0.92); backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; overflow: hidden; z-index: 1000; }
        .preview-modal.show { display: flex; }
        .preview-stage { width: min(84vw, 1500px); max-width: 84vw; max-height: calc(100vh - 48px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
        .preview-content-box { flex: 0 0 auto; width: min(80vw, 1440px); height: min(76vh, calc(100vh - 116px)); max-width: 80vw; max-height: 76vh; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #000; }
        .preview-content-box img, .preview-content-box video { display: block; border-radius: 10px; border: 1px solid rgba(0,243,255,0.4); box-shadow: 0 0 40px rgba(0,243,255,0.1); }
        .preview-content-box video { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; background: #000; }
        .preview-modal.image-preview .preview-stage { width: min(92vw, 1680px); max-width: 92vw; max-height: calc(100vh - 48px); }
        .preview-modal.image-preview .preview-content-box { width: min(88vw, 1600px); height: min(82vh, calc(100vh - 116px)); max-width: 88vw; max-height: 82vh; }
        .preview-modal.image-preview .preview-content-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
        .preview-close { position: absolute; top: 30px; right: 40px; color: #fff; font-size: 40px; cursor: pointer; font-weight: 300; transition: 0.2s; z-index: 1001;}
        .preview-close:hover { color: #ff3c5c; transform: scale(1.1); }

        /* === 核弹级防泄密：彻底剥夺 <img> 的系统物理拖拽属性 === */
        img { -webkit-user-drag: none; }
        
        /* === 预览控制台与拖拽手势样式 === */
        .preview-controls { position: static; display: flex; gap: 20px; z-index: 1002; background: rgba(15, 20, 30, 0.85); padding: 7px 22px; border-radius: 30px; border: 1px solid rgba(0,243,255,0.3); backdrop-filter: blur(8px); box-shadow: 0 5px 20px rgba(0,0,0,0.5); }
        .preview-btn { background: none; border: none; color: #fff; font-size: 26px; font-weight: 300; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; }
        .preview-btn:hover { background: rgba(0,243,255,0.2); color: #00f3ff; }
        .preview-img-draggable { cursor: grab; transition: transform 0.1s ease-out; }
        .preview-img-draggable:active { cursor: grabbing; transition: none; }

        .custom-alert-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; z-index: 9999; }
        .custom-alert-box { background: rgba(15, 20, 30, 0.95); border: 1px solid #ff007f; border-radius: 12px; padding: 30px; width: 360px; text-align: center; box-shadow: 0 0 40px rgba(255, 0, 127, 0.3); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .custom-alert-icon { font-size: 40px; margin-bottom: 15px; }
        .custom-alert-title { color: #ff007f; font-size: 18px; font-weight: bold; margin-bottom: 10px; letter-spacing: 1px; }
        .custom-alert-msg { color: #d1d5db; font-size: 13px; line-height: 1.6; margin-bottom: 25px; }
        .custom-alert-btn { background: rgba(255, 0, 127, 0.1); border: 1px solid #ff007f; color: #ff007f; padding: 10px 30px; border-radius: 6px; cursor: pointer; transition: 0.2s; font-size: 14px; font-weight: bold; outline: none; }
        .custom-alert-btn:hover { background: #ff007f; color: #fff; box-shadow: 0 0 15px rgba(255, 0, 127, 0.5); }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(0, 243, 255, 0.2); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(0, 243, 255, 0.5); }
        
        .vendor-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #aaa; padding: 8px 25px; border-radius: 6px; cursor: pointer; transition: 0.3s; font-weight: bold; }
        .vendor-btn.active { background: rgba(0,243,255,0.1); border-color: #00f3ff; color: #00f3ff; box-shadow: 0 0 15px rgba(0,243,255,0.2); }
        .vendor-btn:hover { border-color: rgba(0,243,255,0.5); color: #fff; }

        .mention-capsule { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 243, 255, 0.1); border: 1px solid rgba(0, 243, 255, 0.3); border-radius: 4px; padding: 2px 6px 2px 2px; margin: 0 4px; font-size: 13px; font-weight: 500; cursor: default; vertical-align: middle; }
        .mention-capsule img { width: 16px; height: 16px; border-radius: 2px; object-fit: cover; cursor: pointer; }
        .mention-capsule span { color: #00f3ff; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .mention-menu { position: absolute; bottom: 100%; left: 65px; margin-bottom: 10px; background-color: #0d111a; border: 1px solid rgba(0, 243, 255, 0.4); border-radius: 8px; box-shadow: 0 -5px 25px rgba(0,0,0,0.9); display: none; flex-direction: column; z-index: 100; min-width: 250px; max-height: 200px; overflow-y: auto; }
        .mention-menu.show { display: flex; }
        .mention-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: 0.1s; border-bottom: 1px solid rgba(255,255,255,0.02); }
        .mention-item:hover { background-color: rgba(0, 243, 255, 0.1); }
        .mention-item img { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; }
        .mention-item .m-name { color: #e0e0e0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

        .quota-band { width: min(980px, calc(100% - 48px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(0,243,255,.2); background: rgba(8,12,19,.72); margin: 12px auto 20px; }
        .quota-tier { min-width: 0; min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-right: 1px solid rgba(0,243,255,.12); }
        .quota-tier:last-child { border-right: 0; }
        .quota-value { flex: 0 0 auto; width: 34px; color: #00f3ff; font: 800 28px/1 monospace; text-align: center; }
        .quota-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
        .quota-copy strong { color: #f3f4f6; font-size: 12px; }
        .quota-copy span { color: #788290; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
        .task-card { width: min(620px, calc(100% - 32px)) !important; }
        .task-card .batch-header { align-items: flex-start; gap: 16px; }
        .task-card .batch-header > div { min-width: 0; flex: 1; }
        .task-card .result-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; color: #9eb0ba; font-size: 12px; font-weight: 700; line-height: 1.5; }
        .task-meta-primary { color: #dbe8ec; }
        .task-meta-divider { color: rgba(0,243,255,.35); }
        .task-meta-secondary { color: #00dce8; }
        .task-card .batch-media-flow { overflow-x: hidden; }
        .task-card .media-item-wrapper { width: 100%; }
        .task-card .batch-media-flow.image-result-strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
        .task-card .image-result-strip .image-result-item { width: 100%; flex: 0 0 100%; scroll-snap-align: start; }
        .image-result-item .result-media-box { position: relative; }
        .image-result-index { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(5,9,15,.72); color: #eef7f8; font-size: 10px; line-height: 1; pointer-events: none; }
        .task-shared-actions:empty { display: none; }
        .task-card .media-item-wrapper .result-media-box,
        .task-card .media-item-wrapper .rendering-box { height: auto; aspect-ratio: var(--task-aspect, 16 / 9); }
        .task-card .result-media-box video { object-fit: contain; background: #05090f; }
        .result-media-box.video-load-failed::after { content:'视频加载失败，请点击预览或下载'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:14px; color:#ff9aa8; background:#05090f; font-size:11px; text-align:center; pointer-events:none; }
        .task-status { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(0,243,255,.28); color: #00f3ff; font-size: 11px; font-weight: 700; letter-spacing: 0; }
        .task-status.done { color: #49f58b; border-color: rgba(73,245,139,.35); }
        .task-status.failed { color: #ff5277; border-color: rgba(255,82,119,.35); }
        .task-status-stack { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
        .task-elapsed { max-width: 112px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: rgba(6,10,15,.42); color: #b9c7ce; font-size: 9px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .task-elapsed:empty { display: none; }
        .task-partial-warning { width: 100%; margin-top: 8px; color: #ff9ab0; font-size: 11px; font-weight: 700; line-height: 1.45; }
        .task-error { position: relative; z-index: 2; max-width: 85%; margin-top: 2px; color: #ff8aa3; font-size: 13px; font-weight: 700; letter-spacing: 0; text-align: center; line-height: 1.5; text-shadow: 0 1px 4px rgba(0,0,0,.82); }
        .task-failed { border-color: rgba(255,82,119,.5); animation: none; }
        .task-done { border-color: rgba(73,245,139,.5); animation: none; }
        .asset-library { width: 100%; max-width: 1240px; margin: 0 auto; }
        .assets-head { width: 100%; display: flex; align-items: baseline; justify-content: space-between; color: #fff; padding-bottom: 16px; border-bottom: 1px solid rgba(0,243,255,.12); }
        .assets-head strong { font-size: 22px; letter-spacing: 1px; }
        .assets-head span { color: #788290; font-size: 12px; }
        .asset-day-section { width: 100%; margin-top: 24px; }
        .asset-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
        .asset-day-head strong { color: #e8f1f4; font-size: 14px; font-weight: 800; }
        .asset-day-head span { color: #667580; font-size: 11px; }
        .asset-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
        .asset-item { min-width: 0; overflow: hidden; border: 1px solid rgba(0,243,255,.16); border-radius: 6px; background: rgba(8,12,19,.62); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
        .asset-item:hover { transform: translateY(-2px); border-color: rgba(0,243,255,.38); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
        .asset-item video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; }
        .asset-meta { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 12px; }
        .asset-meta strong { color: #edf3f5; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .asset-info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
        .asset-info-row span:first-child { color: #9cabb4; font-size: 12px; font-weight: 700; }
        .asset-info-row span:last-child { color: #00dce8; font-size: 12px; font-weight: 700; text-align: right; }
        .asset-meta span, .asset-empty { color: #788290; font-size: 11px; }
        .fixed-select { pointer-events: none; opacity: .9; }
        .fixed-select .select-trigger { padding-right: 12px; cursor: default; }
        .fixed-select .select-trigger::after { display: none; }
        #modelSelect .select-trigger { display: inline-flex; align-items: center; gap: 7px; padding-left: 8px; }
        .model-grid-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; }
        #durationSelect { pointer-events: none; opacity: .9; }
        #durationSelect .select-trigger { padding-right: 12px; cursor: default; }
        #durationSelect .select-trigger::after { display: none; }
        #submitBtn.busy { opacity: .55; }
        .sidebar-spacer { flex: 1; }
        .account-nav { margin-bottom: 18px; }
        .account-nav strong { color: #dce8ec; font-size: 10px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .account-panel { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 26px 0 40px; }
        .account-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 1px solid rgba(0,243,255,.2); padding: 18px 0; }
        .account-head h2 { margin: 0; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: 0; }
        .account-head p { margin: 6px 0 0; color: #788290; font-size: 12px; }
        .account-balance { flex: 0 0 auto; color: #00f3ff; font: 800 22px/1 monospace; padding: 9px 12px; border: 1px solid rgba(0,243,255,.2); background: rgba(0,243,255,.035); }
        .account-section { margin-top: 16px; border: 1px solid rgba(0,243,255,.16); border-radius: 6px; background: rgba(8,12,19,.66); padding: 18px; }
        .account-section h3 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.055); font-size: 13px; font-weight: 800; color: #e5edf1; }
        .account-row { display: flex; gap: 8px; align-items: center; }
        .account-row input { flex: 1; min-width: 0; height: 38px; border: 1px solid rgba(0,243,255,.24); background: rgba(0,0,0,.35); color: #fff; padding: 0 12px; outline: none; }
        .account-row button, .logout-btn { height: 38px; border: 1px solid #00f3ff; background: rgba(0,243,255,.08); color: #00f3ff; padding: 0 16px; cursor: pointer; }
        .logout-btn { border-color: rgba(255,82,119,.55); color: #ff6684; background: rgba(255,82,119,.06); }
        .history-list { display: flex; flex-direction: column; }
        #quotaHistory { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; }
        .history-item { min-height: 46px; display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.055); font-size: 11px; }
        .history-item:last-child { border-bottom: 0; }
        .history-item span { color: #81909c; }
        .history-item time { color: #5f6d78; font-family: monospace; }
        .auth-overlay { position: fixed; inset: 0; z-index: 12000; display: none; align-items: center; justify-content: center; overflow: hidden; background: #05080d; }
        .auth-overlay.show { display: flex; }
        .redeem-overlay { position: fixed; inset: 0; z-index: 12100; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 11, .56); backdrop-filter: blur(12px); }
        .redeem-overlay[hidden] { display: none; }
        .redeem-box { position: relative; width: min(420px, calc(100% - 32px)); box-sizing: border-box; border: 1px solid rgba(0, 243, 255, .42); background: rgba(8, 15, 23, .9); padding: 26px; box-shadow: 0 24px 80px rgba(0, 0, 0, .65); backdrop-filter: blur(22px); }
        .redeem-box h2 { margin: 0; color: #00f3ff; font-size: 18px; }
        .redeem-box p { margin: 8px 0 18px; color: #91a2ae; font-size: 11px; line-height: 1.6; }
        .redeem-box input { width: 100%; height: 42px; box-sizing: border-box; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(4, 9, 15, .8); color: #fff; outline: none; }
        .redeem-box input:focus { border-color: rgba(0,243,255,.7); box-shadow: 0 0 0 3px rgba(0,243,255,.08); }
        .redeem-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: #aebdc6; font-size: 24px; cursor: pointer; }
        .redeem-error { min-height: 18px; margin-top: 9px; color: #ff7a91; font-size: 11px; }
        .redeem-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
        .redeem-actions button { min-height: 34px; padding: 0 14px; border-radius: 4px; cursor: pointer; font-size: 11px; }
        .redeem-cancel { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #aebdc6; }
        .redeem-submit { border: 1px solid rgba(0,243,255,.6); background: rgba(0,243,255,.12); color: #8ff5f7; }
        .redeem-submit:hover { background: rgba(0,243,255,.22); color: #fff; }
        .auth-shade { position: absolute; inset: 0; background: rgba(3, 7, 12, .7); backdrop-filter: blur(1px); }
        .auth-box { position: relative; z-index: 1; width: min(454px, calc(100% - 32px)); box-sizing: border-box; border: 1px solid rgba(0,243,255,.38); background: rgba(8, 13, 21, .9); padding: 26px; box-shadow: 0 20px 70px rgba(0,0,0,.72); backdrop-filter: blur(12px); }
        .auth-box h2 { margin: 0; color: #00f3ff; font-size: 18px; }
        .auth-box p { margin: 7px 0 20px; color: #7c8b97; font-size: 11px; }
        .auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; border: 1px solid rgba(255,255,255,.1); }
        .auth-tabs button { height: 36px; border: 0; background: transparent; color: #7f8d98; cursor: pointer; }
        .auth-tabs button.active { background: rgba(0,243,255,.1); color: #00f3ff; }
        .auth-box input { width: 100%; height: 40px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,.12); background: #080d14; color: #fff; padding: 0 12px; outline: none; box-sizing: border-box; }
        .auth-pane[hidden] { display: none; }
        .remember-session { display: flex; align-items: center; gap: 7px; margin: 2px 0 14px; color: #94a2ad; font-size: 11px; cursor: pointer; }
        .remember-session input { width: 15px; height: 15px; margin: 0; accent-color: #00dce8; }
        .auth-submit { width: 100%; height: 40px; border: 1px solid #00f3ff; background: #00f3ff; color: #061018; font-weight: 800; cursor: pointer; }
        .auth-error { min-height: 20px; margin-top: 10px; color: #ff6684; font-size: 11px; }

        @media (min-width: 1100px) {
            #tab-create { position: relative; isolation: isolate; }
            #tab-create .chat-feed {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 190px;
                width: 484px;
                max-width: 46%;
                box-sizing: border-box;
                padding: 28px 18px 18px;
                align-items: stretch;
                gap: 16px;
                border-left: 1px solid rgba(0,243,255,.09);
                background: rgba(28, 31, 38, .78);
            }
            #tab-create .time-divider { width: 100%; margin: 0 0 6px; }
            #tab-create .task-card { width: 100%; max-width: none; margin: 0; padding: 14px; }
            #tab-create .batch-header { margin-bottom: 12px; padding-bottom: 10px; }
            #tab-create .batch-media-flow { width: 100%; padding-bottom: 0; overflow: visible; }
            #tab-create .media-item-wrapper { width: 100%; min-width: 0; }
            #tab-create .media-item-wrapper .result-media-box,
            #tab-create .media-item-wrapper .rendering-box {
                width: 100%;
                height: auto;
                aspect-ratio: 16 / 9;
            }
            #tab-create .bottom-console-wrapper {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                box-sizing: border-box;
            }
        }

        @media (max-width: 760px) {
            .title-bar { height: 40px; }
            .app-body { height: calc(100vh - 40px); }
            .sidebar { width: 62px; }
            .nav-item { padding: 16px 6px; font-size: 10px; }
            .main-workspace { min-width: 0; }
            .chat-feed { padding: 8px 0 220px; }
            .quota-band { width: calc(100% - 20px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .quota-tier:nth-child(2) { border-right: 0; }
            .quota-tier:nth-child(-n+2) { border-bottom: 1px solid rgba(0,243,255,.12); }
            .bottom-console-wrapper { left: 62px; padding: 10px; }
            .floating-console { width: 100%; padding: 12px; }
            .input-area { align-items: flex-start; }
            .prompt-input { min-height: 72px; max-height: 110px; }
            .control-bar { align-items: flex-end; gap: 8px; }
            .controls-left { gap: 6px; }
            .custom-select .select-trigger { max-width: 132px; }
            .task-card { width: calc(100% - 20px) !important; }
            #tab-assets { padding: 20px !important; }
        }

        /* 客户版只调整业务可见范围；控件与布局沿用原版源码。 */
        #durationSelect { pointer-events: auto; opacity: 1; }
        #durationSelect .select-trigger { padding-right: 28px; cursor: pointer; }
        #durationSelect .select-trigger::after { display: block; }
        #durationSelect .option-item.locked { color: #59636f; cursor: not-allowed; background: transparent; }
        #durationSelect .option-item.locked:hover { color: #59636f; background: transparent; }
        .task-card { width: min(440px, calc(100% - 24px)) !important; }
        .task-card .media-item-wrapper .result-media-box,
        .task-card .media-item-wrapper .rendering-box { max-height: 270px; }
        .task-card .result-media-box video { cursor: zoom-in; }
        .preview-content-box video { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; background: #000; }
        .task-card .result-actions { flex-wrap: wrap; }
        .task-card .action-btn { min-width: 96px; }
        .asset-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 380px)); justify-content: start; }
        .asset-item .result-media-box { height: auto; aspect-ratio: 16 / 9; }
        .task-error-panel { min-height: 150px; display: flex; align-items: center; justify-content: center; padding: 24px; border: 1px dashed rgba(255,82,119,.34); background: rgba(22,8,14,.58); color: #ff8aa3; font-size: 12px; line-height: 1.7; text-align: center; }
        .task-completed-panel { min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 24px; border: 1px dashed rgba(73,245,139,.28); background: rgba(6,24,18,.5); color: #66eaa0; font-size: 12px; text-align: center; }
        .connection-state { min-width: 0; color: #74818d; font-size: 11px; white-space: nowrap; }
        .connection-state.reconnecting { color: #ffc45e; }
        .image-showcase-layer { position: static; inset: auto; z-index: 2; display: flex; width:100%; align-items: stretch; justify-content: flex-start; box-sizing: border-box; padding: 0; pointer-events: none; }
        .image-showcase-layer[hidden] { display: none !important; }
        .image-showcase-card { width: min(440px, 100%) !important; margin: 0; pointer-events: auto; }
        .image-showcase-card .batch-header { align-items: flex-start; }
        .image-showcase-card .batch-media-flow, .image-showcase-card .media-item-wrapper { width: 100%; }
        .image-showcase-card .image-result-box { width: 100%; height: auto; aspect-ratio: 16 / 9; cursor: default; background: #05090f; }
        .image-showcase-card .image-result-box img { width: 100%; height: 100%; object-fit: contain; }
        .image-group-btn { flex: 0 0 auto; height: 30px; padding: 0 10px; border: 1px solid rgba(0,243,255,.35); background: rgba(0,243,255,.06); color: #00dce8; font-size: 11px; cursor: pointer; }
        .task-card .result-media-box video::-webkit-media-controls,
        .asset-item .result-media-box video::-webkit-media-controls { display: none !important; }
        .task-card .result-media-box video,
        .asset-item .result-media-box video { pointer-events: none; }
        @media (min-width: 1100px) {
            #tab-create .chat-feed { width: 484px; max-width: 46%; bottom: var(--console-reserved-space, 222px); }
            #tab-create .task-card { width: min(440px, 100%) !important; }
        }
        @media (max-width: 760px) {
            .task-card { width: calc(100% - 12px) !important; }
            .asset-grid { grid-template-columns: minmax(0, 1fr); }
            .task-card .media-item-wrapper .result-media-box,
            .task-card .media-item-wrapper .rendering-box { max-height: 220px; }
        }

        @media (max-width: 1099px) {
            .image-showcase-layer.in-feed { position: static; inset: auto; width: 100%; flex: 0 0 auto; overflow: visible; padding: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .motion-canvas { opacity: .42; }
        }

        #fileInput { display: none; }
        .upload-box.reference-disabled,
        .material-dock-grid.reference-disabled .material-dock-use { opacity: .36; pointer-events: none; cursor: not-allowed; }
        #tab-assets { display: none; padding: 40px; overflow-y: auto; flex-direction: column; }
        #previewControls { display: none; }
        .preview-close { border: 0; padding: 0; background: transparent; }

        /* Customer material settings and shared media geometry. */
        .app-body { background: #20242b; }
        .main-workspace { background: rgba(45, 48, 55, .78); }
        .sidebar { background-color: rgba(18, 22, 29, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
        .floating-console { background-color: rgba(24, 29, 38, .76); border-color: rgba(255, 255, 255, .12); box-shadow: 0 14px 34px rgba(8, 12, 18, .34); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
        .material-item {
            background: rgba(8, 12, 19, .74);
            border: 1px solid rgba(255, 255, 255, .12);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
        }
        .task-card,
        .image-showcase-card {
            width: min(440px, calc(100% - 24px)) !important;
            min-width: 0;
            padding: 0 !important;
            margin: 0;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .asset-item {
            width: 100%;
            min-width: 0;
            padding: 0 !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .task-card .batch-header,
        .image-showcase-card .batch-header { margin-bottom: 12px; padding-bottom: 0; border-bottom: 0; }
        .task-card .result-meta,
        .image-showcase-card .result-meta { gap: 6px; }
        .task-card .task-meta-divider,
        .image-showcase-card .task-meta-divider { display: none; }
        .task-card .task-meta-primary,
        .task-card .task-meta-secondary,
        .image-showcase-card .task-meta-primary,
        .image-showcase-card .task-meta-secondary {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            box-sizing: border-box;
            padding: 2px 8px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
            background: rgba(255, 255, 255, .1);
            color: #d7e2e7;
            font-size: 10px;
            font-weight: 600;
        }
        .task-card .media-item-wrapper,
        .image-showcase-card .media-item-wrapper { width: 100%; min-width: 0; }
        .task-card .media-item-wrapper .result-media-box,
        .task-card .media-item-wrapper .rendering-box,
        .image-showcase-card .image-result-box,
        .asset-item .result-media-box {
            width: 100%;
            height: auto;
            max-height: none;
            aspect-ratio: 16 / 9;
            background: transparent;
            border: 0;
            box-shadow: none;
        }
        .task-card .result-media-box video,
        .asset-item .result-media-box video,
        .image-showcase-card .image-result-box img { width: 100%; height: 100%; object-fit: contain; background: transparent; }
        .task-card .result-media-box:hover,
        .image-showcase-card .image-result-box:hover,
        .asset-item .result-media-box:hover { border-color: transparent; box-shadow: none; }
        .task-card .media-item-wrapper .result-media-box,
        .task-card .media-item-wrapper .rendering-box,
        .asset-item .result-media-box {
            border: 1px solid rgba(74, 224, 235, .72);
            box-shadow: 0 0 12px rgba(0, 220, 232, .16), inset 0 0 0 1px rgba(255, 255, 255, .025);
        }
        .task-card .media-item-wrapper .result-media-box:hover,
        .asset-item .result-media-box:hover {
            border-color: rgba(102, 239, 246, .92);
            box-shadow: 0 0 16px rgba(0, 226, 237, .22), inset 0 0 0 1px rgba(255, 255, 255, .04);
        }
        .task-card.image-showcase-card .media-item-wrapper .image-result-box,
        .task-card.image-showcase-card .media-item-wrapper .image-result-box:hover { border: 0; box-shadow: none; }
        .task-card .result-actions,
        .image-showcase-card .result-actions { justify-content: flex-start; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
        .task-card .action-btn,
        .image-showcase-card .action-btn {
            flex: 0 0 auto;
            min-width: 0 !important;
            min-height: 34px;
            box-sizing: border-box;
            padding: 0 12px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 6px;
            background: rgba(255, 255, 255, .12);
            color: #f0f4f6;
            box-shadow: 0 4px 12px rgba(8, 11, 16, .18);
        }
        .task-card .action-btn:hover,
        .image-showcase-card .action-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); color: #fff; }
        .task-card .action-btn.del:hover,
        .image-showcase-card .action-btn.del:hover { color: #ff8da0; border-color: rgba(255, 113, 139, .28); background: rgba(255, 88, 119, .08); }
        .action-icon { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .image-group-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; height: 24px; padding: 0 8px; border-radius: 999px; border-color: rgba(117, 166, 255, .34); background: rgba(85, 135, 235, .1); color: #91b5ff; }
        .image-group-btn .action-icon { width: 12px; height: 12px; flex-basis: 12px; }
        .asset-item .asset-meta { padding: 10px 0 0; }
        .gallery-item .btn-save {
            position: absolute;
            right: 2px;
            bottom: 2px;
            width: 18px;
            height: 18px;
            padding: 0;
            border: 1px solid rgba(0, 243, 255, .5);
            border-radius: 50%;
            background: rgba(5, 12, 18, .9);
            color: #00f3ff;
            font: 700 13px/16px monospace;
            cursor: pointer;
            opacity: 0;
            transition: opacity .2s ease, background .2s ease;
        }
        .gallery-item:hover .btn-save,
        .gallery-item:focus-within .btn-save { opacity: 1; }
        .gallery-item .btn-save:hover { background: rgba(0, 243, 255, .18); }

        #tab-settings { display: none; padding: 40px; overflow-y: auto; flex-direction: column; box-sizing: border-box; }
        .material-library { width: 100%; max-width: 1240px; margin: 0 auto; }
        .material-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(0, 243, 255, .16); }
        .material-head h2 { margin: 0; color: #f4f7f8; font-size: 22px; letter-spacing: 0; }
        .material-head p { margin: 7px 0 0; color: #7c8994; font-size: 12px; line-height: 1.5; }
        .material-head-actions { display:flex; align-items:center; gap:10px; }
        .material-head-actions > span { flex:0 0 auto; color:#00dce8; font-size:12px; }
        .material-head-actions button { height:34px; padding:0 12px; border:1px solid rgba(0,243,255,.36); background:rgba(0,243,255,.07); color:#00e9f1; cursor:pointer; }
        .project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-top:16px; }
        .project-card { min-width:0; display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px; padding:8px; border:1px solid rgba(255,255,255,.1); background:rgba(8,12,19,.48); cursor:pointer; }
        .project-card.active { border-color:rgba(0,243,255,.58); background:rgba(0,243,255,.055); }
        .project-cover { width:76px; aspect-ratio:16/10; overflow:hidden; display:grid; place-items:center; background:#080d14; color:#64717c; font-size:10px; }
        .project-cover img { width:100%; height:100%; object-fit:cover; }
        .project-copy { min-width:0; display:flex; flex-direction:column; }
        .project-copy strong { color:#edf4f6; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .project-copy span { margin-top:4px; color:#788792; font-size:9px; }
        .project-actions { display:flex; gap:5px; margin-top:auto; }
        .project-actions button { height:24px; padding:0 7px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.035); color:#9eabb4; font-size:9px; cursor:pointer; }
        .project-actions button:hover { color:#00e8f0; border-color:rgba(0,232,240,.38); }
        .project-actions button.danger:hover { color:#ff7890; border-color:rgba(255,120,144,.38); }
        .material-boundary { margin-top: 16px; padding: 11px 13px; border-left: 2px solid rgba(255, 189, 68, .7); background: rgba(255, 189, 68, .055); color: #aab1b8; font-size: 11px; line-height: 1.6; }
        .material-toolbar { display: inline-grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .2); }
        .material-toolbar button { min-width: 84px; height: 36px; padding: 0 14px; border: 0; border-right: 1px solid rgba(255, 255, 255, .08); background: transparent; color: #7f8b96; cursor: pointer; }
        .material-toolbar button:last-child { border-right: 0; }
        .material-toolbar button.active { background: rgba(0, 243, 255, .1); color: #00f3ff; }
        .material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); gap: 14px; margin-top: 18px; justify-content: start; }
        .material-item { min-width: 0; overflow: hidden; border-radius: 6px; }
        .material-thumb { width: 100%; aspect-ratio: 16 / 9; background: #05090f; border-bottom: 1px solid rgba(255, 255, 255, .08); }
        .material-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
        .material-copy { min-width: 0; padding: 11px; }
        .material-copy strong { display: block; color: #edf3f5; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .material-copy span { display: block; margin-top: 4px; color: #75828d; font-size: 10px; }
        .material-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; padding: 0 11px 11px; }
        .material-actions button { height: 32px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .035); color: #bcc6cd; cursor: pointer; }
        .material-actions button:hover { border-color: rgba(0, 243, 255, .45); color: #00f3ff; }
        .material-actions .danger { width: 36px; color: #ff718b; }
        .material-empty { grid-column: 1 / -1; min-height: 160px; display: grid; place-items: center; border: 1px dashed rgba(255, 255, 255, .1); color: #687580; font-size: 12px; }

        .material-editor-overlay { position: fixed; inset: 0; z-index: 13000; display: none; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box; background: rgba(0, 0, 0, .76); backdrop-filter: blur(8px); }
        .material-editor-overlay.show { display: flex; }
        .material-editor { width: min(560px, 100%); display: grid; grid-template-columns: minmax(180px, .9fr) minmax(220px, 1.1fr); gap: 18px; padding: 18px; box-sizing: border-box; border: 1px solid rgba(0, 243, 255, .3); background: rgba(8, 13, 21, .96); box-shadow: 0 24px 70px rgba(0, 0, 0, .62); }
        .material-editor > img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #05090f; border: 1px solid rgba(255, 255, 255, .1); }
        .material-editor-fields { min-width: 0; display: flex; flex-direction: column; }
        .material-editor h3 { margin: 0 0 18px; color: #f1f5f7; font-size: 16px; }
        .material-editor label { margin: 0 0 6px; color: #7d8b96; font-size: 11px; }
        .material-editor input,
        .material-editor select { width: 100%; height: 38px; margin-bottom: 14px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .14); background: #080d14; color: #fff; padding: 0 11px; outline: none; }
        .material-editor input:focus,
        .material-editor select:focus { border-color: rgba(0, 243, 255, .62); }
        .material-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
        .material-editor-actions button { height: 36px; min-width: 76px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: #aeb8c0; cursor: pointer; }
        .material-editor-actions button.primary { border-color: #00f3ff; background: rgba(0, 243, 255, .1); color: #00f3ff; }

        @media (min-width: 1100px) {
            #tab-create .chat-feed { background: rgba(34, 38, 46, .58); border-left-color: rgba(255, 255, 255, .1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
            #tab-create .task-card { width: min(440px, 100%) !important; padding: 0 !important; }
        }
        @media (max-width: 760px) {
            .task-card,
            .image-showcase-card { width: calc(100% - 12px) !important; max-width: calc(100% - 12px); box-sizing: border-box; }
            .task-card .media-item-wrapper .result-media-box,
            .task-card .media-item-wrapper .rendering-box { max-height: none; }
            #tab-settings { padding: 20px 12px; }
            .material-head { align-items: flex-start; }
            .material-head-actions { align-items:flex-end; flex-direction:column; }
            .material-head h2 { font-size: 18px; }
            .project-grid { grid-template-columns:minmax(0,1fr); }
            .material-grid { grid-template-columns: minmax(0, 1fr); }
            .material-toolbar { width: 100%; }
            .material-toolbar button { min-width: 0; padding: 0 8px; }
            .gallery-item .btn-save { opacity: 1; }
            .material-editor { grid-template-columns: minmax(0, 1fr); max-height: calc(100vh - 36px); overflow-y: auto; }
            .material-editor > img { max-height: 220px; aspect-ratio: 16 / 9; }
        }
        @media (max-width: 1099px) {
            .image-showcase-layer.in-feed { padding-left: 0; padding-right: 0; }
        }

        /* Permanent result lanes: video stays left, images stay right, composer floats above both. */
        .result-workspace { min-width: 0; min-height: 0; }
        .bottom-console-wrapper { background: transparent; pointer-events: none; }
        .floating-console { pointer-events: auto; }
        .control-bar { border-top: 0; }

        @media (min-width: 1100px) {
            #tab-create {
                --result-width: 360px;
                --result-height: 203px;
            }

            #tab-create .material-dock {
                bottom: 0;
            }

            #tab-create .result-workspace {
                position: absolute;
                z-index: 2;
                top: 0;
                right: 0;
                bottom: 0;
                left: var(--material-rail);
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                overflow: hidden;
            }

            #tab-create .result-workspace > .chat-feed {
                position: static;
                inset: auto;
                width: 100%;
                height: 100%;
                min-width: 0;
                max-width: none;
                min-height: 0;
                margin: 0;
                padding: 28px 8px calc(var(--console-reserved-space, 222px) + 24px);
                box-sizing: border-box;
                align-content: start;
                align-items: start;
                justify-content: start;
                grid-auto-flow: row;
                grid-auto-rows: max-content;
                column-gap: 16px;
                row-gap: 20px;
                overflow-x: hidden;
                overflow-y: auto;
                border: 0;
                background: rgba(34, 38, 46, .34);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                overscroll-behavior: contain;
                scroll-padding-bottom: calc(var(--console-reserved-space, 222px) + 24px);
            }

            #tab-create .result-workspace > .video-feed {
                grid-template-columns: repeat(auto-fill, var(--result-width));
                border-right: 1px solid rgba(255, 255, 255, .08);
            }

            #tab-create .result-workspace > .image-feed {
                grid-template-columns: var(--result-width);
            }

            #tab-create .result-workspace .time-divider,
            #tab-create .result-workspace .asset-empty[data-empty-state] {
                grid-column: 1 / -1;
            }

            #tab-create .result-workspace .image-showcase-layer {
                position: static;
                inset: auto;
                grid-column: 1;
                width: var(--result-width);
                min-width: 0;
                padding: 0;
            }

            #tab-create .bottom-console-wrapper {
                z-index: 10;
                background: transparent;
            }
        }

        @media (max-width: 1099px) {
            #tab-create .result-workspace {
                order: 3;
                flex: 0 0 auto;
                display: flex;
                flex-direction: column;
                width: 100%;
                overflow: visible;
            }

            #tab-create .result-workspace > .chat-feed {
                position: static;
                inset: auto;
                width: 100%;
                max-width: none;
                min-height: 0;
                padding: 16px 12px;
                box-sizing: border-box;
                overflow: visible;
            }

            #tab-create .result-workspace > .video-feed {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(280px, 320px));
                justify-content: start;
            }

            #tab-create .result-workspace > .image-feed {
                display: grid;
                grid-template-columns: minmax(280px, 320px);
                justify-content: start;
                border-top: 1px solid rgba(255, 255, 255, .08);
            }

            #tab-create .result-workspace .time-divider,
            #tab-create .result-workspace .asset-empty[data-empty-state] {
                grid-column: 1 / -1;
            }
        }

        /* Keep the complete waiting stage black and the loader centered at the
           same visual scale as the wider Dola reference stage. */
        .task-card .media-item-wrapper .rendering-box.task-running {
            display: grid;
            place-items: center;
            gap: 0;
            background: #000;
        }
        .task-running .task-loader-video {
            width: 104px;
            height: 104px;
            flex: 0 0 104px;
            background: #000;
            mix-blend-mode: normal;
        }
        .task-running .rendering-text {
            position: absolute;
            left: 50%;
            bottom: 16px;
            width: max-content;
            transform: translateX(-50%);
        }

        .task-running.loader-fallback .task-loader-video { opacity: .2; }
        .task-running.loader-fallback::before {
            content: '';
            position: absolute;
            z-index: 1;
            width: 48px;
            height: 48px;
            border: 2px solid rgba(0, 243, 255, .16);
            border-top-color: #00f3ff;
            border-bottom-color: #ff4f9a;
            border-radius: 50%;
            animation: spin .9s linear infinite;
        }
        .task-running.loader-fallback::after {
            content: '';
            display: block;
            position: absolute;
            z-index: 1;
            left: 12%;
            right: 12%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0,243,255,.9), transparent);
            box-shadow: 0 0 12px rgba(0,243,255,.65);
            animation: loaderScan 1.5s ease-in-out infinite;
        }
        @keyframes loaderScan {
            0%, 100% { top: 24%; opacity: .28; }
            50% { top: 76%; opacity: 1; }
        }

        /* Project asset dock: compact homepage access without changing the generation flow. */
        #materialDockFileInput { display: none; }
        .material-dock {
            min-width: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            color: #e9eef1;
            background: rgba(19, 24, 31, .66);
            border-right: 1px solid rgba(255, 255, 255, .09);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .material-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 12px; }
        .material-dock-head span { color: #6cdde5; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
        .material-dock-head h2 { margin: 4px 0 0; color: #f3f6f7; font-size: 15px; line-height: 1.3; letter-spacing: 0; }
        .material-dock-manage {
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            display: grid;
            place-items: center;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, .13);
            border-radius: 6px;
            background: rgba(255, 255, 255, .045);
            color: #9ca9b2;
            cursor: pointer;
        }
        .material-dock-manage:hover { color: #00edf5; border-color: rgba(0, 237, 245, .42); background: rgba(0, 237, 245, .07); }
        .material-dock-manage svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .material-project-picker { display:grid; grid-template-columns:auto minmax(0,1fr) 30px; align-items:center; gap:8px; margin:0 16px 12px; }
        .material-project-picker > span { color: #76838d; font-size: 10px; white-space: nowrap; }
        .material-project-picker select {
            min-width: 0;
            width: 100%;
            height: 32px;
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 5px;
            outline: none;
            background: rgba(6, 10, 15, .62);
            color: #dce4e8;
            padding: 0 28px 0 9px;
            font-size: 11px;
        }
        .material-project-picker select:focus { border-color: rgba(0, 237, 245, .5); }
        .material-project-picker button { width:30px; height:30px; padding:0; border:1px solid rgba(0,237,245,.28); background:rgba(0,237,245,.06); color:#00e8f0; cursor:pointer; }
        .material-dock-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
        .material-dock-tabs button { position: relative; height: 34px; border: 0; background: transparent; color: #77848d; font-size: 11px; cursor: pointer; }
        .material-dock-tabs button::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px; background: #00e8f0; opacity: 0; box-shadow: 0 0 8px rgba(0, 232, 240, .46); }
        .material-dock-tabs button.active { color: #e8f9fa; }
        .material-dock-tabs button.active::after { opacity: 1; }
        .material-dock-grid { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; padding: 0 12px 10px; }
        .material-dock-card { min-width: 0; min-height: 74px; display: grid; grid-template-columns: 66px minmax(0, 1fr) 28px; align-items: center; gap: 10px; padding: 6px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .085); border-radius: 7px; background: rgba(7, 11, 16, .42); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
        .material-dock-card:hover { transform: translateY(-1px); border-color: rgba(89, 222, 229, .34); background: rgba(15, 22, 28, .7); }
        .material-dock-thumb { width: 66px; height: 60px; padding: 0; overflow: hidden; border: 0; border-radius: 5px; background: rgba(0, 0, 0, .34); cursor: zoom-in; }
        .material-dock-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
        .material-dock-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
        .material-dock-copy strong { overflow: hidden; color: #edf2f4; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
        .material-dock-copy span { overflow: hidden; color: #71808a; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
        .material-dock-use { width: 28px; height: 28px; padding: 0; border: 1px solid rgba(0, 232, 240, .28); border-radius: 50%; background: rgba(0, 232, 240, .05); color: #62e4e9; cursor: pointer; }
        .material-dock-use:hover { border-color: rgba(0, 232, 240, .68); color: #fff; background: rgba(0, 232, 240, .14); }
        .material-dock-empty { min-height: 126px; display: grid; place-content: center; gap: 7px; border: 1px dashed rgba(255, 255, 255, .1); border-radius: 7px; color: #64717a; text-align: center; }
        .material-dock-empty strong { color: #8b979f; font-size: 11px; font-weight: 600; }
        .material-dock-empty span { max-width: 190px; font-size: 9px; line-height: 1.5; }
        .material-dock-dropzone { margin: 0 12px 12px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px dashed rgba(0, 232, 240, .24); border-radius: 7px; background: rgba(0, 232, 240, .025); transition: border-color .18s ease, background .18s ease; }
        .material-dock-dropzone.drag-over { border-color: #00e8f0; background: rgba(0, 232, 240, .1); box-shadow: inset 0 0 16px rgba(0, 232, 240, .08); }
        .material-dock-dropzone button { min-height: 28px; border: 0; background: transparent; color: #b9c6cc; font-size: 11px; cursor: pointer; }
        .material-dock-dropzone button:hover { color: #00edf5; }
        .material-dock-dropzone span { color: #5f6c75; font-size: 9px; text-align: center; }
        .material-thumb { display: block; padding: 0; border: 0; cursor: zoom-in; }

        @media (min-width: 1100px) {
            #tab-create {
                --material-rail: 292px;
                --history-rail: 484px;
                --result-width: 440px;
            }
            #tab-create .material-dock { position: absolute; z-index: 4; left: 0; top: 0; bottom: 0; width: var(--material-rail); }
            #tab-create .chat-feed { left: var(--material-rail); right: 0; width: auto; min-width: 0; max-width: none; align-items: flex-start; overflow: auto; }
            #tab-create .image-showcase-layer { left: auto; right: auto; justify-content: flex-start; padding: 0; }
            #tab-create .bottom-console-wrapper { width: auto; left: var(--material-rail); right: 0; padding-left: 18px; padding-right: 18px; }
            #tab-create .image-showcase-card,
            #tab-create .task-card { width: min(var(--result-width), 100%) !important; }
        }

        /* Image and video use the same stage; the full uncropped image remains available on click. */
        .image-showcase-card .image-result-box,
        #tab-create .task-card .result-media-box,
        #tab-create .task-card .rendering-box { width: 100%; height: auto; aspect-ratio: 16 / 9; }
        .image-showcase-card .image-result-box { overflow: hidden; cursor: zoom-in; background: transparent; }
        .image-showcase-card .image-result-box img { width: 100%; height: 100%; object-fit: cover; }

        /* Result images stay in document order and collapse to one column by default. */
        #tab-create .task-card .batch-media-flow.image-result-strip {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            grid-auto-flow: row;
            gap: 12px;
            width: 100%;
            height: auto;
            aspect-ratio: auto;
            padding: 0;
            overflow: visible;
            scroll-snap-type: none;
            background: transparent;
        }
        #tab-create .image-result-strip > .image-result-item {
            position: relative;
            display: block;
            width: 100%;
            min-width: 0;
            height: auto;
            min-height: 0;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            scroll-snap-align: none;
        }
        #tab-create .image-result-strip > .image-result-item > .result-media-box {
            width: 100%;
            height: 100% !important;
            max-height: none;
            aspect-ratio: auto;
            border-radius: 8px;
            background: #000;
        }
        #tab-create .image-result-strip > .image-result-item > .result-media-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #000;
        }
        #tab-create .image-result-strip .image-result-actions {
            position: absolute;
            z-index: 3;
            left: 6px;
            bottom: 6px;
            margin: 0;
            gap: 5px;
        }
        #tab-create .image-result-strip:has(> .image-result-item:nth-child(2)) .image-result-actions .action-btn {
            width: 30px;
            min-width: 30px !important;
            min-height: 30px;
            height: 30px;
            padding: 0;
            justify-content: center;
            background: rgba(5, 9, 15, .82);
        }
        #tab-create .image-result-strip:has(> .image-result-item:nth-child(2)) .image-result-actions .action-btn > span {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        @media (max-width: 1099px) {
            #tab-create { overflow-y: auto; }
            #tab-create .material-dock { flex: 0 0 auto; margin: 12px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px; }
            .material-dock-head { padding: 12px 12px 8px; }
            .material-project-picker { width: min(330px, calc(100% - 24px)); margin: 0 12px 8px; }
            .material-dock-tabs { width: min(330px, calc(100% - 24px)); margin: 0 12px 9px; }
            .material-dock-grid { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0 12px 10px; }
            .material-dock-card { flex: 0 0 218px; }
            .material-dock-empty { flex: 1 0 100%; min-height: 90px; }
            .material-dock-dropzone { flex-direction: row; justify-content: center; padding: 7px 10px; }
            #tab-create .chat-feed { order: 3; flex: 0 0 auto; min-height: 360px; overflow: visible; }
            #tab-create .bottom-console-wrapper { order: 4; }
        }

        @media (max-width: 760px) {
            #tab-create .material-dock { margin: 8px; }
            .material-dock-head h2 { font-size: 14px; }
            .material-dock-card { flex-basis: 198px; grid-template-columns: 58px minmax(0, 1fr) 28px; }
            .material-dock-thumb { width: 58px; height: 54px; }
            .material-dock-dropzone span { display: none; }
            #tab-create .chat-feed { padding-bottom: 12px; }
        }

        /* Fixed desktop media geometry: two task columns, no horizontal task rail. */
        @media (min-width: 1100px) {
            #tab-create {
                --material-rail: 324px;
                --result-width: 360px;
                --result-height: 203px;
            }

            #tab-create .material-dock {
                width: var(--material-rail);
            }

            #tab-create .chat-feed {
                display: grid;
                grid-template-columns: repeat(2, var(--result-width));
                grid-auto-flow: row;
                grid-auto-rows: max-content;
                align-content: start;
                align-items: start;
                justify-content: start;
                column-gap: 16px;
                row-gap: 20px;
                left: var(--material-rail);
                right: 0;
                width: auto;
                max-width: none;
                padding: 28px 18px 18px 0;
                overflow-x: hidden;
                overflow-y: auto;
                border-left: 0;
            }

            #tab-create .time-divider,
            #tab-create .asset-empty[data-empty-state] {
                grid-column: 1 / -1;
                width: 100%;
                box-sizing: border-box;
            }

            #tab-create .image-showcase-layer {
                grid-column: auto;
                width: var(--result-width);
                min-width: 0;
                padding: 0;
            }

            #tab-create .result-workspace > .image-feed {
                container-name: image-results;
                container-type: inline-size;
            }

            #tab-create .task-card,
            #tab-create .image-showcase-card {
                width: var(--result-width) !important;
                max-width: var(--result-width);
                min-width: 0;
                align-self: start;
            }

            #tab-create .task-card .batch-media-flow,
            #tab-create .image-showcase-card .batch-media-flow {
                width: var(--result-width);
                max-width: var(--result-width);
                overflow: visible;
            }

            #tab-create .task-card .batch-media-flow:not(.image-result-strip),
            #tab-create .image-showcase-card .batch-media-flow {
                display: flex;
                flex-direction: column;
            }

            #tab-create .task-card .media-item-wrapper,
            #tab-create .image-showcase-card .media-item-wrapper {
                width: var(--result-width);
                min-width: var(--result-width);
                max-width: var(--result-width);
            }

            #tab-create .task-card .result-media-box,
            #tab-create .task-card .rendering-box,
            #tab-create .image-showcase-card .image-result-box,
            #tab-create .task-card .task-error-panel,
            #tab-create .task-card .task-completed-panel {
                width: var(--result-width);
                min-width: var(--result-width);
                max-width: var(--result-width);
                height: var(--result-height) !important;
                min-height: var(--result-height);
                max-height: var(--result-height);
                aspect-ratio: auto !important;
                box-sizing: border-box;
                background: #000;
            }

            #tab-create .task-card .result-media-box img,
            #tab-create .task-card .result-media-box video,
            #tab-create .image-showcase-card .image-result-box img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                background: #000;
            }

            #tab-create .task-card .batch-media-flow.image-result-strip {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                grid-auto-flow: row;
                gap: 10px;
                width: var(--result-width);
                height: auto;
                aspect-ratio: auto;
                padding: 0;
                overflow: visible;
                background: transparent;
            }

            #tab-create .image-result-strip > .image-result-item {
                position: relative;
                display: block;
                width: auto;
                min-width: 0;
                max-width: none;
                height: auto;
                min-height: 0;
                aspect-ratio: 16 / 9;
                overflow: hidden;
            }

            #tab-create .image-result-strip > .image-result-item > .result-media-box {
                width: 100%;
                height: 100% !important;
                min-height: 0;
                max-height: none;
                aspect-ratio: auto;
                border-radius: 8px;
            }

            #tab-create .bottom-console-wrapper {
                left: var(--material-rail);
            }

            .material-dock-grid {
                align-items: center;
                gap: 18px;
                padding: 0 12px 12px;
            }

            .material-dock-card {
                position: relative;
                flex: 0 0 auto;
                width: 300px;
                min-width: 300px;
                min-height: 0;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                padding: 0;
                border: 0;
                border-radius: 0;
                background: transparent;
            }

            .material-dock-card:hover {
                transform: none;
                border-color: transparent;
                background: transparent;
            }

            .material-dock-thumb {
                width: 300px;
                height: 170px;
                flex: 0 0 170px;
                border: 1px solid rgba(255, 255, 255, .1);
                border-radius: 8px;
                box-sizing: border-box;
                background: #05070a;
            }

            .material-dock-thumb img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                background: #05070a;
            }

            .material-dock-copy {
                width: 100%;
                box-sizing: border-box;
                gap: 4px;
                padding: 11px 2px 0;
            }

            .material-dock-copy strong {
                font-size: 13px;
                line-height: 1.4;
            }

            .material-dock-copy span {
                font-size: 10px;
            }

            .material-dock-use {
                position: absolute;
                z-index: 2;
                top: 8px;
                right: 8px;
                width: 32px;
                height: 32px;
                border-color: rgba(255, 255, 255, .2);
                background: rgba(5, 8, 12, .72);
                color: #dce9ec;
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }

            .material-dock-empty {
                display: none;
            }

            .material-dock-grid:has(.material-dock-empty) {
                flex: 0 0 auto;
                padding: 0;
            }

            .material-dock-dropzone {
                position: relative;
                width: 300px;
                height: 170px;
                min-height: 170px;
                flex: 0 0 170px;
                align-self: center;
                justify-content: center;
                gap: 8px;
                margin: 0 12px 12px;
                padding: 12px;
                box-sizing: border-box;
                border-color: rgba(255, 255, 255, .32);
                border-radius: 8px;
                background: rgba(255, 255, 255, .025);
                cursor: pointer;
            }

            .material-dock-dropzone button {
                width: 100%;
                height: 100%;
                min-height: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 11px;
                color: #e1e7ea;
                font-size: 13px;
                font-weight: 700;
            }

            .material-dock-dropzone button::before {
                content: '+';
                width: 42px;
                height: 42px;
                display: grid;
                place-items: center;
                box-sizing: border-box;
                border: 1px solid rgba(255, 255, 255, .42);
                border-radius: 50%;
                color: #fff;
                font: 300 28px/1 Arial, sans-serif;
            }

            .material-dock-dropzone span {
                position: absolute;
                left: 12px;
                right: 12px;
                bottom: 16px;
                color: #75828b;
                font-size: 9px;
                pointer-events: none;
            }
        }

        @container image-results (min-width: 740px) {
            #tab-create .image-feed .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) {
                --image-batch-width: calc(var(--result-width) + var(--result-width) + 10px);
                grid-column: 1 / -1;
                width: var(--image-batch-width) !important;
                max-width: var(--image-batch-width);
            }

            #tab-create .image-feed .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) .batch-media-flow.image-result-strip {
                width: var(--image-batch-width);
                max-width: var(--image-batch-width);
                grid-template-columns: repeat(2, var(--result-width));
                grid-auto-flow: row;
            }

            #tab-create .image-feed .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) .image-result-item {
                width: var(--result-width);
                min-width: var(--result-width);
                max-width: var(--result-width);
                height: var(--result-height);
                min-height: var(--result-height);
                max-height: var(--result-height);
                aspect-ratio: auto;
            }

            #tab-create .image-feed .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) .image-result-item > .result-media-box {
                width: var(--result-width);
                min-width: var(--result-width);
                max-width: var(--result-width);
                height: var(--result-height) !important;
                min-height: var(--result-height);
                max-height: var(--result-height);
            }
        }

        /* The full waiting stage is one black surface; only the loader is small. */
        .task-card .media-item-wrapper .rendering-box.task-running {
            background: #000 !important;
        }

        .task-running .task-loader-video {
            width: 72px;
            height: 72px;
            flex-basis: 72px;
            object-fit: contain;
            background: #000;
        }

        .task-running .rendering-text {
            bottom: 12px;
            max-width: calc(100% - 20px);
            font-size: 10px;
        }

        /* Layered generation composer: references, prompt, then parameter pills. */
        .floating-console {
            width: min(980px, 100%);
            padding: 0;
            gap: 0;
            overflow: visible;
            border-radius: 16px;
            background: rgba(10, 14, 20, .94);
        }
        .composer-input-shell { min-width: 0; }
        .reference-row {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            padding: 14px 16px 2px;
        }
        .upload-box {
            position: relative;
            width: 70px;
            height: 70px;
            box-sizing: border-box;
            flex: 0 0 70px;
            flex-direction: column;
            gap: 3px;
            border-color: rgba(255, 255, 255, .42);
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(105, 105, 105, .15), rgba(255, 255, 255, .08));
            color: rgba(255, 255, 255, .56);
            font-size: 10px;
        }
        .upload-box:hover {
            border-color: rgba(255, 255, 255, .64);
            color: rgba(255, 255, 255, .82);
            background: linear-gradient(180deg, rgba(105, 105, 105, .22), rgba(255, 255, 255, .12));
        }
        .upload-box-icon { width: 18px; height: 18px; }
        .upload-box-label { font-size: 10px; font-weight: 600; line-height: 1; }
        .upload-box-count {
            position: absolute;
            top: -7px;
            right: -7px;
            min-width: 34px;
            box-sizing: border-box;
            padding: 2px 6px;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
            background: rgba(0, 0, 0, .72);
            color: rgba(255, 255, 255, .58);
            font-size: 10px;
            line-height: 14px;
            text-align: center;
        }
        .upload-box.reference-disabled,
        .upload-box.is-full { opacity: .38; pointer-events: none; cursor: not-allowed; }
        .gallery-container {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 70px;
            align-items: center;
            gap: 8px;
            padding: 0 2px 0 0;
            overflow-x: auto;
            overflow-y: hidden;
        }
        .gallery-item { width: 70px; height: 70px; flex: 0 0 70px; border-radius: 10px; }
        .input-area {
            display: block;
            min-width: 0;
            padding: 7px 16px 10px;
        }
        .prompt-input {
            width: 100%;
            min-height: 52px;
            max-height: min(32vh, 180px);
            padding: 8px 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            font-size: 14px;
            line-height: 1.6;
        }
        .prompt-input:focus { background: transparent; box-shadow: none; }
        .mention-menu { left: 16px; }
        .control-bar {
            gap: 10px;
            min-height: 50px;
            box-sizing: border-box;
            padding: 9px 14px 13px;
            border-top-color: rgba(255, 255, 255, .09);
        }
        .controls-left { min-width: 0; gap: 8px; }
        .select-trigger {
            min-height: 30px;
            box-sizing: border-box;
            padding: 6px 27px 6px 12px;
            border-color: rgba(255, 255, 255, .18);
            border-radius: 999px;
            background: rgba(255, 255, 255, .075);
            font-size: 12px;
        }
        .select-options { border-radius: 10px; }
        .submit-btn { width: 34px; height: 34px; }
        .submit-btn svg { width: 15px; height: 15px; }

        @media (max-width: 760px) {
            .floating-console { padding: 0; }
            .reference-row { padding: 14px 14px 2px; }
            .input-area { padding: 7px 14px 9px; }
            .prompt-input { min-height: 52px; max-height: 120px; }
            .control-bar { align-items: flex-end; padding: 9px 12px 12px; }
        }

        /* Final reference surface: retro Windows utility desk / neo-brutal. */
        :root {
            --ref-bg:#e8f1fb;
            --ref-panel:#fffdf4;
            --ref-line:#111111;
            --ref-muted:#5d6874;
            --ref-blue:#0d4dbd;
            --ref-blue-dark:#08388e;
            --ref-yellow:#ffd638;
            --ref-mint:#70dcc1;
            --ref-gray:#d9e1eb;
        }
        body { background:var(--ref-bg) !important; color:#111820 !important; font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif !important; font-weight:700; }
        .title-bar { height:58px !important; background:var(--ref-blue) !important; border-bottom:4px solid var(--ref-line) !important; }
        .title-text { color:#fff !important; letter-spacing:1.2px !important; }
        .app-body { background:var(--ref-bg) !important; }
        .sidebar { width:118px !important; padding:12px 8px !important; gap:3px !important; background:#d9e1eb !important; border-right:3px solid var(--ref-line) !important; }
        .nav-item { min-height:42px !important; padding:6px 8px !important; border:2px solid transparent !important; border-left:3px solid transparent !important; color:#111820 !important; font-weight:800 !important; text-shadow:none !important; }
        .nav-item:hover { background:var(--ref-panel) !important; border-color:var(--ref-line) !important; color:#111820 !important; }
        .nav-item.active { background:var(--ref-blue) !important; border:3px solid var(--ref-line) !important; border-left-width:4px !important; color:#fff !important; box-shadow:3px 3px 0 var(--ref-line) !important; text-shadow:none !important; }
        .main-workspace { background:var(--ref-bg) !important; color:#111820 !important; }
        .batch-card, .task-card, .account-section, .floating-console, .asset-item, .auth-box, .redeem-box { background:var(--ref-panel) !important; border:3px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:6px 6px 0 var(--ref-line) !important; }
        .batch-header { border-bottom:2px solid var(--ref-line) !important; }
        .result-prompt, .task-title, .result-header { color:#111820 !important; font-weight:900 !important; }
        .result-meta, .task-meta, .task-param { color:var(--ref-muted) !important; }
        .result-media-box, .rendering-box { background:#f9f8f0 !important; border:3px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:4px 4px 0 var(--ref-line) !important; }
        .result-media-box:hover { border-color:var(--ref-blue) !important; box-shadow:4px 4px 0 var(--ref-blue) !important; }
        .floating-console { background:var(--ref-panel) !important; border-color:var(--ref-line) !important; backdrop-filter:none !important; box-shadow:7px 7px 0 var(--ref-line) !important; }
        .prompt-input { background:#fff !important; color:#111820 !important; border:3px solid var(--ref-line) !important; border-radius:0 !important; }
        .prompt-input:focus { outline:3px solid var(--ref-yellow) !important; border-color:var(--ref-line) !important; }
        .upload-box, .gallery-item { background:var(--ref-gray) !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; color:#111820 !important; }
        .upload-box:hover, .gallery-item:hover { background:var(--ref-yellow) !important; border-color:var(--ref-line) !important; }
        .select-trigger, .select-options { background:#fff !important; color:#111820 !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:3px 3px 0 var(--ref-line) !important; }
        .select-trigger:hover, .custom-select.open .select-trigger { background:var(--ref-yellow) !important; color:#111820 !important; border-color:var(--ref-line) !important; }
        .select-options { box-shadow:5px -5px 0 var(--ref-line) !important; }
        .option-item { color:#111820 !important; border-bottom:1px solid #aeb8c3 !important; }
        .option-item:hover { background:#dbe8ff !important; color:#111820 !important; }
        .option-item.selected { background:var(--ref-blue) !important; color:#fff !important; }
        .action-btn, .customer-redeem-btn, .account-row button, .logout-btn, .redeem-actions button, .auth-submit, .preview-btn { background:var(--ref-panel) !important; color:#111820 !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:3px 3px 0 var(--ref-line) !important; }
        .action-btn:hover, .customer-redeem-btn:hover, .account-row button:hover, .redeem-actions button:hover, .auth-submit:hover, .preview-btn:hover { background:var(--ref-yellow) !important; color:#111820 !important; border-color:var(--ref-line) !important; }
        .submit-btn { background:var(--ref-blue) !important; color:#fff !important; border:3px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:4px 4px 0 var(--ref-line) !important; }
        .submit-btn.active { background:var(--ref-yellow) !important; color:#111820 !important; }
        .preview-modal { background:rgba(24,30,38,.78) !important; }
        .preview-content-box { background:transparent !important; border:0 !important; box-shadow:none !important; }
        .preview-controls { background:var(--ref-panel) !important; border:3px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:5px 5px 0 var(--ref-line) !important; }
        .custom-alert-box { background:var(--ref-panel) !important; border:3px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:7px 7px 0 var(--ref-line) !important; }
        .custom-alert-title { color:var(--ref-blue) !important; }
        ::-webkit-scrollbar { width:13px !important; height:13px !important; }
        ::-webkit-scrollbar-track { background:#cdd7e2 !important; }
        ::-webkit-scrollbar-thumb { background:var(--ref-blue) !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; }
        ::-webkit-scrollbar-thumb:hover { background:var(--ref-yellow) !important; }

        /* Keep every customer surface on the reference palette, including the feed itself. */
        #tab-create .result-workspace,
        .result-workspace,
        .chat-feed,
        .image-feed,
        .asset-library,
        .material-library,
        .material-dock,
        .material-dock-grid,
        .material-dock-dropzone { background:var(--ref-bg) !important; color:#111820 !important; }
        .result-workspace { border-left:2px solid var(--ref-line) !important; min-width:0 !important; overflow:auto !important; grid-template-columns:minmax(0,1fr) !important; }
        .chat-feed { width:min(100%,1500px) !important; max-width:1500px !important; margin:0 auto !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; align-content:start !important; gap:14px !important; padding:18px !important; }
        @media (max-width:1250px){ .chat-feed{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} }
        @media (max-width:760px){ .chat-feed{grid-template-columns:1fr !important;} }
        .material-dock { border:3px solid var(--ref-line) !important; box-shadow:6px 6px 0 var(--ref-line) !important; }
        .asset-library, .material-library { border:0 !important; box-shadow:none !important; }
        .asset-card, .result-card, .image-card, .empty-state, .empty-placeholder {
            background:var(--ref-panel) !important;
            color:#111820 !important;
            border:2px solid var(--ref-line) !important;
            box-shadow:4px 4px 0 var(--ref-line) !important;
        }
        .task-error-panel { background:#d9e1eb !important; color:#9c1d25 !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:none !important; font-weight:800 !important; }
        #tab-create, #tab-assets, #tab-settings,
        #tab-assets .asset-library,
        #tab-settings .material-library { background:var(--ref-bg) !important; color:#111820 !important; }
        #tab-create .chat-feed { width:min(100%,920px) !important; max-width:920px !important; margin:0 auto !important; grid-template-columns:1fr !important; }
        #tab-create .task-card { width:100% !important; max-width:920px !important; justify-self:center !important; }
        #tab-create .task-card:hover,
        #tab-create .batch-card:hover,
        #tab-create .asset-item:hover { background:var(--ref-panel) !important; color:#111820 !important; border-color:var(--ref-line) !important; box-shadow:6px 6px 0 var(--ref-line) !important; transform:none !important; filter:none !important; }
        #tab-create .result-actions .action-btn,
        #tab-create .result-actions .vendor-btn,
        #tab-create .result-actions .preview-btn { background:var(--ref-panel) !important; color:#111820 !important; border:2px solid var(--ref-line) !important; box-shadow:3px 3px 0 var(--ref-line) !important; }
        #tab-create .result-actions .action-btn:hover,
        #tab-create .result-actions .vendor-btn:hover,
        #tab-create .result-actions .preview-btn:hover { background:var(--ref-yellow) !important; color:#111820 !important; border-color:var(--ref-line) !important; box-shadow:3px 3px 0 var(--ref-line) !important; filter:none !important; }
        #tab-create .result-media-box:hover,
        #tab-create .result-media-box:focus-within { border-color:var(--ref-line) !important; box-shadow:4px 4px 0 var(--ref-line) !important; filter:none !important; transform:none !important; }
        #tab-assets .asset-item,
        #tab-settings .material-card,
        #tab-settings .project-card,
        #tab-settings .material-grid,
        #tab-settings .project-grid { background:var(--ref-panel) !important; color:#111820 !important; border-color:var(--ref-line) !important; box-shadow:none !important; }
        #tab-assets .asset-item:hover,
        #tab-settings .material-card:hover,
        #tab-settings .project-card:hover { background:var(--ref-panel) !important; border-color:var(--ref-line) !important; box-shadow:4px 4px 0 var(--ref-line) !important; filter:none !important; }

        /* Creation workspace: one centered vertical lane with room for two concurrent jobs. */
        #tab-create .result-workspace { left:0 !important; right:0 !important; width:100% !important; grid-template-columns:minmax(0,1fr) !important; }
        #tab-create .chat-feed { width:min(100%,920px) !important; max-width:920px !important; padding:20px 22px 210px !important; }
        #tab-create .task-card { width:100% !important; max-width:920px !important; min-width:0 !important; }
        #tab-create .task-card img,
        #tab-create .task-card video { width:100% !important; height:auto !important; object-fit:contain !important; background:#fff !important; }

        /* Compact composer styled as one coherent utility panel. */
        #tab-create .bottom-console-wrapper { left:0 !important; right:0 !important; width:100% !important; padding:0 28px 24px !important; justify-content:center !important; pointer-events:none !important; }
        #tab-create .floating-console { width:min(760px,calc(100vw - 230px)) !important; height:auto !important; min-height:118px !important; pointer-events:auto !important; }
        #tab-create .composer-input-shell { width:100% !important; }
        #tab-create .input-area { min-height:66px !important; height:auto !important; padding:10px 12px 8px !important; }
        #tab-create .prompt-input { width:100% !important; min-height:48px !important; height:auto !important; max-height:136px !important; padding:11px 13px !important; line-height:1.55 !important; box-sizing:border-box !important; box-shadow:none !important; }
        #tab-create .prompt-input:empty::before { color:#65717c !important; font-weight:700 !important; }
        #tab-create .control-bar { width:100% !important; min-height:50px !important; height:auto !important; padding:8px 11px 11px !important; gap:10px !important; border-top:2px solid var(--ref-line) !important; box-sizing:border-box !important; }
        #tab-create .controls-left { min-width:0 !important; flex:1 1 auto !important; gap:8px !important; flex-wrap:wrap !important; }
        .custom-select:not([style*="display: none"]) .select-trigger,
        #modelSelect .select-trigger,
        #ratioSelect .select-trigger,
        #numSelect .select-trigger { min-height:34px !important; height:34px !important; padding:6px 28px 6px 11px !important; font-size:13px !important; line-height:18px !important; box-sizing:border-box !important; box-shadow:2px 2px 0 var(--ref-line) !important; }
        .submit-btn { width:38px !important; height:38px !important; flex:0 0 38px !important; align-self:flex-end !important; }

        /* Preview follows the media dimensions instead of forcing a black letterbox. */
        .preview-modal { background:rgba(24,30,38,.78) !important; }
        .preview-stage { width:auto !important; height:auto !important; max-width:calc(100vw - 48px) !important; max-height:calc(100vh - 48px) !important; }
        .preview-content-box { width:max-content !important; height:max-content !important; min-width:0 !important; min-height:0 !important; max-width:calc(100vw - 96px) !important; max-height:calc(100vh - 126px) !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; overflow:visible !important; }
        .preview-content-box .preview-img-draggable,
        .preview-content-box img,
        .preview-content-box video { display:block !important; width:auto !important; height:auto !important; max-width:calc(100vw - 96px) !important; max-height:calc(100vh - 126px) !important; object-fit:contain !important; background:transparent !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:5px 5px 0 var(--ref-line) !important; }

        #tab-create .image-result-strip,
        #tab-create .batch-media-flow { width:100% !important; grid-template-columns:1fr !important; gap:12px !important; }
        #tab-create .task-card { height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; }
        #tab-create .media-item-wrapper,
        #tab-create .result-media-box,
        #tab-create .image-result-strip .media-item-wrapper,
        #tab-create .image-result-strip .result-media-box { width:100% !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; max-height:none !important; }
        #tab-create .result-media-box img,
        #tab-create .result-media-box video { width:100% !important; height:auto !important; max-height:none !important; }

        #tab-assets .assets-head,
        #tab-assets .assets-head h1,
        #tab-assets .assets-head h2,
        #tab-assets .asset-day-head,
        #tab-settings .material-head,
        #tab-settings .material-head h1,
        #tab-settings .material-head h2 { color:#111820 !important; text-shadow:none !important; }
        #tab-assets .asset-item strong,
        #tab-settings .project-card strong { color:#111820 !important; }
        #tab-assets .asset-info-row span:first-child,
        #tab-settings .project-card span { color:#5d6874 !important; }
        #tab-assets .asset-info-row span:last-child { color:var(--ref-blue) !important; font-weight:800 !important; }
        #tab-settings .material-head-actions button,
        #tab-settings .material-toolbar button { background:var(--ref-panel) !important; color:#111820 !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:3px 3px 0 var(--ref-line) !important; }
        #tab-settings .material-toolbar button.active { background:var(--ref-yellow) !important; color:#111820 !important; }
        #tab-settings .material-head-actions button:hover,
        #tab-settings .material-toolbar button:hover { background:#dbe8ff !important; color:#111820 !important; }

        /* Model picker: distinct brand bands with resolution kept as a separate control. */
        #modelSelect .select-options {
            width:310px !important;
            max-width:min(310px,calc(100vw - 32px)) !important;
            max-height:min(610px,calc(100vh - 124px)) !important;
            padding:7px !important;
            gap:7px !important;
            overflow-x:hidden !important;
        }
        .image-model-group {
            overflow:hidden;
            border:2px solid var(--ref-line);
            background:var(--ref-panel);
        }
        .image-model-group > header {
            min-height:34px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:6px 9px;
            border-bottom:2px solid var(--ref-line);
            color:#111820;
        }
        .image-model-group > header b { font-size:13px; font-weight:900; }
        .image-model-group > header span { font-size:10px; font-weight:800; opacity:.72; }
        .image-model-group.group-banana > header { background:var(--ref-yellow); }
        .image-model-group.group-gpt > header { background:var(--ref-blue); color:#fff; }
        .image-model-group.group-midjourney > header { background:var(--ref-mint); }
        #modelSelect .image-model-option {
            min-height:42px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            padding:7px 9px !important;
            background:#fffdf4 !important;
            color:#111820 !important;
            white-space:normal !important;
        }
        #modelSelect .image-model-option:last-child { border-bottom:0 !important; }
        #modelSelect .image-model-option > span { font-size:12px; font-weight:900; }
        #modelSelect .image-model-option > small {
            flex:0 0 auto;
            color:#5d6874;
            font-size:10px;
            font-weight:800;
        }
        #modelSelect .image-model-option:hover { background:#dbe8ff !important; }
        #modelSelect .image-model-option.selected { background:#111820 !important; color:#fff !important; }
        #modelSelect .image-model-option.selected > small { color:#dce8f5; }

        #tab-create .image-feed .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) {
            width:100% !important;
            max-width:920px !important;
            grid-column:auto !important;
        }
        #tab-create .image-feed .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) .batch-media-flow.image-result-strip {
            width:100% !important;
            max-width:100% !important;
            grid-template-columns:repeat(2,minmax(0,1fr)) !important;
            grid-auto-flow:row !important;
        }
        #tab-create .image-feed .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) .image-result-item,
        #tab-create .image-feed .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) .image-result-item > .result-media-box {
            width:100% !important;
            min-width:0 !important;
            max-width:none !important;
            height:auto !important;
            min-height:0 !important;
            max-height:none !important;
            aspect-ratio:16 / 9 !important;
        }

        /* Readability and reference-layout pass. This section is display-only. */
        .auth-box {
            width:min(560px,calc(100% - 36px)) !important;
            padding:34px !important;
            background:var(--ref-panel) !important;
            color:#111820 !important;
            border:3px solid var(--ref-line) !important;
            box-shadow:8px 8px 0 var(--ref-line) !important;
            backdrop-filter:none !important;
        }
        .auth-box h2 { color:#111820 !important; font-size:24px !important; line-height:1.25 !important; font-weight:900 !important; }
        .auth-box p { margin:9px 0 22px !important; color:#344250 !important; font-size:13px !important; line-height:1.6 !important; font-weight:700 !important; }
        .auth-tabs { margin-bottom:16px !important; border:2px solid var(--ref-line) !important; }
        .auth-tabs button { height:44px !important; color:#344250 !important; background:#fff !important; font-size:14px !important; font-weight:800 !important; border-right:1px solid var(--ref-line) !important; }
        .auth-tabs button:last-child { border-right:0 !important; }
        .auth-tabs button.active { background:var(--ref-blue) !important; color:#fff !important; }
        .auth-box input { height:46px !important; margin-bottom:12px !important; padding:0 14px !important; background:#fff !important; color:#111820 !important; border:2px solid var(--ref-line) !important; font-size:14px !important; font-weight:700 !important; }
        .auth-box input::placeholder { color:#596673 !important; opacity:1 !important; }
        .auth-box input:focus { outline:3px solid var(--ref-yellow) !important; border-color:var(--ref-line) !important; }
        .remember-session { margin:2px 0 17px !important; color:#344250 !important; font-size:13px !important; font-weight:700 !important; }
        .remember-session input { width:17px !important; height:17px !important; accent-color:var(--ref-blue) !important; }
        .auth-submit { height:46px !important; background:var(--ref-blue) !important; color:#fff !important; font-size:14px !important; font-weight:900 !important; }
        .auth-error { min-height:22px !important; color:#a51d2d !important; font-size:13px !important; line-height:1.5 !important; font-weight:800 !important; }

        #tab-create .result-prompt { color:#111820 !important; font-size:15px !important; line-height:1.45 !important; font-weight:900 !important; }
        #tab-create .result-meta,
        #tab-create .task-meta-primary,
        #tab-create .task-meta-secondary { color:#344250 !important; font-size:13px !important; line-height:1.45 !important; font-weight:800 !important; }
        #tab-create .task-status { padding:4px 8px !important; background:#fff !important; color:#174f9e !important; border:2px solid currentColor !important; font-size:12px !important; line-height:1.2 !important; font-weight:900 !important; }
        #tab-create .task-status.done { color:#08783d !important; }
        #tab-create .task-status.failed { color:#a51d2d !important; }
        #tab-create .task-elapsed { max-width:none !important; padding:3px 7px !important; background:#e2e8ef !important; color:#27323c !important; border:1px solid #77828d !important; font-size:11px !important; line-height:1.3 !important; font-weight:800 !important; }
        #tab-create .task-partial-warning,
        #tab-create .task-error-panel { color:#9c1d25 !important; font-size:13px !important; line-height:1.65 !important; font-weight:800 !important; }

        #tab-create .material-dock { display:flex !important; background:#f4f7fb !important; color:#111820 !important; border:0 !important; border-right:2px solid var(--ref-line) !important; box-shadow:none !important; }
        #tab-create .material-dock-head { padding:18px 16px 12px !important; }
        #tab-create .material-dock-head span { color:var(--ref-blue) !important; font-size:10px !important; font-weight:900 !important; }
        #tab-create .material-dock-head h2 { color:#111820 !important; font-size:17px !important; font-weight:900 !important; }
        #tab-create .material-dock-manage,
        #tab-create .material-project-picker button { background:#fff !important; color:#111820 !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:2px 2px 0 var(--ref-line) !important; }
        #tab-create .material-project-picker > span { color:#344250 !important; font-size:11px !important; font-weight:800 !important; }
        #tab-create .material-project-picker select { background:#fff !important; color:#111820 !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; font-size:12px !important; font-weight:700 !important; }
        #tab-create .material-dock-tabs { border-bottom:2px solid var(--ref-line) !important; }
        #tab-create .material-dock-tabs button { color:#344250 !important; font-size:12px !important; font-weight:800 !important; }
        #tab-create .material-dock-tabs button.active { color:#fff !important; background:var(--ref-blue) !important; }
        #tab-create .material-dock-tabs button::after { display:none !important; }
        #tab-create .material-dock-card { display:block !important; min-height:0 !important; padding:0 !important; background:transparent !important; color:#111820 !important; border:0 !important; border-radius:0 !important; transform:none !important; }
        #tab-create .material-dock-thumb { width:100% !important; height:auto !important; aspect-ratio:16/9 !important; background:#fff !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; }
        #tab-create .material-dock-thumb img { object-fit:cover !important; }
        #tab-create .material-dock-copy { padding:7px 2px 12px !important; }
        #tab-create .material-dock-copy strong { color:#111820 !important; font-size:13px !important; font-weight:900 !important; }
        #tab-create .material-dock-copy span { color:#45525e !important; font-size:11px !important; font-weight:700 !important; }
        #tab-create .material-dock-use { position:absolute !important; top:7px !important; right:7px !important; width:30px !important; height:30px !important; background:rgba(17,24,32,.78) !important; color:#fff !important; border:1px solid rgba(255,255,255,.65) !important; border-radius:0 !important; }
        #tab-create .material-dock-card { position:relative !important; }
        #tab-create .material-dock-dropzone { margin:0 12px 12px !important; min-height:128px !important; justify-content:center !important; background:#fff !important; color:#111820 !important; border:2px dashed var(--ref-line) !important; border-radius:0 !important; }
        #tab-create .material-dock-dropzone button { color:#111820 !important; font-size:13px !important; font-weight:900 !important; }
        #tab-create .material-dock-dropzone span { color:#45525e !important; font-size:11px !important; font-weight:700 !important; }

        @media (min-width:1100px) {
            #tab-create { --material-rail:310px !important; }
            #tab-create .material-dock { left:0 !important; top:0 !important; bottom:0 !important; width:var(--material-rail) !important; }
            #tab-create .result-workspace { left:var(--material-rail) !important; right:0 !important; width:auto !important; }
            #tab-create .bottom-console-wrapper { left:var(--material-rail) !important; right:0 !important; width:auto !important; }
            #tab-create .chat-feed { width:min(100%,920px) !important; max-width:920px !important; }
            #tab-create .image-feed .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) { width:100% !important; max-width:920px !important; }
            #tab-create .image-feed .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) .batch-media-flow.image-result-strip { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
        }

        #tab-create .task-card { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 0 18px !important; border-bottom:1px solid #aeb8c3 !important; }
        #tab-create .batch-header { padding:0 0 10px !important; border:0 !important; }
        #tab-create .batch-media-flow { gap:10px !important; }
        #tab-create .image-result-strip > .image-result-item,
        #tab-create .image-result-strip > .image-result-item > .result-media-box { background:transparent !important; border:0 !important; box-shadow:none !important; }
        #tab-create .image-result-strip > .image-result-item > .result-media-box img { background:transparent !important; object-fit:contain !important; }
        #tab-create .image-result-actions { position:absolute !important; left:8px !important; bottom:8px !important; z-index:4 !important; display:flex !important; gap:5px !important; margin:0 !important; }
        #tab-create .image-result-actions .action-btn { width:32px !important; min-width:32px !important; height:32px !important; min-height:32px !important; padding:0 !important; justify-content:center !important; background:rgba(10,16,24,.76) !important; color:#fff !important; border:1px solid rgba(255,255,255,.48) !important; box-shadow:none !important; backdrop-filter:blur(3px) !important; }
        #tab-create .image-result-actions .action-btn:hover { background:rgba(13,77,189,.9) !important; color:#fff !important; border-color:#fff !important; transform:none !important; }
        #tab-create .image-result-actions .action-btn > span { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
        #tab-create .image-result-index { right:8px !important; bottom:8px !important; padding:4px 7px !important; background:rgba(10,16,24,.78) !important; color:#fff !important; border:1px solid rgba(255,255,255,.5) !important; border-radius:3px !important; font-size:11px !important; font-weight:900 !important; }
        #tab-create .task-shared-actions { margin-top:9px !important; gap:7px !important; }
        #tab-create .task-shared-actions .action-btn { flex:0 0 auto !important; min-width:0 !important; padding:7px 10px !important; background:#fff !important; color:#111820 !important; border:1px solid #697580 !important; box-shadow:none !important; font-size:12px !important; font-weight:800 !important; }

        #tab-create .rendering-box.task-running { min-height:260px !important; background:#e2e8ef !important; border:2px dashed #607080 !important; box-shadow:none !important; animation:none !important; }
        #tab-create .task-loader-spinner { width:54px !important; height:54px !important; box-sizing:border-box !important; border:6px solid #b6c2ce !important; border-top-color:var(--ref-blue) !important; border-right-color:var(--ref-yellow) !important; border-radius:50% !important; animation:spin .85s linear infinite !important; }
        #tab-create .task-running .rendering-text { position:static !important; width:auto !important; transform:none !important; color:#26323d !important; font-size:13px !important; font-weight:900 !important; }

        /* Global channel monitor. Scoped so it cannot alter the creation workspace. */
        .channel-monitor-view { flex-direction:column; gap:18px; padding:30px 34px 48px; overflow-y:auto; background:#e7edf4; color:#111820; }
        .channel-monitor-head { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; padding-bottom:16px; border-bottom:3px solid #111820; }
        .channel-monitor-head span { color:#1456c4; font-size:11px; font-weight:900; letter-spacing:1px; }
        .channel-monitor-head h1 { margin:5px 0 3px; font-size:28px; line-height:1.15; font-weight:900; letter-spacing:0; }
        .channel-monitor-head p { margin:0; color:#536272; font-size:12px; font-weight:700; }
        .channel-monitor-head button { min-width:96px; height:40px; padding:0 14px; border:2px solid #111820; border-radius:0; background:#fffdf5; color:#111820; box-shadow:3px 3px 0 #111820; font-family:inherit; font-size:13px; font-weight:900; cursor:pointer; }
        .channel-monitor-head button:hover { background:#ffdb39; transform:translate(-1px,-1px); box-shadow:4px 4px 0 #111820; }
        .channel-monitor-head button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 #111820; }
        .channel-monitor-summary { padding:11px 14px; border:2px solid #111820; background:#d8e1ec; color:#273543; font-size:12px; font-weight:800; }
        .channel-monitor-groups { display:flex; flex-direction:column; gap:26px; }
        .channel-monitor-group { padding:0 0 16px; border:3px solid #111820; background:#f6f8fb; box-shadow:5px 5px 0 #111820; }
        .channel-monitor-provider-head { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:58px; padding:8px 12px; border:0; border-bottom:3px solid #111820; box-shadow:none; }
        .channel-monitor-index { display:grid; place-items:center; width:40px; height:38px; border:2px solid #111820; background:#fffdf6; color:#111820; font-size:14px; font-weight:900; }
        .channel-monitor-provider-head h2 { margin:0; font-size:19px; line-height:1.2; font-weight:900; }
        .channel-monitor-provider-head p { margin:2px 0 0; color:inherit; opacity:.9; font-size:11px; font-weight:800; }
        .channel-monitor-provider-head > span { padding:5px 8px; border:2px solid #111820; background:#fffdf6; color:#111820; font-size:11px; font-weight:900; }
        .channel-monitor-series-list { display:flex; flex-direction:column; gap:16px; padding:16px 14px 0; }
        .channel-monitor-series { min-width:0; }
        .channel-monitor-series-head { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; min-height:52px; padding:7px 10px; border:2px solid #111820; box-shadow:3px 3px 0 #111820; }
        .channel-monitor-series.series-banana .channel-monitor-series-head { background:#ffda38; color:#111820; }
        .channel-monitor-series.series-gpt .channel-monitor-series-head { background:#1b57bf; color:#fff; }
        .channel-monitor-series.series-midjourney .channel-monitor-series-head { background:#72d6c2; color:#111820; }
        .channel-monitor-series-index { display:grid; place-items:center; width:36px; height:34px; border:2px solid #111820; background:#fffdf6; color:#111820; font-size:12px; font-weight:900; }
        .channel-monitor-series-head h3 { margin:0; font-size:16px; line-height:1.2; font-weight:900; }
        .channel-monitor-series-head p { margin:2px 0 0; color:inherit; opacity:.9; font-size:10px; font-weight:800; }
        .channel-monitor-series-head > span { padding:4px 7px; border:2px solid #111820; background:#fffdf6; color:#111820; font-size:10px; font-weight:900; }
        .channel-monitor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:10px; }
        .channel-monitor-card { min-width:0; padding:13px; border:2px solid #111820; background:#fffdf6; color:#111820; box-shadow:3px 3px 0 #111820; }
        .channel-monitor-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
        .channel-monitor-card-head h3 { margin:0; overflow-wrap:anywhere; font-size:14px; line-height:1.35; font-weight:900; }
        .channel-monitor-card-head span { display:block; margin-top:2px; color:#5f6b76; font-size:10px; font-weight:750; }
        .channel-monitor-card-head b { flex:0 0 auto; padding:4px 6px; border:1px solid #111820; background:#d8e1ec; font-size:10px; font-weight:900; }
        .channel-monitor-card.state-good .channel-monitor-card-head b { background:#bdeccd; color:#075b31; }
        .channel-monitor-card.state-slow .channel-monitor-card-head b { background:#ffdf76; color:#6b4700; }
        .channel-monitor-card.state-bad .channel-monitor-card-head b { background:#ffd1d6; color:#9a1630; }
        .channel-monitor-metrics { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0 10px; }
        .channel-monitor-metrics > div { min-width:0; padding:8px; border:1px solid #8795a3; background:#e5ebf2; }
        .channel-monitor-metrics span { display:block; color:#596775; font-size:9px; font-weight:800; }
        .channel-monitor-metrics strong { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:900; }
        .channel-monitor-score { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding-top:9px; border-top:1px solid #111820; }
        .channel-monitor-score span { color:#4e5c68; font-size:10px; font-weight:800; }
        .channel-monitor-score strong { color:#1557c3; font-size:21px; line-height:1; font-weight:900; }
        .channel-monitor-ticks { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; height:22px; margin:10px 0 7px; }
        .channel-monitor-ticks i { display:block; border:1px solid #7f8c98; background:#cdd6e0; }
        .channel-monitor-ticks i.is-success { border-color:#087441; background:#1eae68; }
        .channel-monitor-ticks i.is-slow { border-color:#915a00; background:#ffbd2f; }
        .channel-monitor-ticks i.is-failed { border-color:#941c32; background:#e84d65; }
        .channel-monitor-ticks i.is-running { border-color:#1456c4; background:#6da1ed; }
        .channel-monitor-foot { display:flex; justify-content:space-between; gap:8px; color:#596674; font-size:9px; font-weight:800; }
        .channel-monitor-empty { padding:36px; border:2px dashed #677786; text-align:center; color:#566473; font-size:13px; font-weight:800; }
        @media (max-width:1100px) { .channel-monitor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
        @media (max-width:720px) { .channel-monitor-view { padding:20px 14px 36px; } .channel-monitor-head { align-items:flex-start; flex-direction:column; } .channel-monitor-head button { width:100%; } .channel-monitor-grid { grid-template-columns:1fr; } .channel-monitor-provider-head,.channel-monitor-series-head { grid-template-columns:42px minmax(0,1fr); } .channel-monitor-provider-head > span,.channel-monitor-series-head > span { display:none; } .channel-monitor-series-list { padding:13px 10px 0; } }

        /* Drag-to-library editor: local high-contrast treatment, no black surfaces. */
        .material-editor-overlay { background:rgba(26,34,43,.78) !important; backdrop-filter:blur(7px) !important; }
        .material-editor { width:min(680px,100%) !important; gap:22px !important; padding:20px !important; border:3px solid #111820 !important; background:#fffdf5 !important; color:#111820 !important; box-shadow:7px 7px 0 #111820 !important; }
        .material-editor > img { width:100% !important; aspect-ratio:16/10 !important; object-fit:contain !important; background:#e5ebf2 !important; border:2px solid #111820 !important; }
        .material-editor h3 { margin:0 0 18px !important; color:#111820 !important; font-size:18px !important; font-weight:900 !important; }
        .material-editor label { margin:0 0 6px !important; color:#3f4c59 !important; font-size:12px !important; font-weight:800 !important; }
        .material-editor input,.material-editor select { width:100% !important; height:42px !important; margin-bottom:14px !important; box-sizing:border-box !important; padding:0 11px !important; border:2px solid #111820 !important; border-radius:0 !important; background:#fff !important; color:#111820 !important; font-family:inherit !important; font-size:13px !important; font-weight:800 !important; outline:none !important; }
        .material-editor input:focus,.material-editor select:focus { border-color:#1456c4 !important; box-shadow:0 0 0 3px rgba(20,86,196,.18) !important; }
        .material-editor-actions button { height:38px !important; min-width:84px !important; border:2px solid #111820 !important; border-radius:0 !important; background:#fff !important; color:#111820 !important; box-shadow:2px 2px 0 #111820 !important; font-family:inherit !important; font-weight:900 !important; }
        .material-editor-actions button:hover { background:#dbe5ef !important; }
        .material-editor-actions button.primary { background:#1456c4 !important; color:#fff !important; }
        .material-editor-actions button.primary:hover { background:#0d469f !important; }

        /* Stable final workspace. Keep this as the single authority for creation geometry. */
        .main-workspace[hidden] { display:none !important; }
        #tab-create { --material-rail:310px; background:var(--ref-bg) !important; }
        #tab-create .motion-canvas { display:none !important; }
        #tab-create .material-dock { display:flex !important; }
        #tab-create .result-workspace { min-width:0 !important; overflow:auto !important; background:var(--ref-bg) !important; }
        #tab-create .image-feed {
            display:grid !important;
            grid-template-columns:minmax(0,1fr) !important;
            grid-auto-flow:row !important;
            align-content:start !important;
            justify-items:center !important;
            gap:18px !important;
            width:min(100%,920px) !important;
            max-width:920px !important;
            margin:0 auto !important;
            padding:22px 20px 220px !important;
            box-sizing:border-box !important;
            background:var(--ref-bg) !important;
        }
        #tab-create .time-divider,
        #tab-create .image-showcase-layer,
        #tab-create .image-feed > .task-card,
        #tab-create .image-feed > .batch-card,
        #tab-create .asset-empty[data-empty-state] {
            grid-column:1 / -1 !important;
            width:100% !important;
            max-width:920px !important;
            margin-inline:auto !important;
            box-sizing:border-box !important;
        }
        #tab-create .image-showcase-layer { display:flex !important; justify-content:center !important; padding:0 !important; }
        #tab-create .image-showcase-card { width:100% !important; max-width:920px !important; }
        #tab-create .task-card { width:100% !important; max-width:920px !important; min-width:0 !important; justify-self:center !important; }
        #tab-create .task-card .batch-media-flow.image-result-strip {
            display:grid !important;
            grid-template-columns:minmax(0,1fr) !important;
            grid-auto-flow:row !important;
            width:100% !important;
            max-width:none !important;
            gap:10px !important;
            padding:0 !important;
            overflow:visible !important;
        }
        #tab-create .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) .batch-media-flow.image-result-strip {
            grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        }
        #tab-create .image-result-strip > .image-result-item,
        #tab-create .image-result-strip > .image-result-item > .result-media-box {
            width:100% !important;
            min-width:0 !important;
            max-width:none !important;
            height:auto !important;
            min-height:0 !important;
            max-height:none !important;
            aspect-ratio:16 / 9 !important;
            box-sizing:border-box !important;
            overflow:hidden !important;
            background:transparent !important;
            border:0 !important;
            box-shadow:none !important;
        }
        #tab-create .image-result-strip > .image-result-item > .result-media-box img {
            display:block !important;
            width:100% !important;
            height:100% !important;
            object-fit:contain !important;
            background:transparent !important;
        }
        #tab-create .result-media-box:hover,
        #tab-create .result-media-box:focus-within { background:transparent !important; border:0 !important; box-shadow:none !important; transform:none !important; filter:none !important; }
        #tab-create .floating-console { width:min(920px,calc(100vw - var(--material-rail) - 72px)) !important; max-width:920px !important; }

        .preview-modal { padding:24px !important; background:rgba(24,30,38,.78) !important; }
        .preview-stage { width:auto !important; height:auto !important; max-width:calc(100vw - 48px) !important; max-height:calc(100vh - 48px) !important; }
        .preview-content-box { width:max-content !important; height:max-content !important; max-width:calc(100vw - 96px) !important; max-height:calc(100vh - 126px) !important; padding:0 !important; overflow:visible !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
        .preview-content-box img,
        .preview-content-box video { display:block !important; width:auto !important; height:auto !important; max-width:calc(100vw - 96px) !important; max-height:calc(100vh - 126px) !important; object-fit:contain !important; background:transparent !important; border:2px solid var(--ref-line) !important; border-radius:0 !important; box-shadow:5px 5px 0 var(--ref-line) !important; }
        .preview-close { top:18px !important; right:24px !important; width:42px !important; height:42px !important; display:grid !important; place-items:center !important; background:var(--ref-panel) !important; color:#111820 !important; border:2px solid var(--ref-line) !important; box-shadow:3px 3px 0 var(--ref-line) !important; font:900 27px/1 "Microsoft YaHei UI",sans-serif !important; }
        .preview-close:hover { background:var(--ref-yellow) !important; color:#a51d2d !important; transform:none !important; }

        @media (min-width:1100px) {
            #tab-create .material-dock { position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important; width:var(--material-rail) !important; }
            #tab-create .result-workspace { left:var(--material-rail) !important; right:0 !important; width:auto !important; }
            #tab-create .bottom-console-wrapper { left:var(--material-rail) !important; right:0 !important; width:auto !important; }
        }
        @media (max-width:1099px) {
            #tab-create .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) .batch-media-flow.image-result-strip { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
            #tab-create .floating-console { width:min(920px,calc(100vw - 48px)) !important; }
        }
        @media (max-width:720px) {
            #tab-create .task-card:has(.image-result-strip > .image-result-item:nth-child(2)) .batch-media-flow.image-result-strip { grid-template-columns:minmax(0,1fr) !important; }
            #tab-create .image-feed { padding-inline:12px !important; }
        }

        /* Public workspace final authority: stable tabs, composer spacing and compact model groups. */
        .main-workspace[hidden] { display:none !important; }
        #tab-assets:not([hidden]),
        #tab-settings:not([hidden]) {
            display:flex !important;
            color:#111820 !important;
            background:var(--ref-bg) !important;
        }
        #tab-assets:not([hidden]) { flex-direction:column !important; overflow-y:auto !important; }
        #tab-settings:not([hidden]) { flex-direction:column !important; overflow-y:auto !important; }

        #modelSelect .select-options {
            width:292px !important;
            padding:8px !important;
            gap:8px !important;
            background:var(--ref-panel) !important;
        }
        #modelSelect .image-model-group {
            display:grid !important;
            grid-template-columns:repeat(2,minmax(0,1fr)) !important;
            gap:5px !important;
            padding:0 !important;
            overflow:visible !important;
            border:0 !important;
            background:transparent !important;
        }
        #modelSelect .image-model-group > header {
            grid-column:1 / -1 !important;
            justify-self:start !important;
            min-height:22px !important;
            padding:3px 8px !important;
            border:2px solid var(--ref-line) !important;
            box-shadow:2px 2px 0 var(--ref-line) !important;
        }
        #modelSelect .image-model-group > header b {
            font-size:11px !important;
            line-height:1.15 !important;
            font-weight:900 !important;
        }
        #modelSelect .image-model-option {
            min-width:0 !important;
            min-height:36px !important;
            padding:6px 8px !important;
            justify-content:flex-start !important;
            border:2px solid var(--ref-line) !important;
            background:#fff !important;
        }
        #modelSelect .image-model-option > span {
            overflow:hidden !important;
            text-overflow:ellipsis !important;
            white-space:nowrap !important;
            font-size:12px !important;
            font-weight:900 !important;
        }
        #modelSelect .image-model-option.selected {
            background:var(--ref-blue) !important;
            color:#fff !important;
        }

        #tab-create .material-dock-card { position:relative !important; }
        #tab-create .material-dock-delete {
            position:absolute !important;
            z-index:6 !important;
            top:7px !important;
            right:7px !important;
            display:grid !important;
            place-items:center !important;
            width:28px !important;
            height:28px !important;
            padding:0 !important;
            border:2px solid var(--ref-line) !important;
            border-radius:0 !important;
            background:#d9303e !important;
            color:#fff !important;
            box-shadow:2px 2px 0 var(--ref-line) !important;
            font:900 18px/1 "Microsoft YaHei UI",sans-serif !important;
            cursor:pointer !important;
        }
        #tab-create .material-dock-delete:hover {
            background:#ff5261 !important;
            transform:translate(-1px,-1px) !important;
            box-shadow:3px 3px 0 var(--ref-line) !important;
        }

        #tab-create .result-media-box,
        #tab-create .result-media-box:hover,
        #tab-create .result-media-box:focus-within,
        #tab-assets .result-media-box,
        #tab-assets .result-media-box:hover,
        #tab-assets .result-media-box:focus-within {
            filter:none !important;
            transform:none !important;
            text-shadow:none !important;
            box-shadow:none !important;
        }
        #tab-create .image-result-strip > .image-result-item > .result-media-box img,
        #tab-assets .result-media-box img { filter:none !important; }

        @media (min-width:1100px) {
            #tab-create .result-workspace {
                overflow:hidden !important;
            }
            #tab-create .image-feed {
                height:100% !important;
                min-height:0 !important;
                overflow-x:hidden !important;
                overflow-y:auto !important;
                padding-bottom:var(--console-reserved-space, 220px) !important;
                scroll-padding-bottom:var(--console-reserved-space, 220px) !important;
                overscroll-behavior:contain !important;
            }
            #tab-create .bottom-console-wrapper {
                bottom:0 !important;
                padding-bottom:18px !important;
                box-sizing:border-box !important;
            }
        }

        /* `display:flex` in the layout must not override the semantic hidden state. */
        #tab-create #imageShowcaseLayer[hidden] { display:none !important; }

        .prompt-limit-hint {
            position:absolute;
            right:14px;
            bottom:10px;
            z-index:2;
            padding:2px 6px;
            background:#fff;
            color:#53606d;
            border:1px solid #aeb8c3;
            font-size:11px;
            font-weight:800;
            line-height:16px;
            pointer-events:none;
        }
        .prompt-limit-hint.over {
            color:#b42318;
            background:#fff0ee;
            border-color:#b42318;
        }
        .prompt-input.mj-limit-active { padding-bottom:32px !important; }
        .prompt-input.prompt-over-limit { border-color:#b42318 !important; }
        @media (max-width:720px) {
            #modelSelect .select-options { width:min(292px,calc(100vw - 24px)) !important; }
            #modelSelect .image-model-group { grid-template-columns:minmax(0,1fr) !important; }
        }

        /* Public global monitor: model-only view, with no provider or account details. */
        #tab-monitor:not([hidden]) { display:flex !important; flex-direction:column !important; overflow:hidden !important; background:#e7edf4 !important; color:#111820 !important; }
        #tab-monitor .channel-monitor-view { display:flex; flex:1 1 auto; min-height:0; box-sizing:border-box; }
        #tab-monitor .public-monitor-series-group > .channel-monitor-provider-head { border-bottom:3px solid #111820; }
        #tab-monitor .public-monitor-series-group.series-banana > .channel-monitor-provider-head { background:#ffda38; color:#111820; }
        #tab-monitor .public-monitor-series-group.series-gpt > .channel-monitor-provider-head { background:#1b57bf; color:#fff; }
        #tab-monitor .public-monitor-series-group.series-midjourney > .channel-monitor-provider-head { background:#72d6c2; color:#111820; }
        #tab-monitor .public-monitor-series-group > .channel-monitor-provider-head > span { min-width:62px; text-align:center; }
        #tab-monitor .channel-monitor-series-list { padding:14px 14px 0; }
        #tab-monitor .channel-monitor-grid { margin-top:0; }
        #tab-monitor .channel-monitor-card { min-height:190px; display:flex; flex-direction:column; }
        #tab-monitor .channel-monitor-card-head h3 { color:#111820; }
        #tab-monitor .channel-monitor-card-head span,
        #tab-monitor .channel-monitor-foot,
        #tab-monitor .channel-monitor-score span { color:#475665; }
        #tab-monitor .channel-monitor-card.state-empty { opacity:.82; }
        #tab-monitor .channel-recent-tasks { margin-top:0; border:3px solid #111820; background:#fffdf6; color:#111820; box-shadow:5px 5px 0 #111820; }
        #tab-monitor .channel-recent-tasks > header { display:flex; align-items:center; padding:13px 14px 10px; border-bottom:2px solid #111820; }
        #tab-monitor .channel-recent-tasks > header span { color:#1456c4; font-size:10px; font-weight:900; letter-spacing:1px; }
        #tab-monitor .channel-recent-tasks > header h2 { margin:4px 0 2px; font-size:18px; line-height:1.2; font-weight:900; }
        #tab-monitor .channel-recent-tasks > header p { margin:0; color:#596775; font-size:11px; font-weight:700; }
        #tab-monitor .channel-recent-task-list { display:flex; flex-direction:column; gap:7px; padding:11px 12px 13px; }
        #tab-monitor .channel-recent-task { display:grid; grid-template-columns:52px minmax(0,1fr) auto auto; align-items:center; gap:11px; min-height:42px; padding:7px 9px; border:2px solid #111820; background:#fffdf6; box-shadow:2px 2px 0 #111820; }
        #tab-monitor .channel-recent-task-kind { color:#1557c3; font-size:11px; font-weight:900; }
        #tab-monitor .channel-recent-task-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
        #tab-monitor .channel-recent-task-main strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#111820; font-size:12px; font-weight:900; }
        #tab-monitor .channel-recent-task-main span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#5f6b76; font-size:11px; font-weight:700; }
        #tab-monitor .channel-recent-task-status { padding:3px 6px; border:1px solid #111820; font-size:10px; font-weight:900; white-space:nowrap; }
        #tab-monitor .channel-recent-task-status.status-ok { background:#bdeccd; color:#075b31; }
        #tab-monitor .channel-recent-task-status.status-fail { background:#ffd1d6; color:#9a1630; }
        #tab-monitor .channel-recent-task-status.status-run { background:#dbe8ff; color:#1456c4; }
        #tab-monitor .channel-recent-task time { min-width:54px; color:#25313c; font-size:11px; font-weight:900; text-align:right; white-space:nowrap; }
        @media (max-width:720px) {
            #tab-monitor .channel-recent-task { grid-template-columns:42px minmax(0,1fr) auto; }
            #tab-monitor .channel-recent-task time { grid-column:2; text-align:left; }
        }

        /* Account actions live in the navigation, where they remain discoverable. */
        .window-controls .customer-redeem-btn { display:none !important; }
        .sidebar-account-actions { display:flex; flex-direction:column; gap:6px; margin:12px 7px 0; padding-top:10px; border-top:2px solid #111820; }
        .sidebar-account-action { width:100%; min-height:32px; padding:5px 7px; color:#111820; background:#fffdf6; border:2px solid #111820; box-shadow:2px 2px 0 #111820; border-radius:0; font:800 11px/1.2 "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; cursor:pointer; }
        .sidebar-account-action:hover { background:#ffd638; }
        .sidebar-account-action[hidden] { display:none !important; }
        #tab-monitor .channel-monitor-summary,
        #tab-monitor .channel-monitor-empty { color:#34485d !important; font-weight:800 !important; }
        #tab-monitor .channel-monitor-card strong,
        #tab-monitor .channel-monitor-card h3 { font-weight:900 !important; }

        /* Resolution picker: anonymous backend options grouped by output size. */
        #qualitySelect .select-trigger {
            min-width:154px !important;
            max-width:238px !important;
            overflow:hidden !important;
            text-overflow:ellipsis !important;
            white-space:nowrap !important;
        }
        #qualitySelect .select-options {
            width:276px !important;
            min-width:276px !important;
            max-width:min(276px,calc(100vw - 24px)) !important;
            max-height:min(430px,calc(100vh - 140px)) !important;
            padding:8px !important;
            gap:8px !important;
            overflow-x:hidden !important;
            background:var(--ref-panel) !important;
        }
        #qualitySelect .image-resolution-group {
            display:flex;
            flex-direction:column;
            gap:0;
            border:2px solid var(--ref-line);
            background:#fff;
        }
        #qualitySelect .image-resolution-group > header {
            min-height:28px;
            display:flex;
            align-items:center;
            padding:4px 9px;
            border-bottom:2px solid var(--ref-line);
            background:#dbe8ff;
            color:#111820;
            font-size:12px;
            line-height:18px;
            font-weight:900;
        }
        #qualitySelect .image-resolution-route-list {
            display:flex;
            flex-direction:column;
        }
        #qualitySelect .image-route-option {
            min-height:36px;
            display:grid;
            grid-template-columns:12px minmax(0,1fr) auto;
            align-items:center;
            gap:8px;
            padding:6px 9px !important;
            border:0 !important;
            border-bottom:1px solid #aeb8c3 !important;
            background:#fff !important;
            color:#111820 !important;
            white-space:normal !important;
        }
        #qualitySelect .image-route-option:last-child { border-bottom:0 !important; }
        #qualitySelect .image-route-option:hover { background:#fff4bd !important; }
        #qualitySelect .image-route-option.selected {
            background:var(--ref-blue) !important;
            color:#fff !important;
        }
        #qualitySelect .image-route-option-mark {
            width:10px;
            height:10px;
            box-sizing:border-box;
            border:2px solid currentColor;
            background:transparent;
        }
        #qualitySelect .image-route-option.selected .image-route-option-mark {
            background:var(--ref-yellow);
            border-color:#111820;
        }
        #qualitySelect .image-route-option strong {
            min-width:0;
            color:inherit;
            font-size:11px;
            line-height:16px;
            font-weight:900;
        }
        #qualitySelect .image-route-option small {
            color:inherit;
            font-size:10px;
            line-height:16px;
            font-weight:900;
            white-space:nowrap;
        }
        @media (max-width:720px) {
            #qualitySelect .select-trigger { max-width:190px !important; }
            #qualitySelect .select-options {
                width:min(276px,calc(100vw - 24px)) !important;
                min-width:min(276px,calc(100vw - 24px)) !important;
            }
        }

        /* Customer workspace polish: concise controls, readable metadata and edge-only feedback. */
        .sidebar .nav-item:not(.active) {
            min-height:62px !important;
            padding:10px 6px !important;
            background:#fff !important;
            color:#111820 !important;
            border:2px solid transparent !important;
            font-size:13px !important;
            line-height:1.2 !important;
            font-weight:900 !important;
            text-shadow:none !important;
        }
        .sidebar .nav-item:not(.active):hover {
            background:#fff !important;
            color:#1456c4 !important;
            border-color:#111820 !important;
            box-shadow:2px 2px 0 #111820 !important;
        }
        .sidebar .nav-item.active {
            min-height:62px !important;
            padding:10px 6px !important;
            font-size:13px !important;
            font-weight:900 !important;
        }
        .sidebar .nav-icon { width:24px !important; height:24px !important; }

        #tab-create .result-media-box:hover,
        #tab-create .result-media-box:focus-within,
        #tab-assets .result-media-box:hover,
        #tab-assets .result-media-box:focus-within {
            outline:2px solid #92ff19 !important;
            outline-offset:-2px !important;
            border-color:transparent !important;
            background:transparent !important;
            box-shadow:0 0 8px rgba(146,255,25,.75) !important;
            filter:none !important;
            transform:none !important;
        }
        #tab-create .result-media-box:hover img,
        #tab-assets .result-media-box:hover img { filter:none !important; }
        #tab-create .result-prompt { font-size:16px !important; line-height:1.5 !important; font-weight:900 !important; }
        #tab-create .result-meta,
        #tab-create .task-meta-primary {
            color:#1c2b39 !important;
            font-size:15px !important;
            line-height:1.5 !important;
            font-weight:900 !important;
        }
        #tab-create .task-meta-primary {
            min-height:28px !important;
            padding:4px 9px !important;
            border:1px solid #778592 !important;
            border-radius:3px !important;
            background:#e3eaf2 !important;
        }
        #tab-create .task-shared-actions .action-btn.destructive,
        #tab-create .task-shared-actions .action-btn.destructive:hover {
            background:#d92f3d !important;
            color:#fff !important;
            border-color:#9f1220 !important;
            box-shadow:2px 2px 0 #111820 !important;
        }

        .material-media-shell,
        .material-dock-media,
        .asset-media-shell { position:relative; min-width:0; }
        #tab-settings .material-item { position:relative !important; overflow:hidden !important; background:#fffdf6 !important; border:2px solid #111820 !important; }
        #tab-settings .material-copy { padding:12px !important; }
        #tab-settings .material-copy strong { color:#111820 !important; font-size:14px !important; line-height:1.35 !important; font-weight:900 !important; }
        #tab-settings .material-copy span { color:#344250 !important; font-size:12px !important; line-height:1.45 !important; font-weight:800 !important; }
        .material-download,
        .material-dock-download,
        .asset-download,
        .material-delete,
        .asset-delete,
        .project-delete {
            position:absolute;
            z-index:7;
            display:grid;
            place-items:center;
            width:34px;
            height:34px;
            padding:0;
            border:2px solid #111820;
            border-radius:0;
            box-shadow:2px 2px 0 #111820;
            cursor:pointer;
        }
        .material-download,
        .material-dock-download,
        .asset-download {
            left:8px;
            bottom:8px;
            background:rgba(255,255,255,.94);
            color:#1456c4;
        }
        .material-download:hover,
        .material-dock-download:hover,
        .asset-download:hover { background:#dbe8ff; color:#0b409b; }
        .material-delete,
        .asset-delete,
        .project-delete {
            top:8px;
            right:8px;
            background:#d92f3d;
            color:#fff;
            font:900 20px/1 "Microsoft YaHei UI",sans-serif;
        }
        .material-delete:hover,
        .asset-delete:hover,
        .project-delete:hover { background:#ff5361; }
        .material-download .action-icon,
        .material-dock-download .action-icon,
        .asset-download .action-icon { width:18px; height:18px; }
        #tab-create .material-dock-card { position:relative !important; }
        #tab-create .material-dock-delete { top:8px !important; right:8px !important; }
        #tab-create .material-dock-copy strong { color:#111820 !important; font-size:14px !important; font-weight:900 !important; }
        #tab-create .material-dock-copy span { color:#344250 !important; font-size:12px !important; font-weight:800 !important; }

        #tab-settings .project-card { position:relative !important; padding:10px 46px 10px 10px !important; background:#fffdf6 !important; color:#111820 !important; border:2px solid #111820 !important; }
        #tab-settings .project-card.active { background:#edf4ff !important; border-color:#1456c4 !important; }
        #tab-settings .project-copy strong { color:#111820 !important; font-size:14px !important; font-weight:900 !important; }
        #tab-settings .project-copy span { color:#344250 !important; font-size:11px !important; font-weight:800 !important; }
        #tab-settings .project-actions button { min-height:28px !important; background:#fff !important; color:#1f3448 !important; border:1px solid #667583 !important; font-size:11px !important; font-weight:800 !important; }

        #tab-assets .asset-library { padding:30px 34px 48px !important; }
        #tab-assets .assets-head strong { color:#111820 !important; font-size:26px !important; font-weight:900 !important; }
        #tab-assets .assets-head span { color:#344250 !important; font-size:13px !important; font-weight:800 !important; }
        #tab-assets .asset-day-section { margin-top:24px !important; padding-top:2px !important; }
        #tab-assets .asset-day-head { padding-bottom:9px !important; border-bottom:2px solid #111820 !important; }
        #tab-assets .asset-day-head strong { color:#111820 !important; font-size:17px !important; font-weight:900 !important; }
        #tab-assets .asset-day-head span { color:#344250 !important; font-size:12px !important; font-weight:800 !important; }
        #tab-assets .asset-item { overflow:hidden !important; background:#fffdf6 !important; border:2px solid #111820 !important; box-shadow:3px 3px 0 #111820 !important; }
        #tab-assets .asset-item:hover { transform:none !important; box-shadow:3px 3px 0 #111820 !important; }
        #tab-assets .asset-meta { padding:12px !important; }
        #tab-assets .asset-meta strong { display:block; color:#111820 !important; font-size:14px !important; line-height:1.45 !important; font-weight:900 !important; }
        #tab-assets .asset-info-row { margin-top:7px !important; }
        #tab-assets .asset-info-row span { color:#344250 !important; font-size:11px !important; font-weight:800 !important; }
        #tab-assets .asset-info-row span:last-child { color:#1456c4 !important; }
        .asset-model-badge {
            position:absolute;
            z-index:6;
            top:8px;
            left:8px;
            padding:5px 8px;
            border:2px solid #111820;
            background:#ffda38;
            color:#111820;
            font-size:11px;
            line-height:1;
            font-weight:900;
        }

        .redeem-overlay { background:rgba(21,36,54,.62) !important; backdrop-filter:blur(8px) !important; }
        .redeem-box {
            width:min(620px,calc(100% - 40px)) !important;
            min-height:310px !important;
            padding:34px !important;
            background:#fffdf6 !important;
            color:#111820 !important;
            border:3px solid #111820 !important;
            box-shadow:8px 8px 0 #111820 !important;
            backdrop-filter:none !important;
        }
        .redeem-box h2 { color:#1456c4 !important; font-size:25px !important; line-height:1.25 !important; font-weight:900 !important; }
        .redeem-box p { margin:10px 0 22px !important; color:#344250 !important; font-size:14px !important; line-height:1.7 !important; font-weight:700 !important; }
        .redeem-box input { height:50px !important; padding:0 14px !important; background:#fff !important; color:#111820 !important; border:2px solid #111820 !important; font-size:14px !important; font-weight:800 !important; }
        .redeem-box input::placeholder { color:#65717c !important; opacity:1 !important; }
        .redeem-box input:focus { border-color:#1456c4 !important; box-shadow:0 0 0 3px rgba(20,86,196,.18) !important; }
        .redeem-close { top:13px !important; right:16px !important; color:#344250 !important; font-size:28px !important; font-weight:900 !important; }
        .redeem-error { min-height:22px !important; color:#a51d2d !important; font-size:13px !important; font-weight:800 !important; }
        .redeem-actions { margin-top:16px !important; gap:10px !important; }
        .redeem-actions button { min-width:104px !important; min-height:42px !important; border:2px solid #111820 !important; border-radius:0 !important; box-shadow:2px 2px 0 #111820 !important; font-size:13px !important; font-weight:900 !important; }
        .redeem-cancel { background:#fff !important; color:#111820 !important; }
        .redeem-submit { background:#1456c4 !important; color:#fff !important; }
        .redeem-submit:hover { background:#0d469f !important; color:#fff !important; }

        .prompt-limit-hint { color:#263746 !important; border:1px solid #667583 !important; background:#eef3f8 !important; font-size:12px !important; font-weight:900 !important; }
        .prompt-limit-hint.over { color:#9d1724 !important; border-color:#b42318 !important; background:#ffe3e0 !important; }
        .prompt-input.prompt-over-limit { border:3px solid #b42318 !important; background:#fff6f4 !important; }
        #submitBtn:disabled { cursor:not-allowed !important; opacity:.42 !important; filter:grayscale(.25) !important; }

        @media (max-width:720px) {
            .sidebar .nav-item:not(.active),
            .sidebar .nav-item.active { min-height:54px !important; font-size:12px !important; }
            #tab-assets .asset-library { padding:22px 16px 36px !important; }
            .redeem-box { min-height:0 !important; padding:26px 20px !important; }
        }

        /* Stable media preview and quiet task-card feedback. */
        .preview-modal .preview-stage,
        .preview-modal.image-preview .preview-stage {
            width:min(92vw,1280px) !important;
            height:min(88vh,860px) !important;
            max-width:92vw !important;
            max-height:88vh !important;
            gap:12px !important;
        }
        .preview-modal .preview-content-box,
        .preview-modal.image-preview .preview-content-box {
            flex:1 1 auto !important;
            width:100% !important;
            height:auto !important;
            min-width:0 !important;
            min-height:0 !important;
            max-width:none !important;
            max-height:none !important;
            box-sizing:border-box !important;
            padding:12px !important;
            overflow:hidden !important;
            background:#101720 !important;
            border:2px solid #111820 !important;
            box-shadow:5px 5px 0 #111820 !important;
        }
        .preview-modal .preview-content-box .preview-img-draggable,
        .preview-modal .preview-content-box img,
        .preview-modal .preview-content-box video {
            display:block !important;
            width:100% !important;
            height:100% !important;
            max-width:100% !important;
            max-height:100% !important;
            object-fit:contain !important;
            background:transparent !important;
            border:0 !important;
            box-shadow:none !important;
        }
        #tab-create .task-card,
        #tab-create .task-card:hover,
        #tab-create .batch-card:hover {
            background:transparent !important;
            border:0 !important;
            border-bottom:0 !important;
            box-shadow:none !important;
            filter:none !important;
            transform:none !important;
        }
        #tab-create .task-card::before,
        #tab-create .task-card::after,
        #tab-create .task-card:hover::before,
        #tab-create .task-card:hover::after { display:none !important; }
        #tab-create .result-media-box:hover,
        #tab-create .result-media-box:focus-within {
            outline:2px solid #92ff19 !important;
            outline-offset:-2px !important;
            background:transparent !important;
            box-shadow:0 0 8px rgba(146,255,25,.72) !important;
        }

        #tab-create .material-dock-dropzone {
            min-height:154px !important;
            padding:18px 14px !important;
            gap:10px !important;
            display:flex !important;
            flex-direction:column !important;
            align-items:center !important;
            justify-content:center !important;
            cursor:pointer !important;
            background:#fffdf6 !important;
            border:3px dashed #1456c4 !important;
            box-shadow:inset 0 0 0 3px #dbe8ff !important;
        }
        #tab-create .material-dock-dropzone:hover,
        #tab-create .material-dock-dropzone:focus-visible,
        #tab-create .material-dock-dropzone.drag-over {
            outline:3px solid #ffda38 !important;
            outline-offset:-6px !important;
            background:#edf4ff !important;
        }
        #tab-create .material-dock-dropzone button {
            display:flex !important;
            flex-direction:column !important;
            align-items:center !important;
            justify-content:center !important;
            gap:7px !important;
            width:auto !important;
            height:auto !important;
            flex:0 0 auto !important;
            min-height:62px !important;
            padding:8px 14px !important;
            color:#111820 !important;
            font-size:15px !important;
            font-weight:900 !important;
            cursor:pointer !important;
        }
        #tab-create .material-dock-dropzone button::before {
            content:none !important;
            display:none !important;
        }
        #tab-create .material-dock-dropzone button svg {
            width:28px;
            height:28px;
            fill:none;
            stroke:#1456c4;
            stroke-width:2.2;
            stroke-linecap:round;
            stroke-linejoin:round;
        }
        #tab-create .material-dock-dropzone span {
            display:block !important;
            position:static !important;
            inset:auto !important;
            max-width:240px !important;
            color:#344250 !important;
            font-size:12px !important;
            line-height:1.55 !important;
            font-weight:800 !important;
        }

        .task-model-badge,
        .channel-model-badge,
        .task-param-badge {
            display:inline-flex !important;
            align-items:center !important;
            min-height:26px !important;
            box-sizing:border-box !important;
            padding:4px 8px !important;
            border:2px solid #111820 !important;
            border-radius:0 !important;
            color:#111820 !important;
            font-size:12px !important;
            line-height:1.2 !important;
            font-weight:900 !important;
            letter-spacing:0 !important;
        }
        .task-model-badge,
        .channel-model-badge { background:#ffda38 !important; }
        .task-param-badge { background:#e3eaf2 !important; }
        .channel-monitor-card-head .channel-model-badge { margin:0 !important; }

        .inline-delete-confirm {
            display:inline-flex;
            align-items:center;
            gap:5px;
            vertical-align:middle;
        }
        .inline-delete-confirm.corner-confirm {
            position:absolute;
            z-index:12;
            top:8px;
            right:8px;
        }
        .inline-delete-confirm button {
            min-width:46px !important;
            height:34px !important;
            min-height:34px !important;
            padding:0 7px !important;
            border:2px solid #111820 !important;
            border-radius:0 !important;
            box-shadow:2px 2px 0 #111820 !important;
            font-size:12px !important;
            line-height:1 !important;
            font-weight:900 !important;
            cursor:pointer !important;
        }
        .inline-delete-yes { background:#d92f3d !important; color:#fff !important; }
        .inline-delete-no { background:#fff !important; color:#111820 !important; }
        .inline-delete-confirm button:disabled { opacity:.55; cursor:wait !important; }
        .inline-delete-source[hidden] { display:none !important; }

        /* Live pricing uses the same strategy entries as the reservation service. */
        #tab-create .controls-right {
            display:flex !important;
            flex:0 0 auto !important;
            align-items:flex-end !important;
            gap:8px !important;
        }
        #tab-create .submit-cost-hint {
            display:inline-flex !important;
            align-items:center !important;
            gap:6px !important;
            min-height:34px !important;
            box-sizing:border-box !important;
            padding:6px 9px !important;
            border:2px solid var(--ref-line) !important;
            background:#fff4bd !important;
            color:#111820 !important;
            box-shadow:2px 2px 0 var(--ref-line) !important;
            font-size:12px !important;
            line-height:18px !important;
            font-weight:900 !important;
            white-space:nowrap !important;
        }
        #tab-create .submit-cost-hint strong {
            font-size:15px !important;
            font-weight:900 !important;
        }
        .point-cost-icon {
            display:inline-block !important;
            width:10px !important;
            height:10px !important;
            box-sizing:border-box !important;
            flex:0 0 10px !important;
            border:2px solid #111820 !important;
            background:#ffda38 !important;
        }
        #qualitySelect .select-trigger {
            display:flex !important;
            align-items:center !important;
            gap:7px !important;
            padding-right:28px !important;
        }
        #qualitySelect .route-trigger-resolution {
            flex:0 0 auto !important;
            color:inherit !important;
            font-weight:900 !important;
        }
        #qualitySelect .route-trigger-duration {
            min-width:0 !important;
            flex:1 1 auto !important;
            overflow:hidden !important;
            color:#536170 !important;
            font-size:11px !important;
            font-weight:800 !important;
            text-overflow:ellipsis !important;
            white-space:nowrap !important;
        }
        #qualitySelect .route-trigger-cost,
        #qualitySelect .image-route-option-cost {
            display:inline-flex !important;
            align-items:center !important;
            gap:5px !important;
            flex:0 0 auto !important;
            color:inherit !important;
            font-size:11px !important;
            font-weight:900 !important;
            white-space:nowrap !important;
        }
        #qualitySelect .image-route-option-cost {
            justify-self:end !important;
            color:#111820 !important;
        }
        #qualitySelect .image-route-option.selected .image-route-option-cost { color:#fff !important; }
        #qualitySelect .image-route-option.selected .point-cost-icon { border-color:#fff !important; }

        @media (max-width:720px) {
            #tab-create .controls-right { gap:6px !important; }
            #tab-create .submit-cost-hint { padding:6px 7px !important; font-size:11px !important; }
            #qualitySelect .route-trigger-duration { display:none !important; }
        }

        @media (max-width:720px) {
            .preview-modal { padding:12px !important; }
            .preview-modal .preview-stage,
            .preview-modal.image-preview .preview-stage {
                width:calc(100vw - 24px) !important;
                height:min(82vh,680px) !important;
                max-width:calc(100vw - 24px) !important;
                max-height:82vh !important;
            }
            .preview-modal .preview-content-box,
            .preview-modal.image-preview .preview-content-box { padding:7px !important; }
        }