* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: #0a0a0f;
            color: white;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* 动态背景 */
        .bg-dynamic {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background:
                radial-gradient(ellipse at 20% 20%, rgba(120, 0, 255, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(255, 0, 150, 0.08) 0%, transparent 60%),
                linear-gradient(180deg, #0a0a0f 0%, #0f0f1a 100%);
        }

        /* 网格背景 */
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-image:
                linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 60px 60px;
            animation: gridMove 20s linear infinite;
        }

        @keyframes gridMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(60px, 60px); }
        }

        /* 玻璃态卡片 */
        .glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .glass-active {
            background: rgba(255, 0, 222, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 0, 222, 0.3);
        }

        /* 霓虹边框 */
        .neon-border {
            position: relative;
        }

        .neon-border::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(45deg, #ff00de, #00ffff, #ff00de);
            border-radius: inherit;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .neon-border:hover::before {
            opacity: 1;
            animation: neonRotate 3s linear infinite;
        }

        @keyframes neonRotate {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }

        /* 侧边栏 */
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 280px;
            height: 100vh;
            background: rgba(10, 10, 15, 0.95);
            backdrop-filter: blur(20px);
            border-right: 1px solid rgba(255, 255, 255, 0.05);
            z-index: 100;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
        }

        /* Logo */
        .logo-section {
            padding: 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-icon {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, #ff00de, #00ffff);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            box-shadow: 0 0 28px rgba(255, 0, 222, 0.3);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .logo:hover .logo-icon {
            transform: scale(1.08) rotate(-3deg);
            box-shadow: 0 0 36px rgba(255, 0, 222, 0.5);
        }

        .logo-text {
            font-size: 19px;
            font-weight: 900;
            background: linear-gradient(135deg, #fff 30%, #ff00de 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.5px;
        }

        .ark-home-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 8px 0;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.04);
            color: rgba(255, 255, 255, 0.7);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .ark-home-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-color: rgba(255, 255, 255, 0.25);
        }


        /* 导航菜单 */
        .nav-menu {
            flex: 1;
            padding: 16px 12px;
            overflow-y: auto;
        }

        .nav-section {
            margin-bottom: 20px;
        }

        .nav-section-title {
            font-size: 10.5px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.25);
            text-transform: uppercase;
            letter-spacing: 2px;
            padding: 0 14px;
            margin-bottom: 10px;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 16px;
            border-radius: 12px;
            cursor: pointer;
            margin-bottom: 3px;
            position: relative;
            overflow: hidden;
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .nav-item.active {
            background: linear-gradient(135deg, rgba(255, 0, 222, 0.15), rgba(0, 255, 255, 0.1));
            border: 1px solid rgba(255, 0, 222, 0.2);
        }

        .nav-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 22px;
            background: linear-gradient(180deg, #ff00de, #00ffff);
            border-radius: 0 4px 4px 0;
            box-shadow: 0 0 10px rgba(255, 0, 222, 0.5);
        }

        .nav-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .nav-text {
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.7);
        }

        .nav-item.active .nav-text {
            color: white;
            font-weight: 600;
        }

        .nav-badge {
            margin-left: auto;
            padding: 2px 8px;
            background: linear-gradient(135deg, #ff00de, #00ffff);
            border-radius: 20px;
            font-size: 10px;
            font-weight: 700;
        }

        /* 用户信息 */
        .user-section {
            padding: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .user-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .user-card:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .user-avatar {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: linear-gradient(135deg, #ff00de, #00ffff);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .user-info {
            flex: 1;
        }

        .user-name {
            font-size: 14px;
            font-weight: 600;
            color: white;
        }

        .user-status {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
        }

        /* 主内容区 */
        .main-content {
            margin-left: 280px;
            min-height: 100vh;
            padding: 28px 36px 60px;
        }

        /* 顶部栏 */
        .top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 36px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .page-title {
            font-size: 26px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        .page-title span {
            background: linear-gradient(135deg, #ff00de, #00ffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .top-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 11px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 17px;
        }

        .icon-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 0, 222, 0.35);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 0, 222, 0.15);
        }

        /* 创建卡片区域 */
        .create-section {
            background: rgba(10, 10, 15, 0.6);
            border-radius: 22px;
            padding: 28px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            margin-bottom: 28px;
            backdrop-filter: blur(10px);
        }

        .create-tabs {
            display: flex;
            gap: 6px;
            margin-bottom: 24px;
            background: rgba(255, 255, 255, 0.03);
            padding: 5px;
            border-radius: 14px;
            width: fit-content;
            border: 1px solid rgba(255, 255, 255, 0.04);
            will-change: transform;
            transform: translateZ(0);
        }

        .create-tab {
            padding: 10px 22px;
            border-radius: 10px;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.45);
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .create-tab:hover {
            color: rgba(255, 255, 255, 0.8);
            background: rgba(255, 255, 255, 0.04);
            transition: all 0.2s ease;
        }

        .create-tab.active {
            background: linear-gradient(135deg, #ff00de, #00ffff);
            color: white;
            box-shadow: 0 4px 24px rgba(255, 0, 222, 0.35);
        }

        /* 输入区域 */
        .input-area {
            position: relative;
        }

        .text-input {
            width: 100%;
            min-height: 160px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.03);
            border: 2px dashed rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            color: white;
            font-size: 16px;
            resize: none;
            transition: all 0.3s;
        }

        .text-input:focus {
            outline: none;
            border-color: rgba(255, 0, 222, 0.5);
            background: rgba(255, 255, 255, 0.05);
        }

        .text-input::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .input-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 16px;
        }

        .input-tools {
            display: flex;
            gap: 8px;
        }

        .tool-btn {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.07);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 15px;
        }

        .tool-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 0, 222, 0.35);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 0, 222, 0.12);
        }

        .generate-btn {
            padding: 13px 32px;
            background: linear-gradient(135deg, #ff00de, #00ffff);
            border: none;
            border-radius: 13px;
            color: white;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 24px rgba(255, 0, 222, 0.3);
            position: relative;
            overflow: hidden;
        }

        .generate-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .generate-btn:hover::before {
            opacity: 1;
        }

        .generate-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 36px rgba(255, 0, 222, 0.45);
        }

        .generate-btn:active {
            transform: translateY(-1px) scale(0.98);
        }

        .generate-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .generate-btn:disabled::before {
            display: none;
        }

        /* 提示语模板 */
        .prompt-templates {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

        .template-tag {
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            transition: all 0.3s;
        }

        .template-tag:hover {
            background: rgba(255, 0, 222, 0.1);
            border-color: rgba(255, 0, 222, 0.3);
            color: white;
            transform: translateY(-2px);
        }

        /* 设置面板 */
        .settings-panel {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .setting-item {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 14px;
            padding: 14px 16px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            border: 1px solid transparent;
        }

        .setting-item:hover {
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        .setting-label {
            font-size: 11.5px;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 8px;
            letter-spacing: 0.3px;
        }

        .setting-value {
            font-size: 13.5px;
            font-weight: 600;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .setting-value span:last-child {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.3);
        }

        /* 历史记录 */
        .history-section {
            background: rgba(10, 10, 15, 0.6);
            border-radius: 22px;
            padding: 24px 28px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(10px);
        }

        .history-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .history-title {
            font-size: 17px;
            font-weight: 600;
            letter-spacing: -0.3px;
        }

        .history-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 14px;
        }

        .history-card {
            aspect-ratio: 16 / 10;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .history-card-delete {
            position: absolute;
            top: 6px;
            right: 6px;
            z-index: 10;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #ff6b6b;
            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s, background 0.2s, transform 0.2s;
            line-height: 1;
            padding: 0;
        }
        .history-card:hover .history-card-delete,
        .result-card:hover .history-card-delete {
            opacity: 1;
        }
        .history-card-delete:hover {
            background: rgba(239, 68, 68, 0.8);
            color: #fff;
            transform: scale(1.1);
        }

        .history-card:hover {
            transform: translateY(-5px) scale(1.02);
            border-color: rgba(255, 0, 222, 0.3);
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 0, 222, 0.1);
        }

        .history-card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            background: linear-gradient(135deg, rgba(255, 0, 222, 0.2), rgba(0, 255, 255, 0.2));
        }

        .history-media-stack {
            position: relative;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: repeat(2, minmax(0, 1fr));
            gap: 3px;
            background: rgba(0,0,0,0.18);
            padding: 3px;
            box-sizing: border-box;
        }
        .history-media-stack.is-full {
            min-height: 190px;
            grid-auto-rows: minmax(120px, auto);
            grid-template-rows: none;
        }
        .history-media-tile {
            position: relative;
            overflow: hidden;
            border-radius: 6px;
            background: rgba(255,255,255,0.06);
        }
        .history-single-media {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: rgba(255,255,255,0.04);
        }
        .history-single-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .history-single-media video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            background: #000;
        }
        .history-single-media.is-full {
            height: auto;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
            border-radius: 8px 8px 0 0;
        }
        .history-single-media.is-full img,
        .history-single-media.is-full video {
            width: 100%;
            height: auto;
            max-height: none;
            object-fit: contain;
        }
        .history-single-media.is-full video {
            min-height: 0;
            max-height: 420px;
        }
        .history-media-tile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .history-media-tile video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            background: #000;
        }
        .history-media-stack.is-full .history-media-tile img,
        .history-media-stack.is-full .history-media-tile video {
            object-fit: contain;
            background: rgba(0,0,0,0.2);
        }
        .history-media-delete {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 24px;
            height: 24px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.3);
            background: rgba(239,68,68,0.88);
            color: #fff;
            font-size: 16px;
            line-height: 20px;
            cursor: pointer;
            opacity: 1;
            transform: translateY(0);
            transition: transform 0.16s ease, background 0.16s ease;
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .history-media-delete:hover {
            background: rgba(220,38,38,0.98);
            transform: scale(1.08);
        }
        .history-media-more {
            position: absolute;
            right: 8px;
            bottom: 8px;
            padding: 4px 7px;
            border-radius: 6px;
            background: rgba(0,0,0,0.62);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
        }
        .history-media-unavailable {
            width: 100%;
            height: 100%;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 18px;
            box-sizing: border-box;
            text-align: center;
            color: rgba(15, 23, 42, 0.72);
            background:
                linear-gradient(135deg, rgba(255,255,255,0.92), rgba(238,242,255,0.94)),
                repeating-linear-gradient(90deg, rgba(99,102,241,0.08) 0 1px, transparent 1px 18px);
        }
        .history-media-unavailable strong {
            color: rgba(15, 23, 42, 0.86);
            font-size: 13px;
        }
        .history-media-unavailable span {
            max-width: 18em;
            font-size: 11px;
            line-height: 1.55;
        }
        .detail-media-strip {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 10px 2px 2px;
        }
        .detail-media-strip button {
            width: 64px;
            height: 48px;
            border-radius: 6px;
            border: 2px solid transparent;
            padding: 0;
            overflow: hidden;
            cursor: pointer;
            background: rgba(255,255,255,0.06);
        }
        .detail-media-strip button.active {
            border-color: #00d4aa;
        }
        .detail-media-strip img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .history-card-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.85), transparent 60%);
            opacity: 0;
            transition: opacity 0.3s;
            display: flex;
            align-items: flex-end;
            padding: 12px;
        }

        .history-card:hover .history-card-overlay {
            opacity: 1;
        }

        .history-card-title {
            font-size: 12px;
            color: white;
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .scrollbar-custom::-webkit-scrollbar {
            width: 5px;
        }

        .scrollbar-custom::-webkit-scrollbar-thumb {
            background: rgba(255, 0, 222, 0.3);
            border-radius: 3px;
        }

        .scrollbar-custom::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 0, 222, 0.5);
        }

        /* Tooltip */
        .tooltip {
            position: relative;
        }

        .tooltip[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(-4px);
            padding: 6px 12px;
            background: rgba(20, 20, 30, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 12px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: all 0.2s;
            z-index: 200;
        }

        .tooltip[data-tooltip]:hover::after {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* 按钮发光效果 */
        .btn-glow {
            position: relative;
        }

        .btn-glow::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 15px;
            background: linear-gradient(135deg, #ff00de, #00ffff);
            z-index: -1;
            opacity: 0;
            filter: blur(12px);
            transition: opacity 0.3s;
        }

        .btn-glow:hover::after {
            opacity: 0.6;
        }

        /* 响应式 */
        @media (max-width: 1024px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .main-content {
                margin-left: 0;
            }
            .settings-panel {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease forwards;
        }

        /* 加载动画 */
        .loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

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

        /* 上传区域 */
        .upload-area {
            border: 2px dashed rgba(255, 255, 255, 0.12);
            border-radius: 18px;
            padding: 40px 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.01);
        }

        .upload-area:hover {
            border-color: rgba(255, 0, 222, 0.45);
            background: rgba(255, 0, 222, 0.04);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(255, 0, 222, 0.08);
        }

        .upload-area.drag-over {
            border-color: #00ffff;
            background: rgba(0, 255, 255, 0.06);
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
        }

        .upload-icon {
            font-size: 44px;
            margin-bottom: 12px;
            filter: grayscale(0.2);
        }

        .upload-text {
            color: rgba(255, 255, 255, 0.45);
            font-size: 14px;
            line-height: 1.6;
        }

        /* 多图上传区域（图生视频） */
        .upload-area-multi {
            border: 2px dashed rgba(255, 255, 255, 0.12);
            border-radius: 20px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.01);
            min-height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .upload-area-multi:hover {
            border-color: rgba(255, 0, 222, 0.45);
            background: rgba(255, 0, 222, 0.04);
        }

        .upload-area-multi.drag-over {
            border-color: #00ffff;
            background: rgba(0, 255, 255, 0.06);
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
        }

        .upload-area-multi.has-images {
            justify-content: flex-start;
            padding: 16px;
        }

        .upload-multi-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .upload-multi-content.hidden {
            display: none;
        }

        .upload-multi-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            width: 100%;
        }

        .upload-multi-item {
            position: relative;
            aspect-ratio: 1;
            border-radius: 12px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            cursor: zoom-in;
        }

        .upload-multi-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }

        .upload-multi-item.is-primary {
            border-color: rgba(0, 255, 255, 0.65);
            box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.18), 0 10px 24px rgba(0, 0, 0, 0.22);
        }

        .upload-multi-actions {
            position: absolute;
            left: 6px;
            right: 6px;
            bottom: 6px;
            display: flex;
            justify-content: center;
            gap: 5px;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 3;
        }

        .upload-multi-item:hover .upload-multi-actions {
            opacity: 1;
        }

        .upload-mini-btn {
            min-width: 26px;
            height: 24px;
            padding: 0 7px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 7px;
            background: rgba(0, 0, 0, 0.58);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            backdrop-filter: blur(10px);
        }

        .upload-mini-btn:hover {
            background: linear-gradient(135deg, rgba(255, 0, 222, 0.72), rgba(0, 200, 255, 0.72));
            border-color: rgba(255, 255, 255, 0.42);
        }

        /* 图片序号标签 */
        .upload-multi-badge {
            position: absolute;
            top: 6px;
            left: 6px;
            background: linear-gradient(135deg, #ff00de, #00ffff);
            color: white;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 6px;
            z-index: 2;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            cursor: pointer;
            transition: all 0.2s;
        }

        .upload-multi-badge:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(255,0,222,0.5);
        }

        .upload-multi-remove {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(255, 0, 0, 0.85);
            border: none;
            color: white;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            opacity: 1;
            z-index: 30;
            pointer-events: auto;
            touch-action: manipulation;
        }

        .upload-multi-item:hover .upload-multi-remove {
            opacity: 1;
        }

        .upload-multi-remove:hover {
            transform: scale(1.1);
            background: rgba(255, 0, 0, 1);
        }

        .upload-multi-add {
            aspect-ratio: 1;
            border-radius: 12px;
            border: 2px dashed rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.2s;
            background: rgba(255, 255, 255, 0.02);
        }

        .upload-multi-add:hover {
            border-color: rgba(255, 0, 222, 0.5);
            color: rgba(255, 0, 222, 0.8);
            background: rgba(255, 0, 222, 0.05);
        }

        .upload-multi-count {
            margin-top: 12px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
        }

        .native-file-input {
            position: absolute;
            left: 0;
            top: 0;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        /* 图生图特有的上传预览 */
        .upload-preview {
            display: none;
            position: relative;
            margin-bottom: 20px;
        }

        .upload-preview.active {
            display: block;
        }

        .preview-image {
            width: 100%;
            max-height: 300px;
            object-fit: contain;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.03);
        }

        .preview-remove {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 0, 0, 0.8);
            border: none;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .preview-remove:hover {
            transform: scale(1.1);
        }

        /* 历史图片选择器 */
        .history-image-picker {
            margin-bottom: 20px;
            border: 1px solid rgba(255, 0, 222, 0.2);
            border-radius: 12px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
        }

        .history-picker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            cursor: pointer;
            background: rgba(255, 0, 222, 0.1);
            color: #fff;
            font-size: 14px;
            transition: background 0.2s;
        }

        .history-picker-header:hover {
            background: rgba(255, 0, 222, 0.15);
        }

        .history-picker-toggle {
            font-size: 12px;
            transition: transform 0.2s;
        }

        .history-picker-toggle.open {
            transform: rotate(180deg);
        }

        .history-picker-body {
            max-height: 200px;
            overflow-y: auto;
        }

        .history-picker-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            padding: 12px;
        }

        .history-picker-item {
            position: relative;
            aspect-ratio: 1;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s;
        }

        .history-picker-item:hover {
            border-color: rgba(255, 0, 222, 0.6);
            transform: scale(1.05);
        }

        .history-picker-item.selected {
            border-color: #ff00de;
            box-shadow: 0 0 10px rgba(255, 0, 222, 0.5);
        }

        .history-picker-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .history-picker-item .type-badge {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .history-picker-empty {
            padding: 20px;
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            font-size: 13px;
        }

        /* 下拉菜单 */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: rgba(20, 20, 30, 0.98);
            border: 1px solid rgba(255, 0, 222, 0.3);
            border-radius: 12px;
            padding: 8px;
            z-index: 100;
            display: none;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            max-height: 300px;
            overflow-y: auto;
        }

        .dropdown-menu.show {
            display: block;
            animation: dropdownFade 0.2s ease;
        }

        @keyframes dropdownFade {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .dropdown-item {
            padding: 10px 14px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
            white-space: nowrap;
        }

        .dropdown-item:hover {
            background: rgba(255, 0, 222, 0.15);
            color: white;
        }

        .dropdown-item.selected {
            color: #ff00de;
            background: rgba(255, 0, 222, 0.1);
        }

        /* 设置项容器 */
        .setting-item {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

        /* 生成结果区域 */
        .result-section {
            background: rgba(10, 10, 15, 0.7);
            border-radius: 22px;
            padding: 24px 28px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            margin-bottom: 28px;
            display: none;
            backdrop-filter: blur(10px);
        }

        .result-section.show {
            display: block;
            animation: fadeIn 0.5s ease;
        }

        .result-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 20px;
            margin-top: 20px;
            align-items: start;
        }

        .result-card {
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            position: relative;
            overflow: hidden;
        }

        .result-card:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 0, 222, 0.5);
            box-shadow: 0 12px 32px rgba(255, 0, 222, 0.15), 0 0 0 1px rgba(255, 0, 222, 0.1);
        }

        /* 图片/视频区 —— 自然比例，不裁剪 */
        .result-card-media {
            width: 100%;
            display: block;
            background: rgba(0,0,0,0.3);
            min-height: 120px;
        }

        .result-card-media img,
        .result-card-media video {
            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
            max-height: 360px;
        }

        /* 底部信息栏 */
        .result-card-footer {
            padding: 12px 14px 14px;
            border-top: 1px solid rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .result-card-prompt {
            flex: 1;
            color: rgba(255,255,255,0.65);
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 140px;
        }

        .result-card-type {
            font-size: 10px;
            padding: 2px 7px;
            border-radius: 20px;
            font-weight: 600;
            letter-spacing: 0.3px;
            flex-shrink: 0;
        }
        .result-card-type.type-img  { background: rgba(78,205,196,0.2);  color: #4ecdc4; }
        .result-card-type.type-video{ background: rgba(255,107,107,0.2); color: #ff6b6b; }

        .result-card-actions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
        }

        .result-action-btn {
            padding: 5px 8px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.3px;
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.7);
        }

        .result-action-btn {
            padding: 5px 8px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.3px;
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.7);
        }
        .result-action-btn:hover {
            transform: translateY(-2px) scale(1.06);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
            background: rgba(255,255,255,0.15);
        }
        .result-action-btn[onclick*="delete"]:hover {
            animation: shake-btn 0.4s ease-in-out;
            background: rgba(220,38,38,0.7) !important;
            transform: translateY(-2px) scale(1.08) rotate(-2deg);
        }
        @keyframes shake-btn {
            0%,100% { transform: translateY(-2px) scale(1.06) rotate(0); }
            25% { transform: translateY(-2px) scale(1.08) rotate(-3deg); }
            75% { transform: translateY(-2px) scale(1.08) rotate(3deg); }
        }
        .result-action-btn[onclick*="toggleFavorite"]:hover,
        .result-action-btn[onclick*="toggleDetailFavorite"]:hover {
            animation: heartbeat 0.6s ease-in-out;
            background: rgba(255,215,0,0.55) !important;
            transform: translateY(-2px) scale(1.15) !important;
        }
        @keyframes heartbeat {
            0%,100% { transform: translateY(-2px) scale(1.06); }
            25% { transform: translateY(-3px) scale(1.18); }
            50% { transform: translateY(-2px) scale(1.08); }
            75% { transform: translateY(-3px) scale(1.18); }
        }
        .result-action-btn[onclick*="download"]:hover {
            background: linear-gradient(135deg, #ff00de, #c800b5) !important;
            box-shadow: 0 4px 25px rgba(255,0,222,0.45), 0 0 40px rgba(255,0,222,0.15);
        }

        /* 历史详情模态框 - 沉浸式大预览 */
        .detail-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.92);
            z-index: 7000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            backdrop-filter: blur(12px);
        }

        .detail-modal.show {
            display: flex;
            animation: detail-fade-in 0.3s ease-out;
        }
        @keyframes detail-fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .detail-modal-content {
            background: linear-gradient(160deg, rgba(22, 22, 35, 0.98), rgba(12, 12, 20, 0.99));
            border-radius: 24px;
            max-width: 900px;
            width: 100%;
            max-height: 92vh;
            overflow-y: auto;
            border: 1px solid rgba(255, 0, 222, 0.2);
            box-shadow: 0 25px 80px rgba(0,0,0,0.7), 0 0 60px rgba(255,0,222,0.08);
            animation: detail-slide-up 0.35s cubic-bezier(0.16,1,0.3,1);
        }
        @keyframes detail-slide-up {
            from { opacity: 0; transform: translateY(30px) scale(0.96); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .detail-modal-header {
            padding: 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .detail-modal-body {
            padding: 24px;
        }

        .detail-image {
            width: 100%;
            border-radius: 16px;
            margin-bottom: 20px;
            max-height: 60vh;
            object-fit: contain;
            background: rgba(0,0,0,0.4);
            animation: detail-img-zoom 0.4s ease-out;
        }
        @keyframes detail-img-zoom {
            from { opacity: 0; transform: scale(1.02); }
            to { opacity: 1; transform: scale(1); }
        }
        /* 详情中的视频 */
        #detailMedia {
            width: 100% !important;
            border-radius: 16px !important;
            margin-bottom: 20px !important;
            max-height: 60vh !important;
            object-fit: contain !important;
            background: rgba(0,0,0,0.5) !important;
            box-shadow: 0 8px 40px rgba(255,0,222,0.12) !important;
            animation: detail-img-zoom 0.4s ease-out !important;
        }

        .detail-info {
            display: grid;
            gap: 16px;
        }

        .detail-info-item {
            display: flex;
            gap: 12px;
        }

        .detail-info-label {
            color: rgba(255, 255, 255, 0.5);
            min-width: 80px;
        }

        .detail-info-value {
            color: white;
        }

        .detail-modal-close {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .detail-modal-close:hover {
            background: rgba(255, 0, 222, 0.3);
        }

        /* 详情按钮特效 */
        .detail-fancy-btn {
            position: relative;
            overflow: hidden;
            letter-spacing: 0.5px;
        }
        .detail-fancy-btn::before {
            content:'';
            position:absolute;
            top:-50%;left:-50%;
            width:200%;height:200%;
            background:conic-gradient(transparent,rgba(255,255,255,0.12),transparent 30%);
            animation:btn-rotate-border 3s linear infinite;
            opacity:0;
            transition:opacity 0.3s;
        }
        .detail-fancy-btn:hover::before { opacity:1; }
        @keyframes btn-rotate-border { to { transform:rotate(360deg); } }

        .detail-btn-download:hover {
            transform: translateY(-2px) scale(1.04) !important;
            box-shadow: 0 8px 30px rgba(255,0,222,0.4) !important;
        }
        .detail-btn-regen:hover {
            transform: translateY(-2px) scale(1.04) !important;
            box-shadow: 0 8px 30px rgba(0,212,170,0.35) !important;
            animation: regen-spin 0.6s ease-in-out !important;
        }
        @keyframes regen-spin {
            0% { transform: translateY(-2px) scale(1.04) rotate(0deg); }
            50% { transform: translateY(-3px) scale(1.08) rotate(6deg); }
            100% { transform: translateY(-2px) scale(1.04) rotate(0deg); }
        }
        .detail-btn-share:hover {
            transform: translateY(-2px) scale(1.04) !important;
            box-shadow: 0 8px 25px rgba(6,182,212,0.35) !important;
        }
        .detail-btn-fav:hover {
            transform: translateY(-2px) scale(1.06) !important;
            box-shadow: 0 8px 25px rgba(245,158,11,0.35) !important;
            animation: fav-bounce 0.5s ease-in-out !important;
        }
        @keyframes fav-bounce {
            0%,100% { transform: translateY(-2px) scale(1.06); }
            33% { transform: translateY(-4px) scale(1.15); }
            66% { transform: translateY(-2px) scale(1.08); }
        }

        /* 进度条 */
        .progress-container {
            display: none;
            margin-top: 20px;
            padding: 20px 24px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .progress-container.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .progress-text {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
        }

        .progress-percent {
            font-size: 20px;
            font-weight: 700;
            background: linear-gradient(135deg, #ff00de, #00ffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .progress-elapsed {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.35);
        }

        .progress-bar-wrapper {
            position: relative;
            height: 10px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 5px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff00de, #00ffff);
            border-radius: 5px;
            width: 0%;
            position: relative;
            /* 不使用 CSS transition，由 JS 直接控制每一帧的值 */
        }

        /* 进度条条纹动画 */
        .progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                -45deg,
                transparent,
                transparent 8px,
                rgba(255, 255, 255, 0.15) 8px,
                rgba(255, 255, 255, 0.15) 16px
            );
            animation: progressStripes 1s linear infinite;
        }

        @keyframes progressStripes {
            0% { background-position: 0 0; }
            100% { background-position: 32px 0; }
        }

        /* 进度条发光效果 */
        .progress-fill::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
            border-radius: 0 5px 5px 0;
            animation: progressGlow 2s ease-in-out infinite;
        }

        @keyframes progressGlow {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* AI扩写弹窗 */
        .ai-expand-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 5000;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .ai-expand-modal.show {
            display: flex;
        }

        .ai-expand-content {
            background: rgba(20, 20, 30, 0.98);
            border-radius: 20px;
            padding: 24px;
            width: 90%;
            max-width: 600px;
            border: 1px solid rgba(255, 0, 222, 0.3);
        }

        .ai-expand-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .ai-expand-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
        }

        .ai-expand-close {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.5);
            font-size: 24px;
            cursor: pointer;
        }

        .ai-expand-textarea {
            width: 100%;
            min-height: 120px;
            padding: 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: white;
            font-size: 14px;
            resize: none;
            margin-bottom: 16px;
        }

        .ai-expand-textarea:focus {
            outline: none;
            border-color: rgba(255, 0, 222, 0.5);
        }

        .ai-expand-suggestions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 16px;
        }

        .ai-expand-suggestion {
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
        }

        .ai-expand-suggestion:hover {
            background: rgba(255, 0, 222, 0.1);
            border-color: rgba(255, 0, 222, 0.3);
            color: white;
        }

        .ai-expand-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .ai-expand-btn {
            padding: 10px 20px;
            border-radius: 10px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
        }

        .ai-expand-btn.cancel {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .ai-expand-btn.confirm {
            background: linear-gradient(135deg, #ff00de, #00ffff);
            color: white;
            font-weight: 600;
        }

        .ai-expand-btn:hover {
            transform: translateY(-2px);
        }

        /* 通知提示 */
        .notification {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 60000;
            display: none;
            max-width: min(440px, calc(100vw - 32px));
        }

        .notification.show {
            display: block;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .notification-content {
            padding: 14px 18px;
            border-radius: 12px;
            background: #0f172a;
            border: 1px solid rgba(148,163,184,0.28);
            box-shadow: 0 18px 48px rgba(15,23,42,0.28), 0 4px 12px rgba(15,23,42,0.18);
            display: flex;
            align-items: center;
            gap: 12px;
            color: #f8fafc;
            backdrop-filter: none;
        }

        .notification-content.success {
            background: #052e2b;
            border-color: rgba(20,184,166,0.55);
        }

        .notification-content.error {
            background: #3b0a14;
            border-color: rgba(248,113,113,0.58);
        }

        .notification-content.info {
            background: #082f49;
            border-color: rgba(56,189,248,0.55);
        }

        .notification-content.warning {
            background: #422006;
            border-color: rgba(251,191,36,0.62);
        }

        .notification-icon {
            font-size: 18px;
            font-weight: 900;
            color: #f8fafc;
            flex: 0 0 auto;
        }

        .notification-text {
            color: #f8fafc;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.45;
            word-break: break-word;
        }

        /* 收藏夹模态框 */
        .favorites-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 5000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }

        .favorites-modal.show {
            display: flex;
        }

        .favorites-content {
            background: rgba(20, 20, 30, 0.95);
            border-radius: 24px;
            max-width: 1000px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            border: 1px solid rgba(255, 0, 222, 0.2);
            padding: 24px;
        }

        .favorites-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
            margin-top: 20px;
        }

        .favorites-grid.history-full-grid {
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            align-items: stretch;
        }

        .history-full-content {
            width: min(1560px, calc(100vw - 56px));
            max-width: none;
            max-height: calc(100vh - 56px);
            padding: 24px;
        }

        .history-full-content .favorites-grid.history-full-grid {
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 18px;
            align-items: stretch;
        }

        @media (min-width: 1280px) {
            .history-full-content .favorites-grid.history-full-grid {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
        }

        @media (max-width: 760px) {
            .history-full-content {
                width: calc(100vw - 20px);
                max-height: calc(100vh - 20px);
                padding: 14px;
            }

            .history-full-content .favorites-grid.history-full-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                gap: 12px;
            }
        }

        .history-full-card {
            cursor: pointer;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .history-full-card .history-single-media,
        .history-full-card .history-media-stack {
            width: 100%;
            aspect-ratio: 16 / 10;
            height: auto;
            min-height: 0;
            flex: 0 0 auto;
            border-radius: 8px 8px 0 0;
            background: #f6f7fb;
        }

        .history-full-card .history-single-media.is-full {
            height: auto;
            min-height: 0;
            background: #f6f7fb;
        }

        .history-full-card .history-media-stack.is-full {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: repeat(2, minmax(0, 1fr));
            grid-auto-rows: unset;
            gap: 3px;
            padding: 3px;
            overflow: hidden;
        }

        .history-full-card .history-media-stack.is-full .history-media-tile {
            min-height: 0;
        }

        .history-full-card .history-single-media img,
        .history-full-card .history-single-media video,
        .history-full-card .history-media-tile img,
        .history-full-card .history-media-tile video {
            width: 100%;
            height: 100%;
            max-height: none;
            object-fit: contain;
            display: block;
        }

        .history-full-card .history-single-media video,
        .history-full-card .history-media-tile video {
            background: #000;
        }

        .history-full-card img.history-lazy-media {
            background: linear-gradient(135deg, #f6f7fb, #eef2ff);
        }

        .history-full-meta {
            padding: 10px 12px 12px;
            background: rgba(255,255,255,0.86);
            border-top: 1px solid rgba(16,19,24,0.08);
        }

        .history-full-prompt {
            color: var(--ark-ink);
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .history-full-time {
            color: var(--ark-muted);
            font-size: 11px;
            margin-top: 4px;
        }

        .history-full-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 8px;
        }

        .history-full-section {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-top: 18px;
        }

        .history-full-section + .history-full-section {
            margin-top: 30px;
        }

        .history-full-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 0 2px 10px;
            border-bottom: 1px solid rgba(15, 23, 42, 0.08);
            color: var(--ark-ink);
            font-weight: 800;
        }

        .history-full-section-head span {
            font-size: 16px;
        }

        .history-full-section-head em {
            font-style: normal;
            font-size: 12px;
            color: var(--ark-muted);
        }

        .empty-state {
            text-align: center;
            min-height: 240px;
            padding: 60px 20px;
            color: rgba(255, 255, 255, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .empty-icon {
            display: none !important;
        }

        /* 设置页面模态框 */
        .settings-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 5000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }

        .settings-modal.show {
            display: flex;
        }

        .settings-content {
            background: rgba(20, 20, 30, 0.95);
            border-radius: 24px;
            max-width: 600px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            border: 1px solid rgba(255, 0, 222, 0.2);
            padding: 24px;
        }

        .settings-section {
            margin-bottom: 24px;
        }

        .settings-section-title {
            font-size: 16px;
            font-weight: 600;
            color: white;
            margin-bottom: 16px;
        }

        .settings-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            margin-bottom: 12px;
        }

        .settings-option-label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
        }

        .toggle-switch {
            width: 50px;
            height: 26px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 13px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s;
        }

        .toggle-switch.active {
            background: linear-gradient(135deg, #ff00de, #00ffff);
        }

        .toggle-switch::after {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: all 0.3s;
        }

        .toggle-switch.active::after {
            left: 26px;
        }

        .scrollbar-custom::-webkit-scrollbar {
            width: 8px;
        }

        .scrollbar-custom::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .scrollbar-custom::-webkit-scrollbar-thumb {
            background: rgba(255, 0, 222, 0.5);
            border-radius: 4px;
        }

        .scrollbar-custom::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 0, 222, 0.7);
        }

        /* 3D效果卡片 */
        .card-3d {
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .card-3d:hover {
            transform: rotateY(5deg) rotateX(5deg);
        }

        /* 加载动画 */
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255, 255, 255, 0.1);
            border-top-color: #ff00de;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        /* 脉冲动画 */
        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* 悬浮提示 */
        .tooltip {
            position: relative;
        }

        .tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            font-size: 12px;
            border-radius: 6px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            margin-top: 0;
        }

        .tooltip:hover::after {
            opacity: 1;
            visibility: visible;
        }

        /* 渐变边框 */
        .gradient-border {
            position: relative;
            overflow: hidden;
        }

        .gradient-border::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 0, 222, 0.3), transparent);
            transform: rotate(45deg);
            animation: gradientMove 3s linear infinite;
        }

        @keyframes gradientMove {
            0% { transform: translateX(-100%) rotate(45deg); }
            100% { transform: translateX(100%) rotate(45deg); }
        }

        /* 按钮光效 */
        .btn-glow {
            position: relative;
            overflow: hidden;
        }

        .btn-glow::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

        .btn-glow:hover::before {
            left: 100%;
        }

        /* 拖拽区域 */
        .drop-zone {
            border: 2px dashed rgba(255, 255, 255, 0.2);
            transition: all 0.3s;
        }

        .drop-zone.drag-over {
            border-color: #ff00de;
            background: rgba(255, 0, 222, 0.1);
        }

        /* 统计卡片 */
        .stat-card {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s;
        }

        .stat-card:hover {
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-4px);
        }

        .stat-number {
            font-size: 32px;
            font-weight: 700;
            background: linear-gradient(135deg, #ff00de, #00ffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-label {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            margin-top: 4px;
        }

        /* 对话框动画 */
        .dialog-enter {
            animation: dialogEnter 0.4s ease;
        }

        @keyframes dialogEnter {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* 快捷键提示 */
        .shortcut-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 24px;
            height: 24px;
            padding: 0 6px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.7);
        }

        /* 标签输入 */
        .tag-input-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            min-height: 80px;
        }

        .tag-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(255, 0, 222, 0.2);
            border: 1px solid rgba(255, 0, 222, 0.3);
            border-radius: 20px;
            font-size: 13px;
        }

        .tag-remove {
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .tag-remove:hover {
            opacity: 1;
        }

        /* 时间轴 */
        .timeline {
            position: relative;
            padding-left: 30px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: rgba(255, 255, 255, 0.1);
        }

        .timeline-item {
            position: relative;
            padding-bottom: 24px;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -24px;
            top: 4px;
            width: 10px;
            height: 10px;
            background: linear-gradient(135deg, #ff00de, #00ffff);
            border-radius: 50%;
            border: 2px solid rgba(20, 20, 30, 1);
        }

        /* 进度环形 */
        .progress-ring {
            transform: rotate(-90deg);
        }

        .progress-ring__circle {
            stroke-dasharray: 283;
            stroke-dashoffset: 283;
            transition: stroke-dashoffset 0.5s;
        }

        /* 骨架屏 */
        .skeleton {
            background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }

        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* ====== 文生图分栏布局 ====== */
        .t2i-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-top: 4px;
        }

        @media (max-width: 1024px) {
            .t2i-layout {
                grid-template-columns: 1fr;
            }
        }

        /* 左侧输入区 */
        .t2i-left {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        /* 预设按钮 */
        .t2i-presets {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .t2i-preset-btn {
            padding: 10px 8px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .t2i-preset-btn:hover {
            background: linear-gradient(135deg, rgba(255, 0, 222, 0.2), rgba(0, 255, 255, 0.15));
            border-color: rgba(255, 0, 222, 0.4);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(255, 0, 222, 0.2);
        }

        /* 表单组 */
        .t2i-form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .t2i-label {
            font-size: 13px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.6);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .t2i-label i {
            font-size: 12px;
            color: #ff00de;
        }

        .t2i-textarea {
            width: 100%;
            min-height: 120px;
            padding: 14px 16px;
            background: rgba(255, 255, 255, 0.04);
            border: 1.5px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            color: white;
            font-size: 15px;
            font-family: 'Noto Sans SC', sans-serif;
            resize: vertical;
            transition: all 0.3s;
            line-height: 1.6;
        }

        .t2i-textarea:focus {
            outline: none;
            border-color: rgba(255, 0, 222, 0.5);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 0 20px rgba(255, 0, 222, 0.1);
        }

        .t2i-textarea::placeholder {
            color: rgba(255, 255, 255, 0.25);
        }

        .t2i-textarea-sm {
            min-height: 60px;
        }

        .t2i-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 12px;
        }

        .t2i-row-4 {
            grid-template-columns: 0.88fr 1.18fr 1fr 0.8fr;
        }

        @media (max-width: 980px) {
            .t2i-row-4 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            .t2i-row,
            .t2i-row-4 {
                grid-template-columns: 1fr;
            }
        }

        .t2i-half {
            flex: 1;
        }

        .t2i-select {
            width: 100%;
            padding: 10px 14px;
            background: rgba(255, 255, 255, 0.04);
            border: 1.5px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: white;
            font-size: 14px;
            font-family: 'Noto Sans SC', sans-serif;
            cursor: pointer;
            transition: all 0.3s;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.5)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
        }

        .t2i-select:focus {
            outline: none;
            border-color: rgba(255, 0, 222, 0.5);
        }

        .t2i-select option {
            background: #1a1a2e;
            color: white;
        }

        /* 操作栏 */
        .t2i-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .t2i-tools {
            display: flex;
            gap: 6px;
        }

        /* 右侧预览区 */
        .t2i-right {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .t2i-preview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
        }

        .t2i-preview-header i {
            color: #ff00de;
            margin-right: 6px;
        }

        .t2i-preview-actions {
            display: flex;
            gap: 8px;
        }

        .t2i-action-btn {
            padding: 6px 14px;
            background: rgba(255, 0, 222, 0.2);
            border: 1px solid rgba(255, 0, 222, 0.3);
            border-radius: 8px;
            color: white;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .t2i-action-btn:hover {
            background: rgba(255, 0, 222, 0.4);
            transform: translateY(-1px);
        }

        .t2i-action-btn-danger {
            background: rgba(255, 0, 85, 0.15);
            border-color: rgba(255, 0, 85, 0.3);
        }

        .t2i-action-btn-danger:hover {
            background: rgba(255, 0, 85, 0.3);
        }

        /* 浅色主题下的生成结果操作按钮：覆盖旧深色内联样式 */
        .t2i-preview-actions .t2i-action-btn,
        #t2iBottomActions button,
        #img2imgBottomActions button,
        #t2vBottomActions button,
        #i2vBottomActions button,
        .thumb-action-btn {
            min-height: 36px !important;
            padding: 8px 16px !important;
            border-radius: 8px !important;
            background: rgba(255, 255, 255, 0.94) !important;
            border: 1px solid rgba(13, 148, 136, 0.24) !important;
            color: #10202a !important;
            font-size: 13px !important;
            font-weight: 800 !important;
            line-height: 1 !important;
            letter-spacing: 0 !important;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            opacity: 1 !important;
            cursor: pointer !important;
        }

        .t2i-preview-actions .t2i-action-btn:hover,
        #t2iBottomActions button:hover,
        #img2imgBottomActions button:hover,
        #t2vBottomActions button:hover,
        #i2vBottomActions button:hover,
        .thumb-action-btn:hover {
            background: #ffffff !important;
            border-color: rgba(13, 148, 136, 0.5) !important;
            color: #071217 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16) !important;
        }

        .t2i-preview-actions .t2i-action-btn-danger,
        #t2iBottomActions button:last-child,
        #img2imgBottomActions button:last-child,
        #t2vBottomActions button:last-child,
        #i2vBottomActions button:last-child,
        .thumb-action-btn.thumb-del {
            background: rgba(255, 241, 242, 0.96) !important;
            border-color: rgba(244, 63, 94, 0.34) !important;
            color: #b4233a !important;
        }

        .t2i-preview-actions .t2i-action-btn-danger:hover,
        #t2iBottomActions button:last-child:hover,
        #img2imgBottomActions button:last-child:hover,
        #t2vBottomActions button:last-child:hover,
        #i2vBottomActions button:last-child:hover,
        .thumb-action-btn.thumb-del:hover {
            background: #fff1f2 !important;
            border-color: rgba(225, 29, 72, 0.52) !important;
            color: #8f1027 !important;
        }

        /* 图片容器 */
        .t2i-image-container {
            flex: 1;
            background: rgba(255, 255, 255, 0.02);
            border: 2px dashed rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            min-height: 380px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            transition: all 0.3s;
        }

        .t2i-image-container:hover {
            border-color: rgba(255, 0, 222, 0.3);
        }

        .t2i-image-container img {
            max-width: 100%;
            max-height: 100%;
            border-radius: 18px;
            display: block;
            transition: transform 0.3s ease, opacity 0.5s ease;
        }

        .t2i-image-container img:hover {
            transform: scale(1.02);
        }

        /* 占位符 */
        .t2i-placeholder {
            text-align: center;
            color: rgba(255, 255, 255, 0.3);
        }

        .t2i-placeholder-icon {
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes lightboxFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes lightboxZoomIn {
            from { opacity: 0; transform: scale(0.92); }
            to { opacity: 1; transform: scale(1); }
        }

        .t2i-placeholder p {
            font-size: 15px;
            margin-bottom: 6px;
        }

        .t2i-placeholder-sub {
            font-size: 12px !important;
            color: rgba(255, 255, 255, 0.15) !important;
        }

        /* ====== 缩略图预览区（右侧）—— 全新设计 ====== */

        /* 预览容器有内容时的样式：居中显示缩略图，不再撑满 */
        .t2i-image-container.has-result {
            justify-content: center !important;
            align-items: center !important;
            padding: 20px;
            min-height: auto !important;
            flex-direction: column;
        }

        .preview-thumbnail-wrap {
            position: relative;
            /* 固定尺寸，真正的缩略图 */
            width: 240px;
            max-width: 90%;
            border-radius: 14px;
            overflow: hidden;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 0, 222, 0.15);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 0, 222, 0.08);
            transition: all 0.3s ease;
        }
        .preview-thumbnail-wrap:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 0, 222, 0.12);
            border-color: rgba(255, 0, 222, 0.35);
        }

        .preview-thumb-img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            display: block;
            transition: transform 0.35s ease;
        }
        .preview-thumb-img:hover {
            transform: scale(1.05);
        }

        .preview-thumb-video {
            width: 100%;
            height: 200px;
            object-fit: contain;
            display: block;
            border-radius: 13px;
            background: #000;
        }

        .preview-video-wrap {
            width: 280px;
            max-width: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .preview-video-stage {
            position: relative;
            width: 100%;
            min-height: 220px;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .preview-video-stage .preview-thumb-video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 12px;
        }

        /* 悬浮在图片上的遮罩 + 操作按钮 */
        .preview-thumb-overlay {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            top: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            opacity: 0;
            transition: opacity 0.28s ease;
            pointer-events: none;
            border-radius: 14px;
        }
        .preview-thumbnail-wrap:hover .preview-thumb-overlay {
            opacity: 1;
        }

        .preview-thumb-top-hint {
            align-self: flex-end;
            font-size: 11px;
            color: #fff;
            background: linear-gradient(135deg, rgba(255,0,222,0.6), rgba(0,200,255,0.5));
            padding: 4px 12px;
            border-radius: 20px;
            backdrop-filter: blur(8px);
            letter-spacing: 0.5px;
        }

        .preview-thumb-bottom-bar {
            display: flex;
            gap: 6px;
            width: 100%;
            justify-content: center;
            pointer-events: auto;
        }

        /* 操作按钮——内嵌到悬浮层，更精致 */
        .preview-thumb-actions {
            display: flex;
            gap: 7px;
            margin-top: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .thumb-action-btn {
            padding: 7px 16px;
            border-radius: 20px;
            border: none;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.22s ease;
            white-space: nowrap;
            font-weight: 500;
            letter-spacing: 0.3px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .thumb-action-btn:hover {
            transform: translateY(-1.5px);
            box-shadow: 0 4px 14px rgba(0,0,0,0.3);
        }
        /* 重新生成——渐变蓝紫主按钮 */
        .thumb-regen {
            background: linear-gradient(135deg, #00b4d8, #7209b7);
            color: #fff;
            box-shadow: 0 2px 10px rgba(114, 9, 183, 0.35);
        }
        .thumb-regen:hover {
            background: linear-gradient(135deg, #00c4e8, #8b19cf);
            box-shadow: 0 4px 18px rgba(114, 9, 183, 0.5);
        }
        /* 下载——翠绿 */
        .thumb-dl {
            background: linear-gradient(135deg, #06d6a0, #00a86b);
            color: #fff;
            box-shadow: 0 2px 10px rgba(0, 168, 107, 0.3);
        }
        .thumb-dl:hover {
            background: linear-gradient(135deg, #16e6b0, #10b87b);
            box-shadow: 0 4px 18px rgba(0, 168, 107, 0.45);
        }
        /* 删除——珊瑚红 */
        .thumb-del {
            background: linear-gradient(135deg, #ef476f, #c1121f);
            color: #fff;
            box-shadow: 0 2px 10px rgba(193, 18, 31, 0.3);
        }
        .thumb-del:hover {
            background: linear-gradient(135deg, #ff5778, #e12232);
            box-shadow: 0 4px 18px rgba(193, 18, 31, 0.45);
        }

        /* ====== 工作流模式 - 全新两栏布局 ====== */
        .create-section.workflow-panel { display: none !important; }
        .create-section.workflow-panel.active { display: block !important; }

        /* 顶部工具栏 */
        .wf-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: rgba(255,255,255,0.03); border-radius: 14px; margin-bottom: 16px; }
        .wf-steps { display: flex; gap: 6px; align-items: center; }
        .wf-step { display: flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: .2s; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.35); border: 1px solid transparent; }
        .wf-step:hover { background: rgba(255,255,255,0.08); color: #fff; }
        .wf-step.act { background: linear-gradient(135deg, #ff00de, #00ffff); color: #fff; }
        .wf-step.done { background: rgba(0,255,136,0.1); color: #00ff88; border-color: rgba(0,255,136,0.2); }
        .wf-step-num { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.08); }
        .wf-step.act .wf-step-num { background: rgba(255,255,255,0.2); }

        /* ===== 新三栏主布局（章节 + 输入 + 结果） ===== */
        .wf-main-layout {
            display: grid;
            grid-template-columns: 220px 420px 1fr;
            gap: 16px;
            min-height: calc(100vh - 260px);
        }
        @media (max-width: 1200px) { .wf-main-layout { grid-template-columns: 200px 360px 1fr; } }
        @media (max-width: 900px) { .wf-main-layout { grid-template-columns: 1fr; } }

        /* ====== 项目树状结构（重新设计） ====== */

        /* 顶部工具栏：项目标题行 */
        .wf-panel-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            background: rgba(255,255,255,0.02);
        }
        .wf-panel-topbar-label {
            font-size: 11px;
            font-weight: 700;
            color: rgba(255,255,255,0.35);
        }

        /* 项目树容器（可滚动） */
        .wf-project-tree {
            flex: 1;
            overflow-y: auto;
            padding: 6px 0 8px;
        }
        .wf-project-tree::-webkit-scrollbar { width: 3px; }
        .wf-project-tree::-webkit-scrollbar-track { background: transparent; }
        .wf-project-tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

        /* 每个项目节点 */
        .wf-proj-node {
            margin: 0 8px 4px;
        }

        /* 项目头部行（可点击展开） */
        .wf-proj-row {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 10px;
            background: rgba(99,102,241,0.08);
            border: 1px solid transparent;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.18s ease;
            position: relative;
        }
        .wf-proj-row:hover {
            background: rgba(99,102,241,0.15);
            border-color: rgba(99,102,241,0.35);
        }
        .wf-proj-node.active > .wf-proj-row {
            background: rgba(99,102,241,0.22);
            border-color: #6366f1;
            box-shadow: 0 0 0 1px rgba(99,102,241,0.3);
        }
        .wf-proj-arrow {
            font-size: 9px;
            color: rgba(255,255,255,0.4);
            transition: transform 0.2s;
            flex-shrink: 0;
            width: 12px;
            text-align: center;
        }
        .wf-proj-node.expanded > .wf-proj-row .wf-proj-arrow { transform: rotate(90deg); }
        .wf-proj-icon { font-size: 14px; flex-shrink: 0; }
        .wf-proj-info { flex: 1; min-width: 0; }
        .wf-proj-name {
            font-size: 12px;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .wf-proj-meta {
            font-size: 10px;
            color: rgba(255,255,255,0.32);
            margin-top: 1px;
        }
        .wf-proj-del {
            width: 20px; height: 20px; border-radius: 50%;
            border: none; background: transparent;
            color: rgba(255,255,255,0.3); cursor: pointer;
            font-size: 11px; display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: all 0.18s; flex-shrink: 0;
        }
        .wf-proj-row:hover .wf-proj-del { opacity: 1; }
        .wf-proj-del:hover { background: rgba(255,0,0,0.25); color: #ff6b6b; }

        /* 展开内容区（故事概览 + 章节列表） */
        .wf-proj-body {
            display: none;
            padding: 6px 0 4px 22px;
            position: relative;
        }
        /* 左侧竖线 */
        .wf-proj-body::before {
            content: '';
            position: absolute;
            left: 14px;
            top: 4px;
            bottom: 8px;
            width: 1px;
            background: rgba(99,102,241,0.2);
        }
        .wf-proj-node.expanded > .wf-proj-body { display: block; }

        /* 故事概览区 */
        .wf-proj-overview {
            margin-bottom: 6px;
            padding: 8px 10px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 8px;
            position: relative;
        }
        .wf-proj-overview-label {
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,183,77,0.7);
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .wf-proj-overview-edit {
            font-size: 9px;
            padding: 1px 6px;
            background: rgba(255,183,77,0.12);
            border: none; border-radius: 4px;
            color: rgba(255,183,77,0.7); cursor: pointer;
            transition: all 0.15s;
        }
        .wf-proj-overview-edit:hover { background: rgba(255,183,77,0.22); color: #ffb74d; }
        .wf-proj-overview-text {
            font-size: 11px;
            color: rgba(255,255,255,0.45);
            line-height: 1.5;
            max-height: 54px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .wf-proj-overview-placeholder {
            font-size: 11px;
            color: rgba(255,255,255,0.2);
            font-style: italic;
        }

        /* 章节子标题行 */
        .wf-proj-ch-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 6px 4px 0;
            margin-bottom: 3px;
        }
        .wf-proj-ch-label {
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,255,255,0.3);
            letter-spacing: 0.8px;
        }

        /* 章节列表（在项目体内） */
        .wf-proj-chapter-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        /* 章节条目 */
        .wf-proj-ch-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            background: rgba(255,255,255,0.025);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.18s ease;
        }
        .wf-proj-ch-item:hover {
            background: rgba(255,0,222,0.08);
            border-color: rgba(255,0,222,0.25);
        }
        .wf-proj-ch-item.active {
            background: rgba(255,0,222,0.14);
            border-color: rgba(255,0,222,0.5);
        }
        .wf-proj-ch-icon { font-size: 12px; flex-shrink: 0; }
        .wf-proj-ch-info { flex: 1; min-width: 0; }
        .wf-proj-ch-name {
            font-size: 12px;
            font-weight: 500;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .wf-proj-ch-status {
            font-size: 10px;
            color: rgba(255,255,255,0.3);
            margin-top: 1px;
        }
        .wf-proj-ch-del {
            width: 18px; height: 18px; border-radius: 50%;
            border: none; background: transparent;
            color: rgba(255,255,255,0.25); cursor: pointer;
            font-size: 10px; display: flex; align-items: center; justify-content: center;
            opacity: 0; transition: all 0.18s; flex-shrink: 0;
        }
        .wf-proj-ch-item:hover .wf-proj-ch-del { opacity: 1; }
        .wf-proj-ch-del:hover { background: rgba(255,0,0,0.25); color: #ff6b6b; }

        /* 全局空状态（没有项目时） */
        .wf-no-project {
            padding: 24px 16px;
            text-align: center;
        }
        .wf-no-project-icon { font-size: 28px; margin-bottom: 8px; }
        .wf-no-project-text { font-size: 12px; color: rgba(255,255,255,0.3); line-height: 1.6; }

        /* 章节上下文角标 */
        .wf-chapter-ctx-badge {
            display: inline-block;
            font-size: 8px;
            padding: 1px 5px;
            background: rgba(0,200,255,0.15);
            color: #00c8ff;
            border-radius: 4px;
            margin-left: 4px;
            vertical-align: middle;
        }

        /* 章节面板（旧样式兼容） */
        .wf-chapter-panel {
            background: rgba(10,10,20,0.7);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 14px;
            overflow: hidden;
            height: fit-content;
            max-height: calc(100vh - 280px);
            display: flex;
            flex-direction: column;
        }
        .wf-chapter-body {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }
        .wf-chapter-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .wf-chapter-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .wf-chapter-item:hover {
            background: rgba(255,0,222,0.1);
            border-color: rgba(255,0,222,0.3);
        }
        .wf-chapter-item.active {
            background: rgba(255,0,222,0.15);
            border-color: #ff00de;
        }
        .wf-chapter-icon { font-size: 18px; }
        .wf-chapter-info { flex: 1; min-width: 0; }
        .wf-chapter-name {
            font-size: 13px;
            font-weight: 500;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .wf-chapter-status {
            font-size: 11px;
            color: rgba(255,255,255,0.4);
            margin-top: 2px;
        }
        .wf-chapter-del {
            width: 22px; height: 22px; border-radius: 50%;
            border: none; background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.5); cursor: pointer;
            font-size: 12px; display: flex; align-items: center;
            justify-content: center; opacity: 0; transition: all 0.2s;
        }
        .wf-chapter-item:hover .wf-chapter-del { opacity: 1; }
        .wf-chapter-del:hover { background: rgba(255,0,0,0.3); color: #fff; }

        /* 左侧输入面板 */
        .wf-input-panel {
            background: rgba(10,10,20,0.7);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 18px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            max-height: calc(100vh - 240px);
        }
        .wf-input-header {
            padding: 14px 18px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,0.02);
        }
        .wf-input-header-icon { font-size: 18px; }
        .wf-input-header-title { font-size: 14px; font-weight: 700; color: #fff; flex: 1; }
        .wf-input-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        .wf-input-body::-webkit-scrollbar { width: 4px; }
        .wf-input-body::-webkit-scrollbar-thumb { background: rgba(255,0,222,0.3); border-radius: 2px; }

        /* 输入步骤区块 */
        .wf-input-step {
            margin-bottom: 14px;
        }
        .wf-input-step-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .wf-input-step-num {
            width: 22px; height: 22px;
            border-radius: 50%;
            background: rgba(255,0,222,0.2);
            border: 1px solid rgba(255,0,222,0.4);
            color: #ff00de;
            font-size: 10px;
            font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .wf-input-step-num.done {
            background: rgba(0,255,136,0.15);
            border-color: rgba(0,255,136,0.4);
            color: #00ff88;
        }
        .wf-input-step-label {
            font-size: 12px;
            font-weight: 600;
            color: rgba(255,255,255,0.7);
            flex: 1;
        }

        /* 参数反馈标签 */
        .wf-feedback-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }
        .wf-feedback-tag {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 20px;
            font-size: 11px;
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: .2s;
        }
        .wf-feedback-tag:hover {
            border-color: rgba(255,0,222,0.4);
            color: #fff;
            background: rgba(255,0,222,0.08);
        }
        .wf-feedback-tag.active {
            background: rgba(255,0,222,0.15);
            border-color: rgba(255,0,222,0.5);
            color: #ff00de;
            font-weight: 600;
        }
        .wf-feedback-tag.active-blue {
            background: rgba(0,150,255,0.15);
            border-color: rgba(0,150,255,0.5);
            color: #4da6ff;
            font-weight: 600;
        }
        .wf-feedback-tag.active-green {
            background: rgba(0,255,136,0.1);
            border-color: rgba(0,255,136,0.4);
            color: #00ff88;
            font-weight: 600;
        }
        .wf-feedback-tag-icon { font-size: 12px; }

        /* 分隔线 */
        .wf-divider {
            height: 1px;
            background: rgba(255,255,255,0.05);
            margin: 12px 0;
        }

        /* 右侧结果面板 */
        .wf-result-panel {
            background: rgba(10,10,20,0.5);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 18px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            max-height: calc(100vh - 240px);
        }
        .wf-result-header {
            padding: 14px 18px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255,255,255,0.02);
        }
        .wf-result-tabs {
            display: flex;
            gap: 4px;
        }
        .wf-result-tab {
            padding: 5px 12px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: .2s;
            background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.4);
            border: 1px solid transparent;
        }
        .wf-result-tab:hover { background: rgba(255,255,255,0.08); color: #fff; }
        .wf-result-tab.active { background: rgba(255,0,222,0.15); border-color: rgba(255,0,222,0.35); color: #ff00de; }
        .wf-result-tab.done { border-color: rgba(0,255,136,0.3); color: #00ff88; background: rgba(0,255,136,0.06); }
        .wf-result-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        .wf-result-body::-webkit-scrollbar { width: 5px; }
        .wf-result-body::-webkit-scrollbar-thumb { background: rgba(255,0,222,0.2); border-radius: 3px; }

        /* 结果区域：剧本 */
        .wf-script-result {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
            padding: 14px 16px;
            font-size: 13px;
            line-height: 1.8;
            color: rgba(255,255,255,0.75);
            min-height: 120px;
            white-space: pre-wrap;
        }
        .wf-script-result.empty {
            display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,0.2);
            font-size: 14px;
            min-height: 200px;
        }

        /* 结果区域：分镜网格 */
        .wf-storyboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
        }
        .wf-sb-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: .2s;
        }
        .wf-sb-card:hover { border-color: rgba(255,0,222,0.3); transform: translateY(-2px); }
        .wf-sb-card.active { border-color: rgba(255,0,222,0.6); box-shadow: 0 0 0 2px rgba(255,0,222,0.15); }
        .wf-sb-thumb {
            width: 100%;
            aspect-ratio: 16/9;
            background: rgba(0,0,0,0.4);
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
            position: relative;
        }
        .wf-sb-thumb img, .wf-sb-thumb video { width: 100%; height: 100%; object-fit: contain; background: #05070b; }
        .wf-sb-status-badge {
            position: absolute;
            top: 6px; right: 6px;
            padding: 2px 7px;
            border-radius: 10px;
            font-size: 9px;
            font-weight: 700;
            background: rgba(0,0,0,0.7);
        }
        .wf-sb-status-badge.pending { color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.15); }
        .wf-sb-status-badge.queued { color: #fbbf24; border: 1px solid rgba(251,191,36,0.45); animation: pu 1.6s infinite; }
        .wf-sb-status-badge.generating { color: #ff00de; border: 1px solid rgba(255,0,222,0.4); animation: pu 1.2s infinite; }
        .wf-sb-status-badge.img_done { color: #00ff88; border: 1px solid rgba(0,255,136,0.4); }
        .wf-sb-status-badge.vid_done { color: #4da6ff; border: 1px solid rgba(77,166,255,0.4); }
        .wf-sb-status-badge.error { color: #f87171; border: 1px solid rgba(248,113,113,0.45); }
        .wf-sb-info { padding: 8px 10px; }
        .wf-sb-title { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.8); margin-bottom: 3px; }
        .wf-sb-desc { font-size: 10px; color: rgba(255,255,255,0.35); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .wf-scene-prompt-label {
            display: block;
            margin: 7px 0 4px;
            font-size: 10.5px;
            font-weight: 800;
            color: rgba(255,255,255,0.46);
        }
        .wf-scene-prompt-input {
            width: 100%;
            min-height: 86px;
            max-height: 190px;
            resize: vertical;
            padding: 8px 9px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(10,12,18,0.82);
            color: rgba(255,255,255,0.88);
            font-size: 11px;
            line-height: 1.55;
            font-family: inherit;
            outline: none;
            box-sizing: border-box;
        }
        .wf-scene-prompt-input:focus {
            border-color: rgba(124,92,255,0.72);
            box-shadow: 0 0 0 2px rgba(124,92,255,0.16);
        }
        .wf-scene-prompt-input::placeholder { color: rgba(255,255,255,0.32); }
        .wf-video-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px;
            overflow: hidden;
        }
        .wf-video-thumb {
            aspect-ratio: 16 / 9;
            background: #05070b;
            position: relative;
            overflow: hidden;
            cursor: zoom-in;
        }
        .wf-video-thumb img,
        .wf-video-thumb video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #05070b;
        }
        .wf-media-poster {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            background: #05070b;
            display: block;
        }
        .wf-result-cache-panel {
            display: none;
        }
        .wf-result-cache-panel.active {
            display: block;
        }
        .wf-video-thumb.has-video::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(circle at center, rgba(0,0,0,0.08), rgba(0,0,0,0) 44%);
        }
        .wf-sb-actions { display: flex; gap: 4px; padding: 6px 8px; border-top: 1px solid rgba(255,255,255,0.04); }
        .wf-sb-btn { flex: 1; padding: 4px 6px; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer; border: none; transition: .2s; text-align: center; }
        .wf-sb-btn:hover { transform: translateY(-1px); }
        .wf-sb-btn-img { background: rgba(255,0,222,0.15); color: #ff00de; border: 1px solid rgba(255,0,222,0.25); }
        .wf-sb-btn-img:hover { background: rgba(255,0,222,0.3); }
        .wf-sb-btn-vid { background: rgba(0,150,255,0.15); color: #4da6ff; border: 1px solid rgba(0,150,255,0.25); }
        .wf-sb-btn-vid:hover { background: rgba(0,150,255,0.3); }

        /* 结果区域：角色图像 */
        .wf-char-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 14px;
        }
        .wf-char-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
            overflow: hidden;
            text-align: left;
            position: relative;
        }
        .wf-char-thumb {
            width: 100%; aspect-ratio: 4/5;
            background: #0f1118;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
            position: relative;
            cursor: zoom-in;
        }
        .wf-char-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
        /* 上传悬浮遮罩 */
        .wf-char-upload-overlay {
            position: absolute; inset: 0;
            background: rgba(0,0,0,0.6);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            opacity: 0; transition: opacity .2s;
            color: #fff; pointer-events: none;
        }
        .wf-char-thumb:hover .wf-char-upload-overlay { opacity: 1; }
        .wf-char-info { padding: 10px; }
        .wf-char-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); }
        .wf-char-desc { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 2px; }
        .wf-asset-prompt-label {
            display: block;
            margin: 7px 0 4px;
            font-size: 10px;
            font-weight: 700;
            color: rgba(255,255,255,0.46);
        }
        .wf-asset-prompt-input {
            width: 100%;
            min-height: 92px;
            max-height: 190px;
            resize: vertical;
            padding: 8px 9px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(10,12,18,0.82);
            color: rgba(255,255,255,0.88);
            font-size: 11px;
            line-height: 1.55;
            outline: none;
        }
        .wf-asset-prompt-input:focus {
            border-color: rgba(124,92,255,0.72);
            box-shadow: 0 0 0 2px rgba(124,92,255,0.16);
        }
        .wf-asset-prompt-input::placeholder { color: rgba(255,255,255,0.32); }
        .wf-asset-actions {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }
        .wf-card-mini-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }
        .wf-card-icon-btn {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.05);
            color: rgba(255,255,255,0.62);
            cursor: pointer;
            font-size: 12px;
            line-height: 1;
        }
        .wf-card-icon-btn:hover {
            border-color: rgba(248,113,113,0.55);
            color: #f87171;
            background: rgba(248,113,113,0.10);
        }
        .wf-scene-title-input {
            width: 100%;
            min-width: 0;
            border: 0;
            outline: 0;
            background: transparent;
            color: rgba(255,255,255,0.86);
            font-size: 11px;
            font-weight: 700;
            font-family: inherit;
            padding: 0;
        }
        .wf-asset-status-badge {
            position: absolute;
            top: 7px;
            left: 7px;
            z-index: 3;
            padding: 2px 7px;
            border-radius: 9px;
            background: rgba(0,0,0,0.72);
            border: 1px solid rgba(255,255,255,0.16);
            color: rgba(255,255,255,0.72);
            font-size: 9px;
            font-weight: 800;
            pointer-events: none;
        }
        .wf-asset-status-badge.queued { color: #fbbf24; border-color: rgba(251,191,36,0.45); animation: pu 1.6s infinite; }
        .wf-asset-status-badge.generating { color: #ff00de; border-color: rgba(255,0,222,0.45); animation: pu 1.2s infinite; }
        .wf-asset-status-badge.done { color: #00ff88; border-color: rgba(0,255,136,0.45); }
        .wf-asset-status-badge.error { color: #f87171; border-color: rgba(248,113,113,0.45); }
        .wf-thumb-busy-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 10px;
            background: rgba(5,7,11,0.72);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            pointer-events: none;
        }

        /* 总视频区域 */
        .wf-final-video {
            width: 100%;
            background: rgba(0,0,0,0.5);
            border: 2px dashed rgba(255,0,222,0.2);
            border-radius: 16px;
            min-height: 280px;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }
        .wf-final-video video { width: 100%; border-radius: 14px; }

        /* 空状态 */
        .wf-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            color: rgba(255,255,255,0.2);
            text-align: center;
        }
        .wf-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
        .wf-empty-text { font-size: 14px; margin-bottom: 4px; }
        .wf-empty-sub { font-size: 11px; opacity: 0.6; }

        /* 进度指示器 */
        .wf-progress-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: rgba(255,0,222,0.05);
            border: 1px solid rgba(255,0,222,0.15);
            border-radius: 10px;
            margin-bottom: 12px;
            font-size: 12px;
            color: rgba(255,255,255,0.6);
        }
        .wf-progress-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #ff00de;
            animation: pu 1.2s infinite;
            flex-shrink: 0;
        }

        /* 通用工作流样式 */
        .wf-layout { display: grid; grid-template-columns: 360px 1fr; gap: 16px; }
        @media (max-width: 1024px) { .wf-layout { grid-template-columns: 1fr; } }

        .wf-left { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
        .wf-left-head { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.5); }
        .wf-left-body { flex: 1; overflow-y: auto; padding: 12px; }
        .wf-left-body::-webkit-scrollbar { width: 4px; }
        .wf-left-body::-webkit-scrollbar-thumb { background: rgba(255,0,222,0.3); border-radius: 2px; }
        .wf-left-foot { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.06); }

        .wf-right { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
        .wf-right-head { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; }
        .wf-right-head h3 { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); }
        .wf-right-body { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
        .wf-right-body img, .wf-right-body video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; }

        .wf-placeholder { text-align: center; color: rgba(255,255,255,0.3); }
        .wf-placeholder-icon { font-size: 56px; margin-bottom: 12px; opacity: 0.5; }

        .wf-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 10px; margin-bottom: 8px; cursor: pointer; transition: .2s; }
        .wf-card:hover { border-color: rgba(255,255,255,0.12); }
        .wf-card.act { border-color: rgba(255,0,222,0.5); box-shadow: 0 0 0 3px rgba(255,0,222,0.15); }
        .wf-card-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
        .wf-card-num { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
        .wf-card-num.p { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
        .wf-card-num.d { background: rgba(0,255,136,0.15); color: #00ff88; }
        .wf-card-num.g { background: rgba(255,0,222,0.2); color: #ff00de; animation: pu 1.5s infinite; }
        .wf-card-num.v { background: rgba(0,150,255,0.15); color: #4da6ff; }
        .wf-card-t { font-size: 12px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wf-card-a { display: flex; gap: 4px; }
        .wf-card-thumb { height: 70px; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
        .wf-card-thumb img, .wf-card-thumb video { width: 100%; height: 100%; object-fit: cover; }
        .wf-card-meta { display: flex; gap: 8px; font-size: 10px; color: rgba(255,255,255,0.35); }

        .wf-form-group { margin-bottom: 10px; }
        .wf-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
        .wf-textarea { width: 100%; padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: #fff; font-size: 13px; font-family: inherit; resize: vertical; transition: .2s; }
        .wf-textarea:focus { outline: none; border-color: rgba(255,0,222,0.5); }

        /* 工作流剧本区拖拽容器 */
        .wf-script-dropzone {
            position: relative;
            border-radius: 10px;
            transition: .2s;
        }
        .wf-script-dropzone.drag-active {
            outline: 2px dashed #ff00de;
            outline-offset: 2px;
            background: rgba(255,0,222,0.04);
        }
        .wf-script-dropzone .wf-textarea {
            border-radius: 10px 10px 0 0;
        }
        .wf-drop-hint {
            display: none;
            position: absolute;
            inset: 0;
            background: rgba(255,0,222,0.12);
            border-radius: 10px;
            pointer-events: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 6px;
            font-size: 14px;
            color: #ff00de;
            font-weight: 600;
            z-index: 2;
        }
        .wf-script-dropzone.drag-active .wf-drop-hint { display: flex; }

        /* 文件导入进度 */
        .wf-file-importing {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 拖拽提示：文档模式 */
        .wf-script-dropzone.drag-doc .wf-drop-hint { border-color: #00d4aa; background: rgba(0,212,170,0.08); }
        .wf-script-dropzone.drag-doc .wf-drop-hint span { color: #00d4aa !important; }

        /* 拖拽图片预览条 */
        .wf-dropped-imgs {
            display: none;
            flex-wrap: wrap;
            gap: 8px;
            padding: 8px 10px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.08);
            border-top: none;
            border-radius: 0 0 10px 10px;
        }
        .wf-dropped-imgs.has-imgs { display: flex; }
        .wf-dropped-img-item {
            position: relative;
            width: 72px;
            height: 72px;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
            flex-shrink: 0;
            cursor: pointer;
            transition: .15s;
        }
        .wf-dropped-img-item:hover { transform: scale(1.05); border-color: rgba(255,0,222,0.5); }
        .wf-dropped-img-item img {
            width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .wf-dropped-img-item .wf-img-del {
            position: absolute; top: 2px; right: 2px;
            width: 16px; height: 16px;
            background: rgba(0,0,0,0.7);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 9px; color: #fff; cursor: pointer; opacity: 0;
            transition: opacity .15s;
            border: none; padding: 0; line-height: 1;
        }
        .wf-dropped-img-item:hover .wf-img-del { opacity: 1; }
        .wf-dropped-img-item .wf-img-name {
            position: absolute; bottom: 0; left: 0; right: 0;
            background: rgba(0,0,0,0.6);
            font-size: 9px; color: rgba(255,255,255,0.8);
            padding: 2px 4px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            text-align: center;
        }
        .wf-drop-add-btn {
            width: 72px; height: 72px;
            border-radius: 8px;
            border: 1.5px dashed rgba(255,255,255,0.15);
            background: transparent;
            color: rgba(255,255,255,0.25);
            font-size: 22px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: .15s; flex-shrink: 0;
        }
        .wf-drop-add-btn:hover { border-color: rgba(255,0,222,0.4); color: #ff00de; }

        /* 右键上下文菜单 */
        #wfImgCtxMenu {
            position: fixed;
            z-index: 99999;
            min-width: 160px;
            background: #1a1a2e;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            padding: 4px 0;
            box-shadow: 0 8px 32px rgba(0,0,0,0.6);
            display: none;
            user-select: none;
        }
        #wfImgCtxMenu.show { display: block; animation: ctxFadeIn .12s ease; }
        @keyframes ctxFadeIn { from { opacity:0; transform:scale(.95) translateY(-4px); } to { opacity:1; transform:scale(1) translateY(0); } }
        .wf-ctx-header {
            padding: 6px 14px 4px;
            font-size: 10px;
            color: rgba(255,255,255,0.3);
            font-weight: 600;
            letter-spacing: .5px;
            text-transform: uppercase;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200px;
        }
        .wf-ctx-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 14px;
            font-size: 13px;
            color: rgba(255,255,255,0.8);
            cursor: pointer;
            transition: background .12s;
            white-space: nowrap;
        }
        .wf-ctx-item:hover { background: rgba(255,0,222,0.12); color: #fff; }
        .wf-ctx-item .ctx-icon { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
        .wf-ctx-sep { height: 1px; background: rgba(255,255,255,0.06); margin: 3px 0; }
        .wf-ctx-item.danger:hover { background: rgba(255,60,60,0.15); color: #ff6b6b; }

        .wf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .wf-select { padding: 8px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #fff; font-size: 13px; font-family: inherit; cursor: pointer; }
        .wf-select option { background: #1a1a2e; }
        .wf-btn { padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: .2s; display: inline-flex; align-items: center; gap: 4px; }
        .wf-btn:hover { transform: translateY(-1px); }
        .wf-btn-primary { background: linear-gradient(135deg, #ff00de, #00ffff); color: #fff; }
        .wf-btn-secondary { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.08); }
        .wf-btn-danger { background: rgba(255,0,85,0.15); color: #ff6b6b; border: 1px solid rgba(255,0,85,0.2); }
        .wf-btn-sm { padding: 4px 8px; font-size: 10px; }
        .wf-ib { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s; }
        .wf-ib:hover { background: rgba(255,255,255,0.1); color: #fff; }

        .wf-timeline { display: flex; gap: 3px; overflow-x: auto; padding: 8px 0; }
        .wf-timeline::-webkit-scrollbar { height: 3px; }
        .wf-timeline::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
        .wf-tl-item { width: 36px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; cursor: pointer; transition: .2s; flex-shrink: 0; }
        .wf-tl-item:hover { border-color: rgba(255,255,255,0.15); }
        .wf-tl-item.act { border-color: #ff00de; background: rgba(255,0,222,0.15); color: #fff; }
        .wf-tl-item.done { border-color: #00ff88; color: #00ff88; }
        .wf-tl-item.vid { border-color: #4da6ff; color: #4da6ff; }
        .wf-tl-add { width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; color: rgba(255,255,255,0.3); transition: .2s; flex-shrink: 0; }
        .wf-tl-add:hover { border-color: #ff00de; color: #ff00de; }

        .wf-templates { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
        .wf-tpl-btn { padding: 6px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: rgba(255,255,255,0.6); font-size: 12px; cursor: pointer; transition: .2s; }
        .wf-tpl-btn:hover { background: rgba(255,0,222,0.1); border-color: rgba(255,0,222,0.3); color: #fff; }

        /* ====== 风格选择器 ====== */
        .style-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
        .style-option { 
            padding: 8px 14px; 
            background: rgba(255,255,255,0.04); 
            border: 2px solid rgba(255,255,255,0.08); 
            border-radius: 10px; 
            color: rgba(255,255,255,0.6); 
            font-size: 13px; 
            cursor: pointer; 
            transition: all .2s; 
            display: flex; 
            align-items: center; 
            gap: 6px;
        }
        .style-option:hover { 
            background: rgba(255,255,255,0.08); 
            border-color: rgba(255,255,255,0.15); 
            color: #fff; 
        }
        .style-option.active { 
            background: linear-gradient(135deg, rgba(255,0,222,0.2), rgba(0,255,255,0.2)); 
            border-color: #ff00de; 
            color: #fff; 
            box-shadow: 0 0 15px rgba(255,0,222,0.3);
        }
        .style-icon { font-size: 16px; }
        .wf-collapse-arrow { font-size: 10px; margin-left: auto; transition: transform .2s; color: rgba(255,255,255,0.4); }
        .wf-collapse-arrow.collapsed { transform: rotate(-90deg); }

        /* ====== 一键生成按钮 ====== */
        .ai-gen-btn {
            background: linear-gradient(135deg, #ff00de, #00ffff);
            border: none;
            color: #fff;
            padding: 12px 24px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all .3s;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 20px rgba(255,0,222,0.3);
        }
        .ai-gen-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 30px rgba(255,0,222,0.5);
        }
        .ai-gen-btn:active { transform: translateY(0); }
        .ai-gen-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        .ai-gen-btn.spinning::after {
            content: '';
            width: 14px;
            height: 14px;
            border: 2px solid transparent;
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ====== 视频生成优化控制 ====== */
        .speed-control {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background: rgba(255,255,255,0.03);
            border-radius: 10px;
            margin-bottom: 12px;
        }
        .speed-label { font-size: 12px; color: rgba(255,255,255,0.5); }
        .speed-options {
            display: flex;
            gap: 6px;
        }
        .speed-option {
            padding: 4px 10px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 6px;
            font-size: 11px;
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            transition: .2s;
        }
        .speed-option:hover { background: rgba(255,255,255,0.1); }
        .speed-option.active {
            background: linear-gradient(135deg, #00ff88, #00cc6a);
            border-color: #00ff88;
            color: #000;
            font-weight: 600;
        }

        /* ====== 图片图库面板 ====== */
        .img-library-panel {
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(16, 19, 24, 0.12);
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s;
            box-shadow: 0 12px 26px rgba(16, 19, 24, 0.06);
        }

        .img-library-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 11px 14px;
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
            background: #f5faf9;
        }

        .img-library-header:hover {
            background: #e9f8f4;
        }

        .img-library-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 900;
            color: var(--ark-ink, #101318);
        }

        .img-library-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            background: linear-gradient(135deg, #00d4aa, #667eea);
            border-radius: 10px;
            font-size: 10px;
            font-weight: 700;
            color: white;
            box-shadow: 0 6px 14px rgba(0, 212, 170, 0.24);
        }

        .img-library-toggle {
            font-size: 12px;
            color: var(--ark-ink, #101318);
            opacity: 0.78;
            transition: transform 0.3s;
        }

        .img-library-toggle.open {
            transform: rotate(180deg);
        }

        .img-library-body {
            display: none;
            padding: 10px 12px 12px;
            border-top: 1px solid rgba(16, 19, 24, 0.08);
            background: rgba(255, 255, 255, 0.92);
        }

        .img-library-body.open {
            display: block;
        }

        .img-library-empty {
            text-align: center;
            padding: 20px;
            color: var(--ark-muted, #5b6871);
            font-size: 12px;
            font-weight: 700;
        }

        .img-library-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 8px;
            max-height: 240px;
            overflow-y: auto;
        }

        .img-library-grid::-webkit-scrollbar { width: 4px; }
        .img-library-grid::-webkit-scrollbar-thumb { background: rgba(10, 163, 132, 0.42); border-radius: 2px; }

        .img-lib-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            border: 1.5px solid rgba(16, 19, 24, 0.12);
            cursor: grab;
            transition: all 0.25s;
            aspect-ratio: 1;
            background: #eef3f6;
            box-shadow: 0 8px 18px rgba(16, 19, 24, 0.08);
        }

        .img-lib-item:active {
            cursor: grabbing;
        }

        .img-lib-item:hover {
            border-color: rgba(10, 163, 132, 0.55);
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(16, 19, 24, 0.14);
        }

        .img-lib-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .img-lib-overlay {
            position: absolute;
            inset: 0;
            background: rgba(16, 19, 24, 0.72);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .img-lib-item:hover .img-lib-overlay {
            opacity: 1;
        }

        .img-lib-ref-tag {
            position: absolute;
            top: 5px;
            left: 5px;
            background: linear-gradient(135deg, #00d4aa, #667eea);
            color: white;
            font-size: 9px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 6px;
            pointer-events: none;
            box-shadow: 0 6px 12px rgba(16, 19, 24, 0.18);
        }

        .img-lib-ref-btn {
            padding: 4px 10px;
            background: rgba(0, 212, 170, 0.92);
            border: none;
            border-radius: 6px;
            color: white;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .img-lib-ref-btn:hover {
            background: #00a885;
            transform: scale(1.05);
        }

        .img-lib-del-btn {
            padding: 3px 8px;
            background: rgba(255, 30, 70, 0.7);
            border: none;
            border-radius: 5px;
            color: white;
            font-size: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .img-lib-del-btn:hover {
            background: rgba(255, 30, 70, 1);
        }

        .img-lib-del-corner {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 22px;
            height: 22px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.36);
            background: rgba(239,68,68,0.9);
            color: #fff;
            font-size: 15px;
            line-height: 18px;
            font-weight: 900;
            cursor: pointer;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 18px rgba(16,19,24,0.2);
        }

        .img-lib-del-corner:hover {
            background: rgba(220,38,38,1);
            transform: scale(1.06);
        }

        .img-lib-zoom-btn {
            padding: 3px 8px;
            background: rgba(0, 150, 255, 0.7);
            border: none;
            border-radius: 5px;
            color: white;
            font-size: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .img-lib-zoom-btn:hover {
            background: rgba(0, 150, 255, 1);
        }

        .img-library-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(16, 19, 24, 0.08);
        }

        .img-library-hint {
            font-size: 11px;
            color: var(--ark-muted, #5b6871);
            font-weight: 700;
        }

        .img-lib-clear-btn {
            padding: 4px 10px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(16, 19, 24, 0.12);
            border-radius: 6px;
            color: var(--ark-ink, #101318);
            font-size: 11px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.2s;
        }

        .img-lib-clear-btn:hover {
            background: rgba(255, 30, 70, 0.15);
            border-color: rgba(255, 30, 70, 0.3);
            color: rgba(255, 100, 100, 0.9);
        }
    
/* ====== V3.4 Enhanced UI Components ====== */

/* Error Handler Panel */
.ark-error-panel {
    position: fixed; top: 20px; right: 20px; z-index: 10000;
    max-width: 420px; width: 90vw;
    background: rgba(30, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 80, 80, 0.3);
    border-radius: 16px; padding: 20px;
    box-shadow: 0 8px 32px rgba(255, 0, 0, 0.15);
    animation: arkSlideIn 0.3s ease;
    display: none;
}
.ark-error-panel.show { display: block; }
.ark-error-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ark-error-title { color: #ff6b6b; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ark-error-close { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 18px; padding: 2px 6px; border-radius: 6px; }
.ark-error-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.ark-error-message { color: rgba(255,255,255,0.8); font-size: 13px; line-height: 1.6; margin-bottom: 12px; word-break: break-word; }
.ark-error-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ark-error-btn {
    padding: 6px 16px; border-radius: 8px; border: none; font-size: 12px;
    cursor: pointer; transition: all 0.2s; font-weight: 600;
}
.ark-error-btn-retry { background: linear-gradient(135deg, #ff00de, #00ffff); color: #000; }
.ark-error-btn-retry:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,0,222,0.3); }
.ark-error-btn-copy { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.15); }
.ark-error-btn-copy:hover { background: rgba(255,255,255,0.15); }
.ark-error-btn-faq { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); }
.ark-error-btn-faq:hover { background: rgba(255,255,255,0.1); }

/* Enhanced Notification */
.ark-toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 60001;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.ark-toast {
    padding: 12px 20px; border-radius: 12px; font-size: 13px;
    background: #0f172a; color: #f8fafc; border: 1px solid rgba(148,163,184,0.3);
    backdrop-filter: none; animation: arkSlideIn 0.3s ease;
    pointer-events: auto; display: flex; align-items: center; gap: 10px;
    max-width: min(420px, calc(100vw - 32px));
    box-shadow: 0 18px 48px rgba(15,23,42,0.28), 0 4px 12px rgba(15,23,42,0.18);
    font-weight: 700; line-height: 1.45;
}
.ark-toast-success { background: #052e2b; border-color: rgba(20,184,166,0.55); color: #f8fafc; }
.ark-toast-error { background: #3b0a14; border-color: rgba(248,113,113,0.58); color: #f8fafc; }
.ark-toast-warning { background: #422006; border-color: rgba(251,191,36,0.62); color: #f8fafc; }
.ark-toast-info { background: #082f49; border-color: rgba(56,189,248,0.55); color: #f8fafc; }

@keyframes arkSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes arkFadeOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(40px); }
}

/* Onboarding Overlay */
.ark-onboarding-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75); z-index: 20000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
}
.ark-onboarding-card {
    background: linear-gradient(135deg, rgba(20,20,35,0.98), rgba(30,15,40,0.98));
    border: 1px solid rgba(255,0,222,0.2); border-radius: 24px;
    padding: 40px; max-width: 560px; width: 90vw; text-align: center;
    box-shadow: 0 24px 80px rgba(255,0,222,0.1);
    animation: arkSlideIn 0.4s ease;
}
.ark-onboarding-icon { font-size: 64px; margin-bottom: 20px; }
.ark-onboarding-title { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.ark-onboarding-subtitle { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 24px; line-height: 1.6; }
.ark-onboarding-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; text-align: left; }
.ark-onboarding-step {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    background: rgba(255,255,255,0.03); border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.ark-onboarding-step-num {
    width: 32px; height: 32px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-weight: 700;
    font-size: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, #ff00de, #00ffff); color: #000;
}
.ark-onboarding-step-text { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; }
.ark-onboarding-step-text strong { color: #fff; }
.ark-onboarding-actions { display: flex; gap: 12px; justify-content: center; }
.ark-onboarding-btn {
    padding: 12px 32px; border-radius: 12px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; border: none;
}
.ark-onboarding-btn-primary { background: linear-gradient(135deg, #ff00de, #00ffff); color: #000; }
.ark-onboarding-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,0,222,0.3); }
.ark-onboarding-btn-skip { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.1); }
.ark-onboarding-btn-skip:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }

/* FAQ Modal */
.ark-faq-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); z-index: 15000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
}
.ark-faq-content {
    background: linear-gradient(135deg, rgba(20,20,35,0.98), rgba(25,15,35,0.98));
    border: 1px solid rgba(255,0,222,0.15); border-radius: 20px;
    padding: 32px; max-width: 640px; width: 90vw; max-height: 80vh;
    overflow-y: auto;
}
.ark-faq-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.ark-faq-item { margin-bottom: 16px; }
.ark-faq-q { font-size: 14px; font-weight: 600; color: #ff00de; margin-bottom: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ark-faq-a { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.7; padding-left: 22px; }
.ark-faq-close {
    float: right; background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.6);
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px;
}
.ark-faq-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Queue Panel */
.ark-queue-panel {
    position: fixed; right: -400px; top: 0; bottom: 0; width: 380px; z-index: 12000;
    background: linear-gradient(180deg, rgba(15,10,25,0.98), rgba(20,10,30,0.98));
    border-left: 1px solid rgba(255,0,222,0.15);
    transition: right 0.3s ease; overflow-y: auto; padding: 20px;
    backdrop-filter: blur(20px);
}
.ark-queue-panel.open { right: 0; }
.ark-queue-toggle {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    background: linear-gradient(135deg, #ff00de, #00ffff);
    border: none; color: #000; font-weight: 700; padding: 10px 8px;
    border-radius: 10px 0 0 10px; cursor: pointer; z-index: 12001;
    font-size: 12px; writing-mode: vertical-lr; letter-spacing: 2px;
}
.ark-queue-toggle:hover { padding-right: 12px; }
.ark-queue-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ark-queue-title { font-size: 16px; font-weight: 700; color: #fff; }
.ark-queue-badge { background: #ff00de; color: #000; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.ark-queue-item {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 12px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 12px; transition: all 0.2s;
}
.ark-queue-item:hover { border-color: rgba(255,0,222,0.2); }
.ark-queue-item-status {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ark-queue-item-status.pending { background: #fbbf24; }
.ark-queue-item-status.running { background: #34d399; animation: pulse 1.5s infinite; }
.ark-queue-item-status.done { background: #6b7280; }
.ark-queue-item-status.error { background: #ef4444; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.ark-queue-item-info { flex: 1; min-width: 0; }
.ark-queue-item-type { font-size: 12px; color: rgba(255,255,255,0.5); }
.ark-queue-item-label { font-size: 13px; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ark-queue-item-action {
    background: none; border: none; color: rgba(255,255,255,0.4);
    cursor: pointer; font-size: 16px; padding: 4px; border-radius: 6px;
}
.ark-queue-item-action:hover { color: #ff6b6b; background: rgba(255,255,255,0.08); }

/* Balance Widget */
.ark-balance-widget {
    display: flex; align-items: center; gap: 6px; padding: 4px 12px;
    background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 8px; font-size: 11px; color: #6ee7b7; cursor: pointer;
    transition: all 0.2s;
}
.ark-balance-widget:hover { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.3); }
.ark-balance-widget.low { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: #fca5a5; }

/* Points Widget */
.ark-points-widget {
    display: flex; align-items: center; gap: 6px; padding: 4px 12px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px; font-size: 11px; color: #fcd34d; cursor: pointer;
    transition: all 0.2s; position: relative;
    appearance: none; -webkit-appearance: none; font-family: inherit;
}
.ark-points-widget:hover { background: #fff; border-color: rgba(91,71,251,.38); color: #5b47fb; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(91,71,251,.12); }
.ark-points-widget.low { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15)); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; animation: ark-pulse-warning 2s infinite; }
.ark-points-widget.warning { background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(234, 88, 12, 0.15)); border-color: rgba(251, 146, 60, 0.4); color: #fdba74; }
.ark-points-widget:hover,
.canvas-lib-pill.points:hover {
    background: #fff !important;
    border-color: rgba(91,71,251,.38) !important;
    color: #5b47fb !important;
    box-shadow: 0 12px 28px rgba(91,71,251,.12) !important;
    transform: translateY(-1px);
}

.ark-token-recharge-overlay {
    position: fixed;
    inset: 0;
    z-index: 26000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(0, 0, 0, 0.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.ark-token-recharge-overlay.show { display: flex; }
.ark-token-recharge-card {
    width: min(560px, 100%);
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(12,12,14,.96);
    color: #fff;
    box-shadow: 0 30px 100px rgba(0,0,0,.52);
    padding: 24px;
}
.ark-token-recharge-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
.ark-token-recharge-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.2;
    color: #fff;
}
.ark-token-recharge-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.ark-token-recharge-insufficient {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    color: #f87171;
}
.ark-token-recharge-insufficient[hidden] {
    display: none !important;
}
.ark-token-recharge-note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255,255,255,.42);
}
.ark-token-recharge-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    background: transparent;
    color: rgba(255,255,255,.72);
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ark-token-recharge-close:hover {
    color: #fff;
    border-color: rgba(255,255,255,.34);
    background: rgba(255,255,255,.08);
}
.ark-token-recharge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}
.ark-token-recharge-package {
    position: relative;
    min-height: 88px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.ark-token-recharge-package:hover {
    transform: translateY(-1px);
    border-color: rgba(251,191,36,.38);
}
.ark-token-recharge-package.selected {
    border-color: #fbbf24;
    background: rgba(251,191,36,.12);
    box-shadow: 0 0 0 1px rgba(251,191,36,.08) inset;
}
.ark-token-recharge-points {
    font-size: 17px;
    font-weight: 900;
    color: #fcd34d;
}
.ark-token-recharge-label {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,.62);
}
.ark-token-recharge-price {
    margin-top: 7px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}
.ark-token-recharge-discount {
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: 999px;
    background: #f59e0b;
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 7px;
}
.ark-token-provider-title {
    margin-bottom: 8px;
    color: rgba(255,255,255,.52);
    font-size: 12px;
    font-weight: 700;
}
.ark-token-provider-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.ark-token-pay-provider {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.07);
    color: #fff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    cursor: pointer;
}
.ark-token-pay-provider.is-full {
    width: 100%;
}
.ark-token-pay-provider small {
    font-size: 11px;
    color: rgba(255,255,255,.52);
    font-weight: 600;
}
.ark-token-pay-provider.selected {
    border-color: #10b981;
    background: rgba(16,185,129,.22);
}
.ark-token-pay-provider:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.ark-token-recharge-summary {
    background: rgba(255,255,255,.05);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 18px 0;
}
.ark-token-recharge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255,255,255,.62);
}
.ark-token-recharge-row + .ark-token-recharge-row { margin-top: 8px; }
.ark-token-recharge-row strong { color: #fff; }
.ark-token-recharge-pay {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg,#10b981,#0f766e);
    color: #fff;
    font-weight: 900;
    border: none;
    cursor: pointer;
}
.ark-token-recharge-pay:disabled {
    background: rgba(255,255,255,.12);
    cursor: not-allowed;
}
.ark-token-recharge-qr {
    margin: 16px 0;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    text-align: center;
}
.ark-token-recharge-qr img {
    width: 220px;
    height: 220px;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    margin: 10px auto 0;
    object-fit: contain;
}
.ark-token-recharge-status {
    margin-top: 10px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
}
@media (max-width: 620px) {
    .ark-token-recharge-grid,
    .ark-token-provider-grid { grid-template-columns: 1fr; }
    .ark-token-recharge-card { padding: 20px; }
}
/* Points Dropdown Menu */
.ark-points-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: rgba(30, 30, 50, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: .72;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}
.ark-points-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ark-points-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}
.ark-points-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.ark-points-dropdown-item.primary {
    color: #fcd34d;
}
.ark-points-dropdown-item.danger {
    color: #fca5a5;
}
.ark-points-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 6px 0;
}
.ark-points-dropdown-header {
    padding: 8px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}

@keyframes ark-pulse-warning {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* Recharge Options */
.ark-recharge-option {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 14px; text-align: center; cursor: pointer;
    transition: all 0.2s; position: relative; overflow: hidden;
}
.ark-recharge-option:hover { background: rgba(255,255,255,0.1); border-color: rgba(251, 191, 36, 0.4); transform: translateY(-2px); }
.ark-recharge-option.popular { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.1); }
.ark-recharge-label { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.ark-recharge-points { font-size: 15px; font-weight: 700; color: #fcd34d; margin-bottom: 2px; }
.ark-recharge-price { font-size: 12px; color: rgba(255,255,255,0.6); }
.ark-recharge-badge { position: absolute; top: 6px; right: 6px; background: #f59e0b; color: #000; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }

/* Export/Import buttons in sidebar */
.ark-action-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 14px; border-radius: 10px; border: none;
    background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.7);
    cursor: pointer; font-size: 13px; transition: all 0.2s;
}
.ark-action-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ark-action-btn-icon { font-size: 16px; }

/* Batch operation bar */
.ark-batch-bar {
    position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%);
    background: rgba(20,10,30,0.95); border: 1px solid rgba(255,0,222,0.2);
    border-radius: 16px; padding: 12px 24px; z-index: 10000;
    display: flex; align-items: center; gap: 16px;
    backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    transition: bottom 0.3s ease;
}
.ark-batch-bar.show { bottom: 24px; }
.ark-batch-count { font-size: 13px; color: rgba(255,255,255,0.7); white-space: nowrap; }
.ark-batch-btn {
    padding: 8px 20px; border-radius: 10px; border: none; font-size: 12px;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.ark-batch-btn-primary { background: linear-gradient(135deg, #ff00de, #00ffff); color: #000; }
.ark-batch-btn-danger { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.2); }
.ark-batch-btn-secondary { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.ark-batch-btn-cancel { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); }
/* ====== V3.4 Performance: Lazy Loading ====== */
.ark-lazy-img {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ark-lazy-img.loaded {
    opacity: 1;
}

/* Upload progress bar */
.ark-upload-progress {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: rgba(255,255,255,0.1); overflow: hidden;
    border-radius: 0 0 12px 12px;
}
.ark-upload-progress-bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #ff00de, #00ffff);
    transition: width 0.3s ease;
}
/* ====== V3.4 Mobile Responsive ====== */
@media (max-width: 768px) {
    .sidebar { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 12px !important; }
    .top-bar { padding: 8px 12px !important; }
    .top-actions { gap: 4px !important; }
    .page-title { font-size: 16px !important; }
    .create-tab { padding: 6px 12px !important; font-size: 12px !important; }
    .wf-main-layout { flex-direction: column !important; }
    .wf-input-panel, .wf-output-panel { width: 100% !important; max-width: 100% !important; }
    .wf-chapter-panel { display: none !important; }
    .wf-topbar { flex-direction: column !important; gap: 8px !important; padding: 8px 12px !important; }
    .wf-steps { flex-wrap: wrap !important; justify-content: center !important; }
    .ark-queue-panel { width: 100vw !important; right: -100vw !important; }
    .ark-queue-panel.open { right: 0 !important; }
    .ark-queue-toggle { display: none !important; }
    .ark-batch-bar { left: 12px !important; right: 12px !important; transform: none !important; bottom: -80px; }
    .ark-batch-bar.show { bottom: 12px !important; }
    .ark-error-panel { left: 12px !important; right: 12px !important; max-width: none !important; }
    .ark-onboarding-card { padding: 24px !important; }
    .ark-faq-content { max-width: 95vw !important; padding: 20px !important; }

    /* Mobile bottom nav */
    .mobile-nav {
        display: flex !important;
        position: fixed; bottom: 0; left: 0; right: 0;
        background: rgba(10,5,20,0.95); border-top: 1px solid rgba(255,0,222,0.15);
        padding: 6px 0; padding-bottom: max(6px, env(safe-area-inset-bottom));
        z-index: 9999; backdrop-filter: blur(20px);
    }
    .mobile-nav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center;
        gap: 2px; padding: 6px 0; cursor: pointer; color: rgba(255,255,255,0.5);
        transition: color 0.2s; font-size: 10px;
    }
    .mobile-nav-item.active { color: #ff00de; }
    .mobile-nav-item-icon { font-size: 20px; }
    /* Mobile "More" menu */
    .mobile-more-menu {
        display: none; position: fixed; bottom: 60px; right: 8px;
        background: rgba(20,15,35,0.97); border: 1px solid rgba(255,0,222,0.25);
        border-radius: 16px; padding: 8px 0; min-width: 160px;
        z-index: 10000; backdrop-filter: blur(20px);
        box-shadow: 0 8px 32px rgba(0,0,0,0.6);
        animation: arkFadeIn 0.2s ease;
    }
    .mobile-more-menu.show { display: block; }
    .mobile-more-item {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 18px; cursor: pointer; color: rgba(255,255,255,0.7);
        font-size: 13px; transition: background 0.15s;
    }
    .mobile-more-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
    .mobile-more-item-icon { font-size: 16px; width: 22px; text-align: center; }
}
@media (min-width: 769px) {
    .mobile-nav { display: none !important; }
}
/* ====== V3.4 Simple Video Timeline Editor ====== */
.ark-video-editor {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 16px; margin-top: 12px;
}
.ark-video-editor-title {
    font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.ark-video-timeline {
    display: flex; gap: 8px; flex-wrap: wrap;
    min-height: 80px; padding: 8px;
    background: rgba(0,0,0,0.2); border-radius: 10px;
}
.ark-video-timeline-item {
    position: relative; width: 140px; height: 80px;
    border-radius: 8px; overflow: hidden;
    border: 2px solid transparent; cursor: grab;
    transition: all 0.2s; flex-shrink: 0;
}
.ark-video-timeline-item:hover { border-color: rgba(255,0,222,0.4); transform: scale(1.03); }
.ark-video-timeline-item.dragging { opacity: 0.5; border-color: #ff00de; }
.ark-video-timeline-item video,
.ark-video-timeline-item img {
    width: 100%; height: 100%; object-fit: cover;
}
.ark-video-timeline-item-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.7); color: rgba(255,255,255,0.8);
    font-size: 10px; padding: 2px 6px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.ark-video-timeline-item-remove {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,0.6); border: none; color: #ff6b6b;
    width: 20px; height: 20px; border-radius: 50%;
    cursor: pointer; font-size: 12px; display: none;
    align-items: center; justify-content: center;
}
.ark-video-timeline-item:hover .ark-video-timeline-item-remove { display: flex; }
.ark-video-timeline-empty {
    display: flex; align-items: center; justify-content: center;
    width: 100%; color: rgba(255,255,255,0.3); font-size: 13px;
}
.ark-video-editor-actions {
    display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.ark-video-editor-btn {
    padding: 6px 14px; border-radius: 8px; border: none;
    font-size: 12px; cursor: pointer; transition: all 0.2s;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7);
}
.ark-video-editor-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ark-video-editor-btn-primary {
    background: linear-gradient(135deg, #ff00de, #00ffff); color: #000; font-weight: 600;
}
.ark-video-editor-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,0,222,0.2); }







    
/* ========== [v4.0] Ark 模态框样式 ========== */
.ark-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 50000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}
.ark-modal-overlay.show { display: flex; }
.ark-modal-box {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 28px 32px;
    max-width: 520px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    animation: arkModalIn 0.25s ease;
}
@keyframes arkModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ark-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.ark-modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.ark-modal-close {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.5);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.ark-modal-close:hover {
    background: rgba(239,68,68,0.15);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.3);
}
/* 登录框样式 */
.ark-login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 3px;
}
.ark-login-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    transition: all 0.2s;
    border: none;
    background: transparent;
}
.ark-login-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}
.ark-form-group {
    margin-bottom: 14px;
}
.ark-form-group label {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
    font-weight: 500;
}
.ark-form-input {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.ark-form-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}
.ark-form-input::placeholder { color: rgba(255,255,255,0.2); }
.ark-code-row {
    display: flex;
    gap: 10px;
}
.ark-code-row input { flex: 1; }
.ark-code-btn {
    white-space: nowrap;
    padding: 10px 16px;
    background: rgba(102,126,234,0.2);
    border: 1px solid rgba(102,126,234,0.3);
    border-radius: 10px;
    color: #a5b4fc;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}
.ark-code-btn:hover { background: rgba(102,126,234,0.3); }
.ark-code-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ark-submit-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 6px;
}
.ark-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(102,126,234,0.4); }
.ark-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ark-login-msg {
    font-size: 13px;
    text-align: center;
    margin-top: 10px;
    min-height: 20px;
}
.ark-login-msg.error { color: #fca5a5; }
.ark-login-msg.success { color: #86efac; }
.ark-debug-code {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,247,237,0.96), rgba(236,253,245,0.96));
    border: 1px solid rgba(245,158,11,0.34);
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(146,64,14,0.10);
}
.ark-debug-code.show { display: block; }
.ark-debug-code strong { font-size: 18px; letter-spacing: 2px; color: #0f766e; }
/* 会员中心套餐卡片 */
.ark-plan-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.ark-plan-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 12px;
    text-align: center;
    position: relative;
    transition: all 0.2s;
    cursor: pointer;
    min-height: 242px;
    display: flex;
    flex-direction: column;
}
.ark-plan-card:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-2px);
}
.ark-plan-card.selected {
    border-color: rgba(102,126,234,0.55);
    box-shadow: 0 16px 34px rgba(102,126,234,0.16);
}
.ark-plan-card.featured {
    border-color: rgba(102,126,234,0.5);
    background: rgba(102,126,234,0.08);
}
.ark-plan-card .plan-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.ark-plan-card .plan-price {
    font-size: 22px;
    font-weight: 800;
    color: #a5b4fc;
    margin: 8px 0;
}
.ark-plan-card .plan-price span {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    font-weight: 400;
}
.ark-plan-card .plan-features {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    line-height: 1.6;
    margin-top: 8px;
    flex: 1 1 auto;
}
.ark-plan-action {
    margin-top: auto;
    text-align: center;
}
.ark-plan-action button {
    width: 100%;
    min-height: 34px;
    padding: 7px 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s;
    background: linear-gradient(135deg,#667eea,#764ba2);
    border: none;
    color: #fff;
    box-shadow: 0 2px 12px rgba(102,126,234,0.22);
}
.ark-plan-action button:hover {
    transform: translateY(-1px);
}
.ark-plan-card .ark-plan-action {
    display: none !important;
}
.ark-membership-pay-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.ark-membership-pay-choice {
    flex: 1;
    min-width: 140px;
    min-height: 68px;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}
.ark-membership-pay-choice:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 30px rgba(15,23,42,.18);
}
.ark-membership-pay-choice.wechat {
    background: linear-gradient(135deg,#07c160,#06ad1e);
}
.ark-membership-pay-choice.alipay {
    background: linear-gradient(135deg,#1677ff,#4090ff);
}
.ark-membership-pay-choice.is-full {
    flex: 1 1 100%;
    width: 100%;
}
.ark-membership-pay-choice.is-disabled {
    pointer-events: none;
    opacity: .58;
}
.ark-membership-payment-area {
    margin-top: 12px;
}
.ark-membership-payment-panel {
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 12px;
    padding: 16px;
    background: rgba(255,255,255,.82);
    text-align: center;
}
.ark-membership-payment-title {
    color: var(--ark-ink);
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 8px;
}
.ark-membership-payment-desc {
    color: var(--ark-muted);
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 12px;
}
.ark-membership-payment-panel img {
    width: 210px;
    height: 210px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    border: 1px solid rgba(15,23,42,.08);
}
.ark-membership-payment-btn {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 10px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg,#22c55e,#0f766e);
    cursor: pointer;
}
.ark-membership-payment-btn.secondary {
    background: #111827;
}
.ark-membership-payment-status {
    margin-top: 10px;
    color: var(--ark-muted);
    font-size: 12px;
}
.ark-membership-service-card {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 18px;
    margin-top: 14px;
    border: 1px solid rgba(255,255,255,0.06);
}
.ark-membership-service-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.ark-membership-service-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}
.ark-membership-service-meta {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.54);
    line-height: 1.7;
}
.ark-membership-service-wechat {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(102,126,234,0.13);
    color: #a5b4fc;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    user-select: all;
}
.ark-pay-qr-box {
    background: #fff;
    width: 236px;
    height: 236px;
    min-height: 0;
    padding: 18px;
    border-radius: 12px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ark-pay-qr-box img {
    width: 200px;
    height: 200px;
    display: block;
}
.nav-icon,
.user-avatar,
.empty-icon,
.upload-icon,
.canvas-empty-icon,
.wf-empty-icon,
.wf-input-header-icon,
.wf-feedback-tag-icon,
.style-icon,
.result-icon,
.history-card-icon,
.history-empty-icon,
.director-card-icon,
.wf-mini-icon,
.ark-empty-frame-stack,
.ark-empty-compare-stack,
.ark-empty-cinema,
.ark-empty-photo,
.ark-empty-compare-card,
.ark-empty-play,
.t2i-label > i,
.t2i-preview-header i,
.t2i-action-btn i,
.generate-btn > span:first-child,
.tool-btn span:first-child,
.ctx-icon,
.notification-icon,
.t2i-placeholder-icon {
    display: none !important;
}
.ark-iconless .generate-btn,
.ark-iconless .tool-btn,
.ark-iconless .t2i-action-btn {
    gap: 0 !important;
}
/* 帮助中心 FAQ */
.ark-help-quick-actions {
    display: flex;
    justify-content: center;
    margin: 0 0 18px;
}
.ark-help-member-card {
    width: min(100%, 535px);
    min-height: 62px;
    border-radius: 12px;
    border: 1px solid rgba(102,126,234,0.26);
    background: linear-gradient(135deg,rgba(102,126,234,0.12),rgba(118,75,162,0.10));
    color: #6d5dfc;
    text-align: center;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.ark-help-member-card:hover {
    transform: translateY(-2px);
    border-color: rgba(102,126,234,0.46);
    box-shadow: 0 14px 32px rgba(91,71,251,0.12);
    background: linear-gradient(135deg,rgba(102,126,234,0.16),rgba(118,75,162,0.13));
}
.ark-help-member-card-title {
    font-size: 13px;
    font-weight: 800;
}
.ark-help-member-card-sub {
    font-size: 11px;
    color: rgba(71,85,105,0.66);
}
.ark-help-section { margin-bottom: 20px; }
.ark-help-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: #a5b4fc;
    margin: 0 0 10px 0;
}
.ark-help-section p, .ark-help-section li {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
}
.ark-faq-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: visible;
}
.ark-faq-q {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ark-faq-q:hover { background: rgba(255,255,255,0.02); }
.ark-faq-a {
    padding: 0 14px 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    display: none;
}
.ark-faq-item.open .ark-faq-a { display: block; }
.ark-faq-item.open .ark-faq-q .ark-faq-arrow { transform: rotate(180deg); }
/* 用户资料面板 */
.ark-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}
.ark-profile-stat {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
}
.ark-profile-stat .stat-num {
    font-size: 24px;
    font-weight: 800;
    color: #a5b4fc;
}
.ark-profile-stat .stat-label {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}
.ark-profile-info {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    line-height: 1.8;
}
.ark-profile-info span { color: rgba(255,255,255,0.8); font-weight: 600; }
.ark-recent-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 12px;
}
.ark-recent-table th {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    font-size: 11px;
}
.ark-recent-table td {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
}
.ark-recent-table .success { color: #86efac; }
.ark-recent-table .fail { color: #fca5a5; }

/* ===== 与首页统一的浅色电影制作主题 ===== */
:root {
    --ark-ink: #101318;
    --ark-muted: #5b6871;
    --ark-paper: #f7fafc;
    --ark-line: rgba(16,19,24,0.08);
    --ark-mint: #0aa384;
    --ark-sky: #3b82f6;
    --ark-coral: #ff6b57;
    --ark-card: rgba(255,255,255,0.88);
    --ark-shadow: 0 18px 48px rgba(16,19,24,0.08);
}
html, body {
    background:
        linear-gradient(120deg, rgba(10,163,132,0.09), transparent 34%),
        linear-gradient(230deg, rgba(255,107,87,0.10), transparent 36%),
        var(--ark-paper) !important;
    color: var(--ark-ink) !important;
}
.bg-dynamic {
    background:
        radial-gradient(circle at 18% 18%, rgba(10,163,132,0.13), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(255,107,87,0.10), transparent 32%),
        radial-gradient(circle at 72% 78%, rgba(59,130,246,0.12), transparent 34%),
        var(--ark-paper) !important;
}
.grid-bg {
    opacity: 0.46 !important;
    background-image:
        linear-gradient(rgba(16,19,24,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,19,24,0.035) 1px, transparent 1px) !important;
}
.sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,248,250,0.96)) !important;
    border-right: 1px solid rgba(16,19,24,0.08) !important;
    box-shadow: 22px 0 70px rgba(16,19,24,0.09) !important;
    overflow: hidden !important;
}
.sidebar::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 190px !important;
    background:
        linear-gradient(135deg, rgba(10,163,132,0.14), transparent 54%),
        linear-gradient(225deg, rgba(59,130,246,0.12), transparent 58%) !important;
    pointer-events: none !important;
}
.sidebar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 1px !important;
    height: 100% !important;
    background: linear-gradient(180deg, transparent, rgba(10,163,132,0.35), transparent) !important;
    pointer-events: none !important;
}
.logo-section {
    position: relative !important;
    z-index: 1 !important;
    padding: 24px 18px 18px !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
}
.logo {
    padding: 10px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.56) !important;
    border: 1px solid rgba(16,19,24,0.06) !important;
    box-shadow: 0 12px 32px rgba(16,19,24,0.05) !important;
}
.logo-icon, .user-avatar, .stat-icon, .workflow-icon {
    background: linear-gradient(135deg, var(--ark-mint), var(--ark-sky)) !important;
    box-shadow: 0 14px 34px rgba(10,163,132,0.18) !important;
}
.logo-icon {
    border-radius: 8px !important;
    box-shadow: 0 18px 34px rgba(10,163,132,0.20) !important;
}
.logo-text, .page-title span, .stat-number, .director-title span {
    background: linear-gradient(90deg, var(--ark-mint), var(--ark-sky), var(--ark-coral)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.ark-home-btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    background: #101318 !important;
    border: 1px solid rgba(16,19,24,0.14) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 18px 36px rgba(16,19,24,0.16) !important;
    border-radius: 8px !important;
    opacity: 1 !important;
}
.ark-home-btn span {
    display: inline-flex !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    white-space: nowrap !important;
}
.ark-home-btn span:first-child {
    width: 26px !important;
    height: 26px !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
}
.ark-home-btn:hover {
    background: #172027 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.nav-menu {
    position: relative !important;
    z-index: 1 !important;
    padding: 16px 10px 18px !important;
}
.nav-section {
    margin: 0 0 16px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(16,19,24,0.055) !important;
}
.nav-section:last-child {
    border-bottom: none !important;
}
.nav-section-title, .setting-label, .user-status, .history-meta, .result-card-prompt, .img-library-hint, .wf-card-meta {
    color: var(--ark-muted) !important;
}
.nav-section-title {
    padding: 0 12px !important;
    margin-bottom: 8px !important;
    color: rgba(16,19,24,0.46) !important;
    font-weight: 900 !important;
    letter-spacing: 1.3px !important;
}
.nav-item {
    min-height: 44px !important;
    padding: 10px 12px !important;
    color: rgba(16,19,24,0.68) !important;
    border: 1px solid rgba(16,19,24,0.045) !important;
    background: rgba(255,255,255,0.48) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.74) !important;
    margin-bottom: 6px !important;
}
.nav-item:hover {
    background: #f4faf9 !important;
    border-color: rgba(10,163,132,0.18) !important;
    color: var(--ark-ink) !important;
    transform: translateX(3px) !important;
    box-shadow: 0 12px 28px rgba(16,19,24,0.07) !important;
}
.nav-item.active {
    background:
        linear-gradient(135deg, rgba(10,163,132,0.14), rgba(59,130,246,0.08)),
        #fff !important;
    border-color: rgba(10,163,132,0.28) !important;
    box-shadow: 0 16px 34px rgba(10,163,132,0.12) !important;
}
.nav-item.active::before { background: var(--ark-mint) !important; }
.nav-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 8px !important;
    background: rgba(16,19,24,0.045) !important;
    font-size: 16px !important;
}
.nav-item.active .nav-icon {
    background: var(--ark-ink) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(16,19,24,0.16) !important;
}
.nav-text, .nav-item.active .nav-text, .user-name, .page-title, .history-title, .section-title, .workflow-title, .wf-card-t, .modal-title {
    color: var(--ark-ink) !important;
}
.nav-text {
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}
.nav-badge, .create-tab.active, .generate-btn, .btn-primary, .wf-step.act, .wf-btn-primary, .ark-error-btn-retry {
    background: var(--ark-ink) !important;
    color: #fff !important;
    box-shadow: 0 16px 38px rgba(16,19,24,0.16) !important;
}
.top-bar { border-bottom: 1px solid var(--ark-line) !important; }
.glass, .user-card, .create-section, .settings-panel, .setting-item, .history-section, .history-card, .result-section, .result-card, .history-image-picker, .img-library, .wf-topbar, .wf-panel-topbar, .wf-left, .wf-right, .wf-card, .wf-result-panel, .wf-script-result, .wf-sb-card, .wf-char-card, .wf-chapter-panel, .wf-input-panel, .favorites-modal, .modal-container, .detail-modal-content, .ark-onboarding-card, .stat-card {
    background: var(--ark-card) !important;
    border: 1px solid var(--ark-line) !important;
    color: var(--ark-ink) !important;
    box-shadow: var(--ark-shadow) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
    border-radius: 8px !important;
}
.create-tabs, .wf-result-tabs, .style-tabs, .wf-steps {
    background: #edf4f6 !important;
    border: 1px solid var(--ark-line) !important;
    border-radius: 8px !important;
}
.create-tab, .template-tag, .tool-btn, .icon-btn, .wf-step, .wf-result-tab, .wf-tpl-btn, .wf-ib, .wf-tl-item, .wf-tl-add, .result-action-btn, .btn-secondary, .wf-btn-secondary {
    background: rgba(255,255,255,0.84) !important;
    border: 1px solid var(--ark-line) !important;
    color: var(--ark-muted) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.create-tab:hover, .template-tag:hover, .tool-btn:hover, .icon-btn:hover, .wf-step:hover, .wf-result-tab:hover, .wf-tpl-btn:hover, .wf-ib:hover, .result-action-btn:hover, .setting-item:hover, .history-card:hover, .result-card:hover {
    background: #eef8f5 !important;
    border-color: rgba(10,163,132,0.24) !important;
    color: var(--ark-ink) !important;
    box-shadow: 0 16px 36px rgba(16,19,24,0.08) !important;
}
.text-input, .wf-textarea, .wf-select, select, input, textarea {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(16,19,24,0.10) !important;
    color: var(--ark-ink) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(16,19,24,0.04) !important;
}
.text-input:focus, .wf-textarea:focus, select:focus, input:focus, textarea:focus {
    outline: none !important;
    border-color: rgba(10,163,132,0.42) !important;
    box-shadow: 0 0 0 4px rgba(10,163,132,0.10), 0 14px 30px rgba(16,19,24,0.06) !important;
}
.text-input::placeholder, textarea::placeholder, input::placeholder { color: rgba(91,104,113,0.48) !important; }
.t2i-preset-btn,
.t2i-select,
.t2i-textarea,
.t2i-image-container,
.t2i-result-card,
.progress-container {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(16,19,24,0.10) !important;
    color: var(--ark-ink) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(16,19,24,0.04) !important;
}
.t2i-preset-btn {
    color: var(--ark-muted) !important;
    font-weight: 700 !important;
}
.t2i-preset-btn:hover {
    background: #eef8f5 !important;
    color: var(--ark-ink) !important;
    border-color: rgba(10,163,132,0.26) !important;
    transform: translateY(-2px) !important;
}
.t2i-label,
.progress-text,
.progress-percent,
.image-placeholder,
.empty-state,
.placeholder-text {
    color: var(--ark-muted) !important;
}
.t2i-label {
    font-weight: 800 !important;
}
.t2i-textarea:focus,
.t2i-select:focus {
    outline: none !important;
    border-color: rgba(10,163,132,0.42) !important;
    box-shadow: 0 0 0 4px rgba(10,163,132,0.10), 0 14px 30px rgba(16,19,24,0.06) !important;
}
.t2i-textarea::placeholder { color: rgba(91,104,113,0.48) !important; }
.progress-fill {
    background: linear-gradient(90deg, var(--ark-mint), var(--ark-sky)) !important;
}
.setting-value, .wf-result-tab.active, .wf-card.act, .history-picker-item.selected {
    color: var(--ark-ink) !important;
    border-color: rgba(10,163,132,0.36) !important;
    background: #e9f8f4 !important;
}
.result-card-media, .history-card-img, .wf-card-thumb, .wf-sb-thumb, .wf-right-body, .t2i-image-container, .image-preview, .upload-zone {
    background: #eef3f6 !important;
    border-color: var(--ark-line) !important;
    border-radius: 8px !important;
}
.t2i-layout {
    align-items: start !important;
}
#text2img-panel,
#img2img-panel,
#text2video-panel,
#img2video-panel {
    padding-bottom: 26px !important;
    margin-bottom: 0 !important;
}
#text2img-panel .t2i-image-container,
#img2img-panel .t2i-image-container,
#text2video-panel .t2i-image-container,
#img2video-panel .t2i-image-container {
    min-height: clamp(560px, calc(100vh - 250px), 680px) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(235,244,246,0.92)) !important;
    border: 1px solid rgba(16,19,24,0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 18px 46px rgba(16,19,24,0.07) !important;
}
#text2img-panel .t2i-textarea {
    min-height: 138px !important;
}
#img2img-panel .t2i-textarea {
    min-height: 128px !important;
}
#text2video-panel .t2i-textarea {
    min-height: 150px !important;
}
#img2video-panel .t2i-textarea {
    min-height: 128px !important;
}
#text2img-panel .t2i-left,
#img2img-panel .t2i-left,
#text2video-panel .t2i-left {
    min-height: clamp(560px, calc(100vh - 250px), 680px) !important;
}
#img2video-panel .t2i-left {
    min-height: clamp(560px, calc(100vh - 250px), 680px) !important;
}
#text2video-panel .t2i-left,
#img2video-panel .t2i-left {
    justify-content: space-between !important;
}
#img2video-panel .t2i-left {
    justify-content: flex-start !important;
    min-height: 0 !important;
}
#img2video-panel .t2i-layout {
    align-items: stretch !important;
}
#img2video-panel .t2i-right {
    height: 100% !important;
    min-height: 0 !important;
}
#img2video-panel .t2i-image-container {
    min-height: clamp(700px, calc(100vh - 125px), 780px) !important;
    height: 100% !important;
}
#img2img-panel .t2i-right,
#img2video-panel .t2i-right {
    position: relative !important;
    gap: 0 !important;
}
#img2img-panel .t2i-preview-header,
#img2video-panel .t2i-preview-header {
    position: absolute !important;
    z-index: 5 !important;
    top: 14px !important;
    left: 18px !important;
    right: 18px !important;
    height: 32px !important;
    padding: 0 2px !important;
    pointer-events: none;
}
#img2img-panel .t2i-preview-header > span,
#img2video-panel .t2i-preview-header > span {
    padding: 6px 10px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(16,19,24,0.08) !important;
    color: var(--ark-muted) !important;
    box-shadow: 0 8px 20px rgba(16,19,24,0.06) !important;
}
#img2img-panel .t2i-preview-actions,
#img2video-panel .t2i-preview-actions {
    pointer-events: auto;
}
#img2img-panel .t2i-image-container,
#img2video-panel .t2i-image-container {
    padding-top: 54px !important;
}
.ark-empty-stage {
    width: min(520px, 88%);
    color: var(--ark-ink) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.ark-empty-frame-stack {
    width: 300px;
    height: 190px;
    position: relative;
    perspective: 900px;
    margin-bottom: 8px;
}
.ark-empty-compare-stack {
    width: 330px;
    max-width: 100%;
    height: 210px;
    position: relative;
    margin-bottom: 8px;
}
.ark-empty-compare-card {
    position: absolute;
    top: 20px;
    width: 160px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(16,19,24,0.12);
    box-shadow: 0 18px 40px rgba(16,19,24,0.14);
}
.ark-empty-compare-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,255,255,0.72), transparent 46%);
}
.ark-empty-compare-a {
    left: 18px;
    transform: rotate(-5deg);
    background:
        radial-gradient(circle at 42% 34%, rgba(255,225,100,0.92) 0 12px, transparent 13px),
        linear-gradient(150deg, rgba(111,196,166,0.9), rgba(61,131,218,0.78));
}
.ark-empty-compare-b {
    right: 18px;
    transform: rotate(5deg);
    background:
        radial-gradient(circle at 70% 26%, rgba(255,200,112,0.92) 0 10px, transparent 11px),
        linear-gradient(145deg, rgba(25,31,45,0.96), rgba(147,87,218,0.78) 48%, rgba(11,183,173,0.72));
}
.ark-empty-magic-line {
    position: absolute;
    left: 50%;
    top: 94px;
    width: 118px;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(10,163,132,0), rgba(10,163,132,0.82), rgba(78,133,218,0));
    box-shadow: 0 0 18px rgba(10,163,132,0.35);
}
.ark-empty-magic-line::before,
.ark-empty-magic-line::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0aa384;
    transform: translateY(-50%);
}
.ark-empty-magic-line::before { left: 14px; }
.ark-empty-magic-line::after { right: 14px; background: #4e85da; }
.ark-empty-photo {
    position: absolute;
    inset: 18px 34px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.12);
    box-shadow: 0 18px 40px rgba(16,19,24,0.14);
}
.ark-empty-cinema.from-image .ark-empty-screen {
    background:
        linear-gradient(135deg, rgba(20,24,34,0.88), rgba(9,158,132,0.62)),
        linear-gradient(45deg, rgba(255,255,255,0.18) 25%, transparent 25% 50%, rgba(255,255,255,0.14) 50% 75%, transparent 75%);
    background-size: auto, 42px 42px;
}
.ark-empty-cinema.from-image .ark-empty-screen::before {
    height: 58%;
    top: 30%;
    background: rgba(255,255,255,0.12);
}
.ark-empty-cinema.from-image .ark-empty-play {
    background: rgba(255,255,255,0.9);
}
.ark-empty-photo-a {
    transform: translateX(-54px) rotateY(24deg) rotateZ(-7deg);
    background:
        linear-gradient(160deg, rgba(9,160,135,0.95), rgba(57,132,216,0.82)),
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.22) 18px 20px);
}
.ark-empty-photo-b {
    transform: translateY(-8px) scale(1.08);
    background:
        linear-gradient(145deg, rgba(250,250,252,0.98), rgba(223,238,242,0.82) 36%, rgba(108,91,216,0.36) 37%, rgba(15,179,198,0.74) 70%, rgba(18,21,31,0.80));
}
.ark-empty-photo-c {
    transform: translateX(58px) rotateY(-24deg) rotateZ(7deg);
    background:
        linear-gradient(155deg, rgba(55,128,219,0.95), rgba(173,211,75,0.70)),
        repeating-linear-gradient(0deg, transparent 0 16px, rgba(255,255,255,0.18) 16px 18px);
}
.ark-empty-cinema {
    width: 360px;
    max-width: 100%;
    padding: 14px;
    border: 1px solid rgba(16,19,24,0.10);
    border-radius: 8px;
    background: rgba(255,255,255,0.68);
    box-shadow: 0 18px 44px rgba(16,19,24,0.12);
}
.ark-empty-screen {
    height: 190px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(140deg, rgba(12,16,24,0.96), rgba(19,116,139,0.88) 42%, rgba(178,84,187,0.78) 100%);
}
.ark-empty-screen::before,
.ark-empty-screen::after {
    content: '';
    position: absolute;
    left: -12%;
    right: -12%;
    height: 46%;
    background: rgba(255,255,255,0.16);
    transform: skewY(-7deg);
}
.ark-empty-screen::before {
    top: 18%;
}
.ark-empty-screen::after {
    bottom: -16%;
    background: rgba(0,0,0,0.20);
}
.ark-empty-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 8px);
    opacity: 0.45;
}
.ark-empty-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.86);
    color: #12161c;
    font-size: 24px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.24);
}
.ark-empty-timeline {
    display: grid;
    grid-template-columns: 1.2fr 0.7fr 1fr 0.55fr;
    gap: 8px;
    margin-top: 12px;
}
.ark-empty-timeline span {
    height: 9px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(10,163,132,0.28), rgba(78,133,218,0.32));
}
.ark-empty-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--ark-ink);
}
.ark-empty-subtitle {
    max-width: 430px;
    color: var(--ark-muted);
    font-size: 13px;
    line-height: 1.7;
}
.ark-empty-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.ark-empty-tags span {
    padding: 6px 10px;
    border: 1px solid rgba(10,163,132,0.18);
    border-radius: 8px;
    background: rgba(235,248,245,0.86);
    color: #177c73;
    font-size: 12px;
    font-weight: 800;
}
.t2i-placeholder .t2i-placeholder-icon,
.t2i-placeholder > p,
.t2i-placeholder-sub {
    color: inherit !important;
}
.history-image-picker {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(16,19,24,0.09) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px rgba(16,19,24,0.05) !important;
}
.history-picker-header {
    background: #eef8f5 !important;
    color: var(--ark-ink) !important;
    font-weight: 800 !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
}
.history-picker-header:hover {
    background: #e4f4ef !important;
    color: var(--ark-ink) !important;
}
.history-picker-toggle,
.history-picker-empty {
    color: var(--ark-muted) !important;
    opacity: 1 !important;
}
.history-picker-item {
    border-color: rgba(16,19,24,0.08) !important;
    background: #f4f8fa !important;
}
.history-picker-item:hover,
.history-picker-item.selected {
    border-color: rgba(10,163,132,0.42) !important;
    box-shadow: 0 10px 24px rgba(10,163,132,0.12) !important;
}
.upload-area,
.upload-area-multi,
#img2imgUploadArea,
#img2videoUploadArea {
    display: flex !important;
    min-height: 150px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1.5px dashed rgba(10,163,132,0.34) !important;
    color: var(--ark-ink) !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 16px 34px rgba(16,19,24,0.06) !important;
    border-radius: 8px !important;
}
.upload-area:hover,
.upload-area.drag-over,
.upload-area-multi:hover,
.upload-area-multi.drag-over {
    background: #eef8f5 !important;
    border-color: rgba(10,163,132,0.52) !important;
    transform: translateY(-2px) !important;
}
.upload-area-multi:not(.has-images) .upload-multi-content,
#img2imgUploadContent,
#img2videoUploadContent {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 10px !important;
    color: var(--ark-ink) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.upload-area-multi.has-images .upload-multi-content.hidden,
.upload-multi-content.hidden {
    display: none !important;
}
.upload-icon {
    color: var(--ark-mint) !important;
    opacity: 1 !important;
    filter: none !important;
}
.upload-text {
    color: var(--ark-ink) !important;
    font-weight: 800 !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.upload-text small {
    color: var(--ark-muted) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.upload-multi-grid {
    width: 100% !important;
}
.upload-multi-item,
.upload-multi-add {
    background: #f4f8fa !important;
    border: 1px solid var(--ark-line) !important;
    opacity: 1 !important;
}
.upload-multi-item {
    box-shadow: 0 8px 24px rgba(16,19,24,0.08) !important;
}
.upload-multi-item.is-primary {
    border-color: rgba(10,163,132,0.7) !important;
    box-shadow: 0 0 0 2px rgba(10,163,132,0.16), 0 12px 30px rgba(16,19,24,0.12) !important;
}
.upload-multi-badge {
    background: linear-gradient(135deg, var(--ark-mint), var(--ark-blue)) !important;
    color: #fff !important;
}
.upload-mini-btn {
    background: rgba(16,19,24,0.72) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.28) !important;
}
.upload-mini-btn:hover {
    background: linear-gradient(135deg, var(--ark-mint), var(--ark-blue)) !important;
}
.favorites-modal,
.settings-modal,
.ark-modal-overlay,
.ark-faq-modal {
    background: rgba(247,250,252,0.72) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
}
.favorites-content,
.settings-content,
.ark-modal-box,
.ark-faq-content {
    background:
        linear-gradient(135deg, rgba(10,163,132,0.06), transparent 34%),
        linear-gradient(225deg, rgba(59,130,246,0.06), transparent 42%),
        rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(16,19,24,0.09) !important;
    color: var(--ark-ink) !important;
    box-shadow: 0 24px 70px rgba(16,19,24,0.12) !important;
    border-radius: 8px !important;
}
.favorites-content .history-header,
.settings-content .history-header,
.ark-modal-header {
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
    padding-bottom: 12px !important;
}
.favorites-content h1,
.favorites-content h2,
.favorites-content h3,
.favorites-content h4,
.settings-content h1,
.settings-content h2,
.settings-content h3,
.settings-content h4,
.ark-modal-box h1,
.ark-modal-box h2,
.ark-modal-box h3,
.ark-modal-box h4,
.ark-faq-content h1,
.ark-faq-content h2,
.ark-faq-content h3,
.ark-faq-content h4,
.ark-modal-header h3,
.settings-section-title,
.settings-option-label,
.ark-faq-title,
.ark-help-section h4,
.ark-profile-info span,
.ark-recent-table td,
.ark-queue-title,
.ark-video-editor-title {
    color: var(--ark-ink) !important;
    opacity: 1 !important;
}
.favorites-content p,
.favorites-content li,
.settings-content p,
.settings-content li,
.ark-modal-box p,
.ark-modal-box li,
.ark-help-section p,
.ark-help-section li,
.ark-faq-a,
.ark-profile-info,
.ark-recent-table th,
.ark-recharge-label,
.ark-recharge-price,
.ark-plan-card .plan-features,
.ark-plan-card .plan-price span,
.ark-profile-stat .stat-label,
.ark-queue-item-type,
.ark-video-timeline-empty {
    color: var(--ark-muted) !important;
    opacity: 1 !important;
}
.favorites-content [style*="color: rgba(255,255,255"],
.favorites-content [style*="color:rgba(255,255,255"],
.settings-content [style*="color: rgba(255,255,255"],
.settings-content [style*="color:rgba(255,255,255"],
.ark-modal-box [style*="color: rgba(255,255,255"],
.ark-modal-box [style*="color:rgba(255,255,255"],
.ark-faq-content [style*="color: rgba(255,255,255"],
.ark-faq-content [style*="color:rgba(255,255,255"],
.ark-video-editor [style*="color: rgba(255,255,255"],
.ark-video-editor [style*="color:rgba(255,255,255"] {
    color: var(--ark-muted) !important;
    opacity: 1 !important;
}
.favorites-content [style*="color: #fff"],
.favorites-content [style*="color:#fff"],
.settings-content [style*="color: #fff"],
.settings-content [style*="color:#fff"],
.ark-modal-box [style*="color: #fff"],
.ark-modal-box [style*="color:#fff"] {
    color: var(--ark-ink) !important;
}
.favorites-content [style*="background: rgba(255,255,255"],
.favorites-content [style*="background:rgba(255,255,255"],
.settings-content [style*="background: rgba(255,255,255"],
.settings-content [style*="background:rgba(255,255,255"],
.ark-modal-box [style*="background: rgba(255,255,255"],
.ark-modal-box [style*="background:rgba(255,255,255"],
.ark-faq-content [style*="background: rgba(255,255,255"],
.ark-faq-content [style*="background:rgba(255,255,255"] {
    background: rgba(255,255,255,0.88) !important;
}
.favorites-content [style*="border:1px solid rgba(255,255,255"],
.favorites-content [style*="border: 1px solid rgba(255,255,255"],
.settings-content [style*="border:1px solid rgba(255,255,255"],
.settings-content [style*="border: 1px solid rgba(255,255,255"],
.ark-modal-box [style*="border:1px solid rgba(255,255,255"],
.ark-modal-box [style*="border: 1px solid rgba(255,255,255"] {
    border-color: rgba(16,19,24,0.10) !important;
}
.favorites-content .template-tag,
.settings-content .template-tag,
.ark-modal-box button,
.ark-faq-content button,
.ark-video-editor-btn,
.ark-action-btn,
.ark-batch-btn,
.ark-error-btn,
.ark-onboarding-btn,
.ark-code-btn,
.ark-modal-close,
.detail-modal-close,
.settings-option,
.stat-card,
.timeline-item,
.shortcut-badge,
.ark-faq-item,
.ark-plan-card,
.ark-profile-stat,
.ark-recharge-option,
.ark-queue-item,
.ark-video-editor,
.ark-video-timeline {
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid rgba(16,19,24,0.09) !important;
    color: var(--ark-ink) !important;
    box-shadow: 0 10px 26px rgba(16,19,24,0.05) !important;
    border-radius: 8px !important;
}
.favorites-content .template-tag:hover,
.settings-content .template-tag:hover,
.ark-modal-box button:hover,
.ark-faq-content button:hover,
.ark-video-editor-btn:hover,
.ark-action-btn:hover,
.ark-batch-btn:hover,
.ark-error-btn:hover,
.ark-onboarding-btn:hover,
.ark-code-btn:hover,
.ark-plan-card:hover,
.ark-recharge-option:hover,
.ark-queue-item:hover {
    background: #eef8f5 !important;
    border-color: rgba(10,163,132,0.24) !important;
    color: var(--ark-ink) !important;
    transform: translateY(-1px) !important;
}
.ark-submit-btn,
.ark-submit-btn:hover,
.ark-onboarding-btn-primary,
.ark-batch-btn-primary,
.ark-video-editor-btn-primary,
.ark-error-btn-retry,
.ark-code-btn.primary,
.ark-login-tab.active {
    background: var(--ark-ink) !important;
    border-color: var(--ark-ink) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px rgba(16,19,24,0.16) !important;
}
.ark-modal-box .ark-submit-btn,
.ark-modal-box .ark-submit-btn *,
.ark-onboarding-btn-primary,
.ark-batch-btn-primary,
.ark-video-editor-btn-primary,
.ark-error-btn-retry,
.ark-login-tab.active {
    color: #fff !important;
}
.ark-batch-btn-danger,
.ark-error-btn-copy,
.ark-error-btn-faq,
.ark-onboarding-btn-skip,
.ark-batch-btn-cancel,
.ark-batch-btn-secondary {
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid rgba(16,19,24,0.10) !important;
    color: var(--ark-ink) !important;
}
.ark-modal-close,
.detail-modal-close,
.ark-faq-close {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
}
.ark-login-tabs {
    background: #edf4f6 !important;
    border: 1px solid rgba(16,19,24,0.08) !important;
    border-radius: 8px !important;
}
.ark-login-tab {
    color: var(--ark-muted) !important;
    border-radius: 8px !important;
}
.ark-form-group label,
.ark-login-msg,
.ark-points-dropdown-header {
    color: var(--ark-muted) !important;
}
.ark-form-input,
.ark-modal-box input,
.ark-modal-box textarea,
.ark-modal-box select {
    background: #f5f9fb !important;
    border: 1px solid rgba(16,19,24,0.11) !important;
    color: var(--ark-ink) !important;
    border-radius: 8px !important;
}
.ark-form-input::placeholder,
.ark-modal-box input::placeholder,
.ark-modal-box textarea::placeholder {
    color: rgba(91,104,113,0.52) !important;
}
.ark-plan-card .plan-price,
.ark-profile-stat .stat-num,
.ark-recharge-points,
.ark-faq-q,
.ark-help-section h4,
.ark-points-dropdown-item.primary,
.ark-balance-widget,
.ark-points-widget {
    color: var(--ark-mint) !important;
}
.ark-plan-card.featured {
    background: #e9f8f4 !important;
    border-color: rgba(10,163,132,0.32) !important;
    box-shadow: 0 16px 34px rgba(10,163,132,0.10) !important;
}
.ark-plan-card.featured .plan-name,
.ark-plan-card.featured .plan-features {
    color: var(--ark-ink) !important;
}
.ark-plan-card.featured .plan-price {
    color: var(--ark-mint) !important;
}
.ark-plan-card .plan-name,
.ark-plan-card.featured .plan-name {
    color: var(--ark-ink) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}
.ark-plan-card .plan-features,
.ark-plan-card.featured .plan-features {
    color: var(--ark-muted) !important;
}
#arkMembershipModal .ark-plan-card {
    justify-content: flex-start !important;
}
#arkMembershipModal .ark-plan-card.selected {
    background: #eef8f5 !important;
    border-color: rgba(10,163,132,0.36) !important;
    box-shadow: 0 18px 38px rgba(10,163,132,0.13) !important;
}
#arkMembershipModal .ark-membership-pay-choice,
#arkMembershipModal .ark-membership-pay-choice * {
    color: #fff !important;
}
#arkMembershipModal .ark-membership-pay-choice.wechat {
    background: linear-gradient(135deg,#07c160,#06ad1e) !important;
}
#arkMembershipModal .ark-membership-pay-choice.alipay {
    background: linear-gradient(135deg,#1677ff,#4090ff) !important;
}
#arkMembershipModal .ark-membership-service-card,
#arkMembershipModal .ark-membership-service-inner {
    color: var(--ark-ink) !important;
}
#arkMembershipModal .ark-membership-service-title {
    color: var(--ark-ink) !important;
}
#arkMembershipModal .ark-membership-service-meta {
    color: var(--ark-muted) !important;
}
#arkMembershipModal .ark-membership-service-wechat {
    background: #eef2ff !important;
    border: 1px solid rgba(99,102,241,.16) !important;
    color: #4f46e5 !important;
}
.favorites-content .empty-state {
    grid-column: 1 / -1;
    min-height: min(520px, 54vh) !important;
    margin-top: 18px !important;
    padding: 70px 20px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.favorites-content .empty-state p {
    max-width: 520px !important;
    margin: 0 auto !important;
    line-height: 1.9 !important;
    text-align: center !important;
}
.favorites-content .history-header {
    align-items: center !important;
}
.favorites-content .history-title {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding-left: 34px !important;
}
.favorites-content .history-title::before {
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    color: var(--ark-muted) !important;
}
.ark-shortcut-content {
    width: min(760px, calc(100vw - 40px)) !important;
    max-width: none !important;
    padding: 28px !important;
}
.ark-shortcut-content .history-header {
    padding: 0 0 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
}
.ark-shortcut-title {
    padding-left: 0 !important;
    gap: 10px;
}
.ark-shortcut-title::before {
    content: none !important;
    display: none !important;
}
.ark-shortcut-grid {
    display: grid;
    gap: 18px;
}
.ark-shortcut-section {
    display: grid;
    gap: 8px;
}
.ark-shortcut-section-title {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 900;
    color: var(--ark-muted);
    letter-spacing: .08em;
}
.ark-shortcut-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(220px, auto);
    align-items: center;
    gap: 18px;
    min-height: 46px;
    padding: 10px 12px 10px 14px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(16,19,24,0.07);
    border-radius: 8px;
}
.ark-shortcut-label {
    min-width: 0;
    color: var(--ark-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}
.ark-shortcut-keys {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    white-space: nowrap;
}
.ark-shortcut-plus {
    color: rgba(16,19,24,0.45);
    font-size: 12px;
    font-weight: 900;
}
.ark-shortcut-content .shortcut-badge {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    border-radius: 7px !important;
    background: #fff !important;
    border: 1px solid rgba(16,19,24,0.12) !important;
    color: var(--ark-ink) !important;
    box-shadow: 0 6px 16px rgba(16,19,24,0.06) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
.ark-shortcut-note {
    margin: 2px 0 0;
    color: var(--ark-muted);
    font-size: 12px;
    line-height: 1.65;
}
@media (max-width: 720px) {
    .ark-shortcut-content {
        width: calc(100vw - 22px) !important;
        padding: 18px !important;
    }
    .ark-shortcut-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ark-shortcut-keys {
        justify-content: flex-start;
        flex-wrap: wrap;
        white-space: normal;
    }
}
#favoritesGrid,
.history-full-content {
    min-height: min(560px, 58vh) !important;
}
#favoritesGrid {
    align-content: stretch !important;
}
#favoritesGrid > .empty-state,
.history-full-content > .empty-state {
    min-height: min(520px, 54vh) !important;
    margin-top: 0 !important;
}
.canvas-lib-pill.points,
.ark-points-widget {
    cursor: pointer !important;
}
.ark-iconless i.fas,
.ark-iconless .ctx-icon,
.ark-iconless .notification-icon,
.ark-iconless .t2i-placeholder-icon {
    display: none !important;
}
.ark-points-dropdown,
.ark-queue-panel {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(16,19,24,0.09) !important;
    color: var(--ark-ink) !important;
    box-shadow: 0 18px 46px rgba(16,19,24,0.12) !important;
    border-radius: 8px !important;
}
.ark-points-dropdown-item {
    color: var(--ark-ink) !important;
    border-radius: 8px !important;
}
.ark-points-dropdown-item:hover {
    background: #eef8f5 !important;
    color: var(--ark-ink) !important;
}
.ark-points-dropdown-divider,
.ark-recent-table th,
.ark-recent-table td {
    border-color: rgba(16,19,24,0.08) !important;
}
.toggle-switch {
    background: rgba(16,19,24,0.14) !important;
    border: 1px solid rgba(16,19,24,0.08) !important;
}
.toggle-switch.active {
    background: var(--ark-ink) !important;
}
#arkQueueList [style*="color:rgba(255,255,255"],
#arkQueueList [style*="color: rgba(255,255,255"] {
    color: var(--ark-muted) !important;
}
#workflow-panel {
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(16,19,24,0.08) !important;
    box-shadow: 0 24px 70px rgba(16,19,24,0.08) !important;
}
#workflow-panel .wf-topbar {
    background: rgba(255,255,255,0.90) !important;
    border: 1px solid rgba(16,19,24,0.08) !important;
    box-shadow: 0 16px 42px rgba(16,19,24,0.06) !important;
    border-radius: 8px !important;
}
#workflow-panel .wf-steps {
    background: transparent !important;
    border: none !important;
    gap: 8px !important;
}
#workflow-panel .wf-steps > div:not(.wf-step) {
    color: rgba(16,19,24,0.28) !important;
    font-weight: 900 !important;
}
#workflow-panel .wf-step {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(16,19,24,0.09) !important;
    color: rgba(16,19,24,0.66) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9) !important;
    border-radius: 8px !important;
}
#workflow-panel .wf-step:hover {
    background: #eef8f5 !important;
    color: var(--ark-ink) !important;
    border-color: rgba(10,163,132,0.25) !important;
}
#workflow-panel .wf-step.act {
    background: var(--ark-ink) !important;
    color: #fff !important;
    border-color: var(--ark-ink) !important;
    box-shadow: 0 14px 32px rgba(16,19,24,0.16) !important;
}
#workflow-panel .wf-step.done {
    background: rgba(10,163,132,0.12) !important;
    color: var(--ark-mint) !important;
    border-color: rgba(10,163,132,0.24) !important;
}
#workflow-panel .wf-step-num,
#workflow-panel .wf-input-step-num {
    background: #eef8f5 !important;
    border: 1px solid rgba(10,163,132,0.24) !important;
    color: var(--ark-mint) !important;
}
#workflow-panel .wf-step.act .wf-step-num {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.28) !important;
    color: #fff !important;
}
#workflow-panel .wf-main-layout {
    gap: 16px !important;
}
#workflow-panel .wf-chapter-panel,
#workflow-panel .wf-input-panel,
#workflow-panel .wf-result-panel {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(16,19,24,0.09) !important;
    box-shadow: 0 18px 46px rgba(16,19,24,0.07) !important;
    border-radius: 8px !important;
}
#workflow-panel .wf-panel-topbar,
#workflow-panel .wf-input-header,
#workflow-panel .wf-result-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,249,250,0.96)) !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
    color: var(--ark-ink) !important;
}
#workflow-panel .wf-panel-topbar-label,
#workflow-panel .wf-input-header-title,
#workflow-panel .wf-input-step-label,
#workflow-panel .wf-label,
#workflow-panel .wf-result-header,
#workflow-panel .wf-empty-text,
#workflow-panel .wf-proj-name,
#workflow-panel .wf-proj-ch-name,
#workflow-panel .wf-chapter-name,
#workflow-panel .wf-sb-title,
#workflow-panel .wf-char-name,
#workflow-panel .wf-card-t {
    color: var(--ark-ink) !important;
    opacity: 1 !important;
}
#workflow-panel .wf-project-tree,
#workflow-panel .wf-input-body,
#workflow-panel .wf-result-body,
#workflow-panel .wf-chapter-body {
    background: transparent !important;
    color: var(--ark-ink) !important;
}
#workflow-panel .wf-no-project,
#workflow-panel .wf-empty-state {
    color: var(--ark-muted) !important;
    background: rgba(247,250,252,0.72) !important;
    border: 1px dashed rgba(10,163,132,0.24) !important;
    border-radius: 8px !important;
}
#workflow-panel .wf-no-project-text,
#workflow-panel .wf-empty-sub,
#workflow-panel .wf-proj-meta,
#workflow-panel .wf-proj-overview-text,
#workflow-panel .wf-proj-overview-placeholder,
#workflow-panel .wf-proj-ch-status,
#workflow-panel .wf-chapter-status,
#workflow-panel .wf-card-meta,
#workflow-panel .wf-sb-desc,
#workflow-panel .wf-char-desc,
#workflow-panel .wf-placeholder {
    color: var(--ark-muted) !important;
    opacity: 1 !important;
}
#workflow-panel .wf-proj-row,
#workflow-panel .wf-proj-ch-item,
#workflow-panel .wf-chapter-item,
#workflow-panel .wf-proj-overview,
#workflow-panel .wf-script-result,
#workflow-panel .wf-sb-card,
#workflow-panel .wf-char-card,
#workflow-panel .wf-card,
#workflow-panel .wf-progress-indicator {
    background: rgba(255,255,255,0.86) !important;
    border: 1px solid rgba(16,19,24,0.08) !important;
    color: var(--ark-ink) !important;
    box-shadow: 0 10px 26px rgba(16,19,24,0.04) !important;
    border-radius: 8px !important;
}
#workflow-panel .wf-proj-row:hover,
#workflow-panel .wf-proj-ch-item:hover,
#workflow-panel .wf-chapter-item:hover,
#workflow-panel .wf-card:hover,
#workflow-panel .wf-sb-card:hover,
#workflow-panel .wf-char-card:hover {
    background: #eef8f5 !important;
    border-color: rgba(10,163,132,0.24) !important;
}
#workflow-panel .wf-proj-node.active > .wf-proj-row,
#workflow-panel .wf-proj-ch-item.active,
#workflow-panel .wf-chapter-item.active,
#workflow-panel .wf-card.act,
#workflow-panel .wf-sb-card.active {
    background: #e9f8f4 !important;
    border-color: rgba(10,163,132,0.36) !important;
    box-shadow: 0 14px 30px rgba(10,163,132,0.10) !important;
}
#workflow-panel .wf-proj-arrow,
#workflow-panel .wf-collapse-arrow,
#workflow-panel .wf-proj-ch-label,
#workflow-panel .wf-proj-overview-label {
    color: var(--ark-muted) !important;
    opacity: 1 !important;
}
#workflow-panel .wf-proj-body::before {
    background: rgba(10,163,132,0.22) !important;
}
#workflow-panel .wf-textarea,
#workflow-panel .wf-select {
    background: #f5f9fb !important;
    border: 1px solid rgba(16,19,24,0.11) !important;
    color: var(--ark-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
#workflow-panel .wf-textarea::placeholder,
#workflow-panel .wf-select::placeholder {
    color: rgba(91,104,113,0.55) !important;
}
#workflow-panel .wf-script-dropzone {
    background: transparent !important;
}
#workflow-panel .wf-drop-hint {
    background: rgba(255,255,255,0.92) !important;
    border: 1.5px dashed rgba(10,163,132,0.34) !important;
    color: var(--ark-ink) !important;
}
#workflow-panel .wf-feedback-tag,
#workflow-panel .wf-result-tab,
#workflow-panel .style-option,
#workflow-panel .wf-tpl-btn,
#workflow-panel .wf-ib,
#workflow-panel .wf-tl-item,
#workflow-panel .wf-tl-add {
    background: rgba(255,255,255,0.86) !important;
    border: 1px solid rgba(16,19,24,0.09) !important;
    color: var(--ark-muted) !important;
    opacity: 1 !important;
    border-radius: 8px !important;
}
#workflow-panel .wf-feedback-tag:hover,
#workflow-panel .wf-result-tab:hover,
#workflow-panel .style-option:hover,
#workflow-panel .wf-tpl-btn:hover,
#workflow-panel .wf-ib:hover,
#workflow-panel .wf-tl-item:hover,
#workflow-panel .wf-tl-add:hover {
    background: #eef8f5 !important;
    border-color: rgba(10,163,132,0.25) !important;
    color: var(--ark-ink) !important;
}
#workflow-panel .wf-feedback-tag.active,
#workflow-panel .wf-feedback-tag.active-blue,
#workflow-panel .wf-feedback-tag.active-green,
#workflow-panel .wf-result-tab.active,
#workflow-panel .style-option.active,
#workflow-panel .wf-tl-item.act {
    background: #e9f8f4 !important;
    border-color: rgba(10,163,132,0.36) !important;
    color: var(--ark-mint) !important;
    font-weight: 800 !important;
}
#workflow-panel .wf-result-tab.done,
#workflow-panel .wf-tl-item.done {
    background: rgba(10,163,132,0.12) !important;
    border-color: rgba(10,163,132,0.28) !important;
    color: var(--ark-mint) !important;
}
#workflow-panel .wf-btn-primary {
    background: var(--ark-ink) !important;
    color: #fff !important;
    border: 1px solid var(--ark-ink) !important;
    box-shadow: 0 14px 30px rgba(16,19,24,0.15) !important;
}
#workflow-panel .ai-gen-btn,
#workflow-panel #wfSmartStartBtn,
#workflow-panel #wfBottomStartBtn {
    background: var(--ark-ink) !important;
    color: #fff !important;
    border: 1px solid var(--ark-ink) !important;
    border-radius: 8px !important;
    box-shadow: 0 16px 34px rgba(16,19,24,0.16) !important;
}
#workflow-panel #wfBottomPauseBtn,
#workflow-panel #wfPipelinePauseBtn {
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid rgba(16,19,24,0.10) !important;
    color: var(--ark-ink) !important;
    border-radius: 8px !important;
}
#workflow-panel .wf-btn-secondary,
#workflow-panel .wf-btn:not(.wf-btn-primary) {
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid rgba(16,19,24,0.10) !important;
    color: var(--ark-ink) !important;
}
#workflow-panel .wf-divider {
    background: rgba(16,19,24,0.08) !important;
}
#workflow-panel .wf-sb-thumb,
#workflow-panel .wf-char-thumb,
#workflow-panel .wf-final-video,
#workflow-panel .wf-card-thumb,
#workflow-panel .wf-right-body {
    background: #eef3f6 !important;
    border-color: rgba(16,19,24,0.08) !important;
}
#workflow-panel .wf-sb-status-badge {
    background: rgba(255,255,255,0.92) !important;
    color: var(--ark-muted) !important;
    border: 1px solid rgba(16,19,24,0.10) !important;
}
#workflow-panel .wf-sb-status-badge.generating {
    color: var(--ark-coral) !important;
    border-color: rgba(255,107,87,0.30) !important;
}
#workflow-panel .wf-sb-status-badge.img_done,
#workflow-panel .wf-sb-status-badge.vid_done {
    color: var(--ark-mint) !important;
    border-color: rgba(10,163,132,0.30) !important;
}
#workflow-panel .wf-sb-btn-img,
#workflow-panel .wf-sb-btn-vid {
    background: #eef8f5 !important;
    color: var(--ark-ink) !important;
    border: 1px solid rgba(10,163,132,0.18) !important;
}
#workflow-panel #wfStatusText {
    color: var(--ark-muted) !important;
    opacity: 1 !important;
}
#workflow-panel #wfResultStatus,
#workflow-panel #wfResolutionHint span,
#workflow-panel #wfPipelineDetail {
    color: var(--ark-muted) !important;
    opacity: 1 !important;
}
#workflow-panel #wfResolutionText {
    color: var(--ark-mint) !important;
    opacity: 1 !important;
}
#workflow-panel #wfPipelineProgress {
    background: #f5f9fb !important;
    border: 1px solid rgba(10,163,132,0.20) !important;
}
#workflow-panel #wfPipelineLabel {
    color: var(--ark-mint) !important;
}
#workflow-panel #wfPipelineStep {
    color: var(--ark-muted) !important;
}
#workflow-panel [style*="color:rgba(255,255,255"],
#workflow-panel [style*="color: rgba(255,255,255"],
#workflow-panel [style*="color:#fff"],
#workflow-panel [style*="color: #fff"] {
    color: var(--ark-muted) !important;
    opacity: 1 !important;
}
#workflow-panel .wf-btn-primary,
#workflow-panel .wf-btn-primary *,
#workflow-panel .ai-gen-btn,
#workflow-panel .ai-gen-btn *,
#workflow-panel .wf-step.act,
#workflow-panel .wf-step.act * {
    color: #fff !important;
}
#workflow-panel [style*="background:rgba(255,255,255"],
#workflow-panel [style*="background: rgba(255,255,255"] {
    background: rgba(255,255,255,0.88) !important;
}
#workflow-panel [style*="border:1px solid rgba(255,255,255"],
#workflow-panel [style*="border: 1px solid rgba(255,255,255"] {
    border-color: rgba(16,19,24,0.10) !important;
}
#t2vAudioRow [style*="color:#d4d4d8"],
#i2vAudioRow [style*="color:#d4d4d8"],
#t2vAudioRow [style*="color: #d4d4d8"],
#i2vAudioRow [style*="color: #d4d4d8"] {
    color: var(--ark-ink) !important;
}
#t2vAudioRow [style*="color:#c084fc"],
#i2vAudioRow [style*="color:#c084fc"],
#t2vAudioRow [style*="color: #c084fc"],
#i2vAudioRow [style*="color: #c084fc"] {
    color: var(--ark-mint) !important;
}
#t2vAudioRow [style*="background:rgba(168,85,247"],
#i2vAudioRow [style*="background:rgba(168,85,247"] {
    background: #eef8f5 !important;
    border-color: rgba(10,163,132,0.24) !important;
}
#director-panel {
    background: rgba(255,255,255,0.76) !important;
    border: 1px solid var(--ark-line) !important;
}
#director-panel > div {
    gap: 22px !important;
}
#director-panel > div > div:first-child > div:nth-child(2) {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid var(--ark-line) !important;
    box-shadow: 0 18px 44px rgba(16,19,24,0.06) !important;
    border-radius: 8px !important;
}
#director-panel > div > div:first-child > div:nth-child(2) > div:first-child,
#directorCharCount {
    color: var(--ark-muted) !important;
}
#directorScriptInput {
    background: #f5f9fb !important;
    border: 1px solid rgba(16,19,24,0.11) !important;
    color: var(--ark-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9) !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 300px !important;
    padding: 12px !important;
    border-radius: 8px !important;
}
#directorScriptInput::placeholder {
    color: rgba(91,104,113,0.52) !important;
}
#director-panel .director-script-help {
    display: none !important;
}
#director-panel .director-script-actions {
    margin-top: 10px !important;
}
#director-panel > div > div:first-child button,
#director-panel > div > div:first-child label {
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid var(--ark-line) !important;
    color: var(--ark-muted) !important;
    border-radius: 8px !important;
}
#director-panel .director-script-actions button,
#director-panel .director-script-actions label {
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    background: #f7fafb !important;
}
#directorAnalyzeBtn {
    background: linear-gradient(135deg, var(--ark-ink), #26323a) !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 40px rgba(16,19,24,0.18) !important;
}
#director-panel #directorAnalyzeBtn {
    min-height: 48px !important;
    margin-top: 14px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 16px 34px rgba(16,19,24,0.16) !important;
}
#director-panel #directorProgressContainer {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}
#director-panel .director-workbench {
    gap: 16px !important;
    align-items: stretch !important;
    min-height: 640px !important;
}
#director-panel .director-left-panel {
    width: 360px !important;
    align-self: stretch !important;
    height: calc(100vh - 132px) !important;
    min-height: 640px !important;
    max-height: none !important;
    gap: 0 !important;
    padding: 14px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(16,19,24,0.10) !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 44px rgba(16,19,24,0.07) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
}
#director-panel .director-left-panel::-webkit-scrollbar {
    display: none !important;
}
#director-panel .director-left-hero {
    display: grid !important;
    gap: 4px !important;
    padding: 0 0 13px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#director-panel .director-left-title {
    margin: 0 !important;
    color: var(--ark-ink) !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}
#director-panel .director-left-desc {
    color: var(--ark-muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}
#director-panel .director-script-card {
    padding: 14px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
}
#director-panel .director-card-label {
    margin-bottom: 8px !important;
    color: var(--ark-ink) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}
#director-panel .director-style-panel {
    padding: 14px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
}
#director-panel .director-style-topline {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 48px !important;
    gap: 8px !important;
    align-items: center !important;
}
#director-panel .director-style-eyebrow {
    color: var(--ark-ink) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}
#director-panel .director-style-select {
    height: 34px !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    background: #f7fafb !important;
    color: var(--ark-ink) !important;
}
#director-panel .director-style-more {
    height: 34px !important;
    border-radius: 8px !important;
    background: #eef8f5 !important;
}
#director-panel .director-style-chips {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding-top: 10px !important;
    overflow: visible !important;
}
#director-panel .director-style-chip {
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}
#director-panel > div > div:nth-child(2) {
    background:
        linear-gradient(135deg, rgba(10,163,132,0.08), transparent 38%),
        linear-gradient(225deg, rgba(59,130,246,0.08), transparent 42%),
        #f3f8fa !important;
    border: 1px solid rgba(16,19,24,0.10) !important;
    box-shadow: 0 24px 60px rgba(16,19,24,0.08) !important;
    border-radius: 8px !important;
}
#directorReportHeader {
    background: rgba(255,255,255,0.88) !important;
    border-bottom: 1px solid rgba(16,19,24,0.09) !important;
    box-shadow: 0 12px 30px rgba(16,19,24,0.04) !important;
}
#directorReportHeader > div:first-child {
    color: var(--ark-ink) !important;
    font-weight: 800 !important;
}
#directorReportActions button {
    border-radius: 8px !important;
}
#directorReportActions button:first-child {
    background: var(--ark-ink) !important;
    color: #fff !important;
}
#directorReportActions button:last-child {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid var(--ark-line) !important;
    color: var(--ark-muted) !important;
}
#directorReportBody {
    background:
        linear-gradient(rgba(16,19,24,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,19,24,0.028) 1px, transparent 1px),
        transparent !important;
    background-size: 28px 28px !important;
    color: var(--ark-ink) !important;
}
#directorReportBody > div:first-child {
    min-height: calc(100% - 40px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 34px !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px dashed rgba(10,163,132,0.28) !important;
    border-radius: 8px !important;
    color: var(--ark-muted) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92) !important;
}
#directorReportBody > div:first-child > div:nth-child(2) {
    color: var(--ark-ink) !important;
}
#directorReportBody > div:first-child > div:last-child > div {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid var(--ark-line) !important;
    color: var(--ark-muted) !important;
    box-shadow: 0 10px 24px rgba(16,19,24,0.05) !important;
}
#directorReportBody .director-section,
#directorReportBody .director-scene-card,
#directorReportBody .director-rating-item {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(16,19,24,0.09) !important;
    color: var(--ark-ink) !important;
    box-shadow: 0 12px 30px rgba(16,19,24,0.06) !important;
    border-radius: 8px !important;
}
#directorReportBody .director-section h4,
#directorReportBody .director-scene-id,
#directorReportBody .director-timeline-time {
    color: var(--ark-mint) !important;
    border-color: rgba(16,19,24,0.08) !important;
}
#directorReportBody .director-scene-meta,
#directorReportBody .director-rating-item .label,
#directorReportBody .director-scene-desc,
#directorReportBody .director-suggestions li {
    color: var(--ark-muted) !important;
}
#directorReportBody .director-camera,
#directorReportBody .director-char-tag,
#directorReportBody .director-tag {
    background: #eef8f5 !important;
    color: var(--ark-ink) !important;
    border: 1px solid rgba(10,163,132,0.16) !important;
}
#directorReportBody .director-script-compare {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(16,19,24,0.09) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px rgba(16,19,24,0.06) !important;
    padding: 14px !important;
    margin-bottom: 16px !important;
}
#directorReportBody .director-script-compare-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
}
#directorReportBody .director-script-pane {
    min-width: 0 !important;
    border: 1px solid rgba(16,19,24,0.08) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f7fafb !important;
}
#directorReportBody .director-script-pane-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 9px 11px !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
    color: var(--ark-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
#directorReportBody .director-script-text {
    height: 320px !important;
    overflow: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    padding: 12px !important;
    color: var(--ark-ink) !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
}
#directorReportBody .director-script-diff-list {
    display: grid !important;
    gap: 8px !important;
    margin-top: 12px !important;
}
#directorReportBody .director-script-change {
    border: 1px solid rgba(16,19,24,0.08) !important;
    border-radius: 8px !important;
    padding: 9px 10px !important;
    background: #fbfdfe !important;
}
#directorReportBody .director-script-action-add { color: #087f5b !important; background: rgba(8,127,91,0.1) !important; }
#directorReportBody .director-script-action-modify { color: #8a5a00 !important; background: rgba(245,158,11,0.13) !important; }
#directorReportBody .director-script-action-delete { color: #b42318 !important; background: rgba(244,63,94,0.12) !important; }
#directorReportBody .director-script-action-move { color: #1d4ed8 !important; background: rgba(59,130,246,0.12) !important; }
#directorReportBody .director-review-desk {
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(16,19,24,0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 34px rgba(16,19,24,0.08) !important;
    padding: 14px !important;
    margin-bottom: 16px !important;
}
#directorReportBody .director-review-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
}
#directorReportBody .director-review-script,
#directorReportBody .director-review-notes {
    border: 1px solid rgba(16,19,24,0.08) !important;
    border-radius: 8px !important;
    background: #f8fbfc !important;
    overflow: hidden !important;
}
#directorReportBody .director-review-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
    color: var(--ark-ink) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}
#directorReportBody .director-review-script-body,
#directorReportBody .director-review-notes-body {
    height: 430px !important;
    overflow: auto !important;
    padding: 12px !important;
}
#directorReportBody .director-review-paragraph {
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(16,19,24,0.06) !important;
    border-radius: 8px !important;
    padding: 10px 11px !important;
    margin-bottom: 8px !important;
    color: var(--ark-ink) !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}
#directorReportBody .director-review-note {
    border: 1px solid rgba(16,19,24,0.08) !important;
    border-left: 4px solid var(--ark-mint) !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    padding: 11px 12px !important;
    margin-bottom: 10px !important;
    color: var(--ark-ink) !important;
}
#directorReportBody .director-review-note.priority-high { border-left-color: #e5484d !important; }
#directorReportBody .director-review-note.priority-low { border-left-color: #7c8a95 !important; }
#directorReportBody .director-review-chip {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}
#directorReportBody .director-review-field {
    margin-top: 7px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    color: var(--ark-muted) !important;
}
#directorReportBody .director-review-field strong {
    color: var(--ark-ink) !important;
}
@media (max-width: 1100px) {
    #directorReportBody .director-script-compare-grid {
        grid-template-columns: 1fr !important;
    }
    #directorReportBody .director-review-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Director review desk: left original script, right revised script and notes */
#director-panel {
    padding: 14px !important;
    background: #f4f7f8 !important;
}
#director-panel .director-workbench {
    display: grid !important;
    grid-template-columns: minmax(430px, 0.94fr) minmax(560px, 1.06fr) !important;
    gap: 14px !important;
    height: calc(100vh - 112px) !important;
    min-height: 700px !important;
    align-items: stretch !important;
}
#director-panel .director-left-panel,
#director-panel .director-output-panel {
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    background: #f8fafc !important;
    border: 1px solid rgba(16,19,24,0.10) !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 44px rgba(16,19,24,0.07) !important;
}
#director-panel .director-left-panel {
    width: auto !important;
    flex-shrink: 1 !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;
}
#director-panel .director-output-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
#director-panel .director-left-hero {
    padding: 0 0 12px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#director-panel .director-left-title {
    color: var(--ark-ink) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}
#director-panel .director-left-desc {
    color: var(--ark-muted) !important;
    font-size: 12px !important;
}
#director-panel .director-script-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 12px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
}
#director-panel .director-card-label {
    margin-bottom: 8px !important;
    color: var(--ark-ink) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}
#directorScriptInput {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    resize: none !important;
    background: #f7fafb !important;
    border: 1px solid rgba(16,19,24,0.12) !important;
    border-radius: 8px !important;
    color: var(--ark-ink) !important;
    font-size: 13px !important;
    line-height: 1.72 !important;
    padding: 13px !important;
}
#director-panel .director-script-help {
    display: none !important;
}
#director-panel .director-script-actions {
    flex: 0 0 auto !important;
    margin-top: 10px !important;
}
#director-panel .director-style-panel {
    flex: 0 0 auto !important;
    padding: 12px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#director-panel .director-style-topline {
    grid-template-columns: 66px minmax(0, 1fr) 52px !important;
    gap: 8px !important;
}
#director-panel .director-style-chips {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding-top: 9px !important;
    overflow: visible !important;
}
#director-panel .director-style-chip {
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
#director-panel #directorAnalyzeBtn {
    flex: 0 0 auto !important;
    min-height: 46px !important;
    margin-top: 12px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--ark-ink), #29343a) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 14px 30px rgba(16,19,24,0.16) !important;
}
#director-panel #directorProgressContainer {
    flex: 0 0 auto !important;
    margin-top: 12px !important;
}
#directorReportHeader {
    flex: 0 0 auto !important;
    min-height: 50px !important;
    padding: 0 16px !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(16,19,24,0.09) !important;
    box-shadow: none !important;
}
#directorReportHeader > div:first-child {
    color: var(--ark-ink) !important;
    font-weight: 950 !important;
}
#directorReportActions button {
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}
#directorReportBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    background: #f7fafb !important;
    color: var(--ark-ink) !important;
    overflow-y: auto !important;
}
#directorReportBody .director-empty-state {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ark-muted) !important;
}
#directorReportBody > .director-empty-state,
#directorReportBody > .director-result-layout {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#directorReportBody > .director-empty-state {
    min-height: 100% !important;
}
#directorReportBody > .director-result-layout {
    min-height: 0 !important;
    height: auto !important;
}
.director-empty-card {
    width: min(460px, 90%) !important;
    padding: 22px !important;
    background: #fff !important;
    border: 1px dashed rgba(10,163,132,0.26) !important;
    border-radius: 10px !important;
    text-align: center !important;
    box-shadow: 0 14px 32px rgba(16,19,24,0.05) !important;
}
.director-empty-card strong {
    display: block !important;
    color: var(--ark-ink) !important;
    font-size: 16px !important;
    margin-bottom: 8px !important;
}
.director-empty-card span {
    display: block !important;
    color: var(--ark-muted) !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
}
.director-result-layout {
    display: grid !important;
    gap: 14px !important;
}
.director-revision-result,
.director-full-report {
    background: #fff !important;
    border: 1px solid rgba(16,19,24,0.09) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 30px rgba(16,19,24,0.05) !important;
}
.director-revision-result {
    overflow: hidden !important;
}
.director-revision-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(16,19,24,0.08) !important;
}
.director-revision-title {
    color: var(--ark-ink) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}
.director-revision-subtitle {
    margin-top: 4px !important;
    color: var(--ark-muted) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}
.director-revised-script {
    max-height: min(46vh, 470px) !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 16px !important;
    background: #fbfdfe !important;
    color: var(--ark-ink) !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    font-size: 13px !important;
    line-height: 1.72 !important;
    font-family: inherit !important;
}
.director-revision-notes {
    display: grid !important;
    gap: 10px !important;
    padding: 14px !important;
    border-top: 1px solid rgba(16,19,24,0.08) !important;
}
.director-revision-note {
    padding: 11px 12px !important;
    border: 1px solid rgba(16,19,24,0.08) !important;
    border-left: 4px solid var(--ark-mint) !important;
    border-radius: 8px !important;
    background: #fff !important;
}
.director-revision-note strong {
    color: var(--ark-ink) !important;
}
.director-revision-note div {
    color: var(--ark-muted) !important;
    font-size: 12px !important;
    line-height: 1.62 !important;
}
.director-revision-chip {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #eef8f5 !important;
    color: var(--ark-mint) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}
.director-full-report {
    padding: 0 !important;
    overflow: hidden !important;
}
.director-full-report > summary {
    cursor: pointer !important;
    padding: 12px 14px !important;
    color: var(--ark-ink) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    list-style: none !important;
}
.director-full-report > summary::-webkit-details-marker {
    display: none !important;
}
.director-full-report-inner {
    padding: 0 14px 14px !important;
}
#directorReportBody .director-full-report-inner {
    background: transparent !important;
    border: 0 !important;
    color: inherit !important;
    box-shadow: none !important;
}
@media (max-width: 1180px) {
    #director-panel .director-workbench {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
    #director-panel .director-left-panel,
    #director-panel .director-output-panel {
        height: min(760px, calc(100vh - 120px)) !important;
    }
}

/* Doubao-like director workspace */
#director-panel {
    padding: 16px !important;
    background: #f6f7f9 !important;
}
#director-panel .director-workbench {
    display: grid !important;
    grid-template-columns: minmax(360px, 420px) minmax(620px, 1fr) !important;
    gap: 16px !important;
    height: calc(100vh - 116px) !important;
    min-height: 660px !important;
    align-items: stretch !important;
}
#director-panel .director-left-panel,
#director-panel .director-output-panel {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(16,19,24,0.04) !important;
}
#director-panel .director-left-panel {
    width: auto !important;
    padding: 14px !important;
    overflow: hidden !important;
}
#director-panel .director-left-hero {
    padding: 0 0 12px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
    background: #fff !important;
}
#director-panel .director-left-title {
    color: #111827 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}
#director-panel .director-left-desc {
    color: #6b7280 !important;
    font-size: 12px !important;
}
#director-panel .director-script-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
    background: transparent !important;
}
#director-panel .director-card-label,
#director-panel .director-style-eyebrow {
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
#directorScriptInput {
    background: #fafbfc !important;
    border: 1px solid #e5e7eb !important;
    color: #111827 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    padding: 14px !important;
    resize: none !important;
}
#directorScriptInput:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.10) !important;
}
#director-panel .director-script-actions button,
#director-panel .director-script-actions label,
#director-panel .director-style-select,
#director-panel .director-style-more,
#director-panel .director-style-chip {
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    color: #4b5563 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
#director-panel .director-style-panel {
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f2 !important;
    background: transparent !important;
}
#director-panel .director-style-chip.active {
    background: #111827 !important;
    color: #fff !important;
    border-color: #111827 !important;
}
#director-panel #directorAnalyzeBtn {
    min-height: 44px !important;
    margin-top: 12px !important;
    background: #111827 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}
#director-panel #directorAnalyzeBtn:hover {
    opacity: 0.92 !important;
}
#directorReportHeader {
    min-height: 52px !important;
    padding: 0 16px !important;
    background: #fff !important;
    border-bottom: 1px solid #edf0f2 !important;
}
#directorReportHeader > div:first-child {
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}
#directorReportBody {
    padding: 14px !important;
    background: #fafbfc !important;
    color: #111827 !important;
}
.director-doubao-empty {
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    gap: 12px !important;
}
.director-doubao-empty-title {
    color: #6b7280 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}
.director-output-progress {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
}
.director-output-progress-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 9px !important;
}
.director-output-progress-title {
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}
.director-output-progress-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}
.director-output-progress-track {
    height: 7px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #edf2f7 !important;
}
.director-output-progress-fill {
    width: 0%;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #34d399, #3b82f6) !important;
    transition: width 0.28s ease !important;
}
.director-doubao-empty-grid,
.director-compare-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
}
.director-doubao-empty-pane,
.director-compare-pane {
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.director-doubao-pane-head,
.director-compare-pane-head {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 13px !important;
    border-bottom: 1px solid #edf0f2 !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}
.director-doubao-placeholder {
    flex: 1 !important;
    min-height: 360px !important;
    padding: 14px !important;
    color: #9ca3af !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}
.director-doubao-result {
    display: grid !important;
    gap: 12px !important;
}
.director-compare-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
.director-compare-title {
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}
.director-compare-subtitle {
    margin-top: 4px !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}
.director-compare-chip {
    display: inline-flex !important;
    align-items: center !important;
    height: 24px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
}
.director-compare-text {
    flex: 1 1 auto !important;
    min-height: 420px !important;
    max-height: 52vh !important;
    overflow: auto !important;
    margin: 0 !important;
    padding: 15px !important;
    color: #111827 !important;
    background: #fff !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
}
.director-compare-text.revised {
    background: #fcfffd !important;
}
.director-advice-panel {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.director-advice-head {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 13px !important;
    border-bottom: 1px solid #edf0f2 !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}
.director-advice-list {
    display: grid !important;
    gap: 8px !important;
    max-height: 240px !important;
    overflow: auto !important;
    padding: 12px !important;
}
.director-advice-item {
    padding: 10px 11px !important;
    border: 1px solid #edf0f2 !important;
    border-radius: 8px !important;
    background: #fff !important;
}
.director-advice-item div {
    color: #4b5563 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
}
.director-advice-item strong {
    color: #111827 !important;
}
.director-shot-panel {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.director-shot-panel-head {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 13px !important;
    border-bottom: 1px solid #edf0f2 !important;
}
.director-shot-panel-title {
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}
.director-shot-list {
    display: grid !important;
    gap: 10px !important;
    padding: 12px !important;
}
.director-shot-item {
    border: 1px solid #edf0f2 !important;
    border-radius: 8px !important;
    background: #fff !important;
    overflow: hidden !important;
}
.director-shot-item-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #edf0f2 !important;
}
.director-shot-id {
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}
.director-shot-body {
    display: grid !important;
    gap: 8px !important;
    padding: 11px 12px !important;
}
.director-shot-desc {
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}
.director-shot-field {
    color: #4b5563 !important;
    font-size: 12px !important;
    line-height: 1.62 !important;
}
.director-shot-field strong {
    color: #111827 !important;
}
.director-full-report {
    border-radius: 8px !important;
    border-color: #e5e7eb !important;
    box-shadow: none !important;
}
#director-panel.director-input-collapsed .director-workbench {
    grid-template-columns: minmax(0, 1fr) !important;
}
#director-panel.director-input-collapsed .director-left-panel {
    display: none !important;
}
#director-panel.director-input-collapsed .director-output-panel {
    width: 100% !important;
}
.director-report-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.director-edit-input-btn {
    display: none;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #dbe3ea;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.director-edit-input-btn:hover {
    background: #f8fafc;
}
@media (max-width: 1180px) {
    #director-panel .director-workbench,
    .director-doubao-empty-grid,
    .director-compare-grid {
        grid-template-columns: 1fr !important;
    }
}
.result-card-type.type-img, .wf-card-num.d, .wf-step.done {
    background: rgba(10,163,132,0.12) !important;
    color: var(--ark-mint) !important;
    border-color: rgba(10,163,132,0.22) !important;
}
.result-card-type.type-video, .wf-card-num.v {
    background: rgba(59,130,246,0.12) !important;
    color: var(--ark-sky) !important;
    border-color: rgba(59,130,246,0.22) !important;
}
.history-card-overlay, .result-card-overlay, .img-lib-overlay {
    background: linear-gradient(to top, rgba(16,19,24,0.62), transparent 68%) !important;
}
.modal-overlay, .detail-modal, .favorites-modal-overlay, .ark-onboarding-overlay {
    background: rgba(247,250,252,0.72) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
}
.ark-toast, .ark-error-panel {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid var(--ark-line) !important;
    color: var(--ark-ink) !important;
    box-shadow: var(--ark-shadow) !important;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(16,19,24,0.04) !important; }
::-webkit-scrollbar-thumb { background: rgba(91,104,113,0.24) !important; border-radius: 8px !important; }

/* ===== AI 画布 ===== */
body.canvas-mode-active {
    overflow: hidden;
}
body.canvas-mode-active .main-content {
    height: 100vh;
    overflow: hidden;
}
body.canvas-mode-active #canvas-panel {
    height: calc(100vh - 152px);
    overflow: hidden;
    box-sizing: border-box;
}
.canvas-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 278px;
    gap: 16px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.canvas-side,
.canvas-workspace,
.canvas-inspector {
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(16,19,24,0.09);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(16,19,24,0.06);
    min-height: 0;
    height: 100%;
}
.canvas-side {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
    scrollbar-width: none;
}
.canvas-side::-webkit-scrollbar { display: none; }
.canvas-project-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(248,250,252,0.92);
    border: 1px solid rgba(16,19,24,0.08);
}
.canvas-project-select {
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.12);
    background: #fff;
    color: var(--ark-ink);
    padding: 0 10px;
    font-size: 13px;
    font-weight: 800;
    outline: none;
}
.canvas-cloud-status {
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(15,23,42,0.05);
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}
.canvas-cloud-status.synced {
    background: rgba(16,185,129,0.12);
    color: #047857;
}
.canvas-cloud-status.syncing {
    background: rgba(59,130,246,0.12);
    color: #1d4ed8;
}
.canvas-cloud-status.error {
    background: rgba(244,63,94,0.12);
    color: #be123c;
}
.canvas-kicker {
    font-size: 12px;
    font-weight: 900;
    color: var(--ark-mint);
}
.canvas-title {
    font-size: 21px;
    font-weight: 900;
    color: var(--ark-ink);
    line-height: 1.2;
}
.canvas-desc {
    color: var(--ark-muted);
    font-size: 12px;
    line-height: 1.55;
}
.canvas-tool-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.canvas-tool-btn,
.canvas-action-btn {
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(13,148,136,0.22);
    background: rgba(255,255,255,0.95);
    color: var(--ark-ink);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(16,19,24,0.06);
}
.canvas-tool-btn:hover,
.canvas-action-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(13,148,136,0.48);
    box-shadow: 0 14px 28px rgba(16,19,24,0.11);
}
.canvas-action-btn.primary {
    background: linear-gradient(135deg, #101318, #25313a);
    color: #fff;
    border-color: rgba(16,19,24,0.2);
}
.canvas-action-btn.danger {
    background: #fff1f2;
    color: #b4233a;
    border-color: rgba(244,63,94,0.34);
}
.canvas-action-btn.active,
.canvas-dock-btn.active {
    background: #0f172a;
    color: #fff;
    border-color: rgba(15,23,42,0.26);
}
.canvas-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.canvas-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.canvas-search-input {
    min-width: 180px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.12);
    background: rgba(255,255,255,0.96);
    color: var(--ark-ink);
    padding: 0 11px;
    font-size: 13px;
    font-weight: 750;
    outline: none;
}
.canvas-search-input:focus {
    border-color: rgba(13,148,136,0.46);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.10);
}
.canvas-action-btn:disabled {
    opacity: 0.46;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.canvas-divider {
    height: 1px;
    background: rgba(16,19,24,0.08);
    margin: 2px 0;
}
.canvas-note-input {
    min-height: 96px;
    resize: vertical;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.12);
    background: #f7fbfc;
    color: var(--ark-ink);
    padding: 12px;
    font-size: 13px;
    line-height: 1.55;
    outline: none;
}
.canvas-note-input:focus {
    border-color: rgba(13,148,136,0.42);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.10);
}
.canvas-help-list {
    display: grid;
    gap: 8px;
    margin-top: auto;
}
.canvas-help-item {
    padding: 9px;
    border-radius: 8px;
    background: rgba(238,248,245,0.9);
    border: 1px solid rgba(13,148,136,0.14);
    color: var(--ark-muted);
    font-size: 12px;
    line-height: 1.55;
}
.canvas-workspace {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(243,249,250,0.96)),
        #f6fbfc;
}
.canvas-topbar {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(16,19,24,0.08);
    background: rgba(255,255,255,0.82);
    z-index: 3;
}
.canvas-topbar-title {
    font-weight: 900;
    color: var(--ark-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.canvas-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.canvas-stage-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    scrollbar-width: none;
    cursor: grab;
    background:
        radial-gradient(circle at 1px 1px, rgba(16,19,24,0.13) 1px, transparent 0),
        radial-gradient(circle at 20% 16%, rgba(20,184,166,0.12), transparent 28%),
        linear-gradient(135deg, #f7fbfc, #eef6f8 58%, #fafafa);
    background-size: 22px 22px, 100% 100%, 100% 100%;
}
.canvas-stage-wrap.is-panning {
    cursor: grabbing;
}
.canvas-stage-wrap::-webkit-scrollbar {
    display: none;
}
.canvas-stage {
    position: relative;
    width: 3200px;
    height: 2100px;
    transform-origin: 0 0;
}
.canvas-link-layer {
    position: absolute;
    inset: 0;
    width: 3200px;
    height: 2100px;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}
.canvas-link-path {
    fill: none;
    stroke: rgba(15,23,42,0.62);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 5px 10px rgba(15,23,42,0.16));
}
.canvas-link-path.active {
    stroke: rgba(13,148,136,0.92);
    stroke-width: 3;
}
.canvas-link-path.dashed {
    stroke-dasharray: 9 7;
}
.canvas-link-path.thick {
    stroke-width: 4;
}
.canvas-link-dot {
    fill: #fff;
    stroke: rgba(15,23,42,0.62);
    stroke-width: 2;
}
.canvas-empty {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    width: 390px;
    text-align: center;
    color: var(--ark-muted);
    pointer-events: auto;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(16,19,24,0.08);
    border-radius: 8px;
    padding: 22px 24px;
    box-shadow: 0 18px 44px rgba(16,19,24,0.08);
}
.canvas-empty-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
    flex-wrap: wrap;
}
.canvas-empty-btn {
    min-height: 34px;
    border: 1px solid rgba(99,102,241,0.30);
    border-radius: 8px;
    background: #635bff;
    color: #fff;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(99,91,255,0.22);
}
.canvas-empty-btn.secondary {
    background: #fff;
    color: #0f172a;
    border-color: rgba(16,19,24,0.12);
    box-shadow: none;
}
.canvas-empty-icon {
    font-size: 38px;
    margin-bottom: 10px;
}
.canvas-empty-title {
    font-size: 20px;
    color: var(--ark-ink);
    font-weight: 900;
    margin-bottom: 8px;
}
.canvas-node {
    position: absolute;
    width: 250px;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(16,19,24,0.10);
    box-shadow: 0 18px 42px rgba(16,19,24,0.12);
    overflow: hidden;
    cursor: grab;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    z-index: 2;
}
.canvas-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 52px rgba(16,19,24,0.16);
}
.canvas-node:active { cursor: grabbing; }
.canvas-node.selected {
    border-color: rgba(13,148,136,0.62);
    box-shadow: 0 0 0 4px rgba(13,148,136,0.13), 0 20px 48px rgba(16,19,24,0.14);
}
.canvas-port-plus {
    position: absolute;
    top: 50%;
    z-index: 6;
    width: 26px;
    height: 26px;
    transform: translateY(-50%);
    border: 1px solid rgba(99,102,241,0.34);
    border-radius: 999px;
    background: #fff;
    color: #4f46e5;
    font-size: 17px;
    font-weight: 950;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(79,70,229,0.18);
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease, background .16s ease;
}
.canvas-port-plus.input {
    left: -13px;
}
.canvas-port-plus.output {
    right: -13px;
}
.canvas-node:hover .canvas-port-plus,
.canvas-node.selected .canvas-port-plus,
.canvas-port-plus.active {
    opacity: 1;
}
.canvas-port-plus:hover,
.canvas-port-plus.active {
    transform: translateY(-50%) scale(1.08);
    border-color: rgba(99,102,241,0.72);
    background: #eef2ff;
}
.canvas-node.connecting-from .canvas-port-plus.output,
.canvas-node.connecting-to .canvas-port-plus.input {
    opacity: 1;
    background: #eef2ff;
    border-color: rgba(99,102,241,0.74);
    color: #4338ca;
}
.canvas-node.section {
    min-height: 220px;
    background:
        linear-gradient(135deg, rgba(236,253,245,0.92), rgba(239,246,255,0.92)),
        rgba(255,255,255,0.96);
    border: 1.5px dashed rgba(13,148,136,0.44);
    box-shadow: 0 14px 36px rgba(13,148,136,0.10);
}
.canvas-node.role {
    border-color: rgba(168,85,247,0.28);
}
.canvas-node.agent {
    border-color: rgba(124,58,237,0.40);
    background:
        radial-gradient(circle at 88% 12%, rgba(167,139,250,0.16), transparent 34%),
        rgba(255,255,255,0.98);
    box-shadow: 0 18px 44px rgba(91,33,182,0.13);
}
.canvas-node.agent .canvas-node-head {
    background: linear-gradient(135deg, rgba(91,33,182,0.10), rgba(59,130,246,0.08));
}
.canvas-node.agent .canvas-node-chip {
    background: rgba(124,58,237,0.14);
    color: #6d28d9;
}
.canvas-node.role .canvas-node-chip {
    background: rgba(168,85,247,0.12);
    color: #7c3aed;
}
.canvas-node.scene {
    border-color: rgba(14,165,233,0.26);
}
.canvas-node.scene .canvas-node-chip {
    background: rgba(14,165,233,0.12);
    color: #0369a1;
}
.canvas-node.prop {
    border-color: rgba(245,158,11,0.30);
}
.canvas-node.prop .canvas-node-chip {
    background: rgba(245,158,11,0.14);
    color: #92400e;
}
.canvas-node.video {
    border-color: rgba(244,63,94,0.30);
}
.canvas-node.video .canvas-node-chip {
    background: rgba(244,63,94,0.12);
    color: #be123c;
}
.canvas-node.note {
    background: #fff7cc;
    border-color: rgba(217,119,6,0.32);
    box-shadow: 0 18px 40px rgba(180,83,9,0.13);
}
.canvas-node.note .canvas-node-head {
    background: rgba(255,251,235,0.94);
}
.canvas-node.note .canvas-node-chip {
    background: rgba(217,119,6,0.14);
    color: #92400e;
}
.canvas-node.note .canvas-node-body {
    color: #3f3f46;
    font-size: 14px;
}
.canvas-node.shape {
    min-height: 132px;
    background: rgba(255,255,255,0.96);
    border-color: rgba(51,65,85,0.18);
}
.canvas-node.shape .canvas-node-head {
    background: rgba(248,250,252,0.9);
}
.canvas-node.shape .canvas-node-chip {
    background: rgba(51,65,85,0.10);
    color: #334155;
}
.canvas-node.shape .canvas-node-body {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 900;
    color: #1f2937;
}
.canvas-node.shape.shape-circle {
    border-radius: 999px;
}
.canvas-node.shape.shape-circle .canvas-node-head,
.canvas-node.shape.shape-circle .canvas-node-actions {
    padding-left: 24px;
    padding-right: 24px;
}
.canvas-node.shape.shape-diamond {
    transform: rotate(45deg);
    border-radius: 10px;
}
.canvas-node.shape.shape-diamond:hover {
    transform: rotate(45deg) translateY(-2px);
}
.canvas-node.shape.shape-diamond.selected {
    box-shadow: 0 0 0 4px rgba(13,148,136,0.13), 0 20px 48px rgba(16,19,24,0.14);
}
.canvas-node.shape.shape-diamond .canvas-node-head,
.canvas-node.shape.shape-diamond .canvas-node-body,
.canvas-node.shape.shape-diamond .canvas-node-actions,
.canvas-node.shape.shape-diamond .canvas-resize-handle {
    transform: rotate(-45deg);
}
.canvas-node.search-hit {
    border-color: rgba(245,158,11,0.82);
    box-shadow: 0 0 0 4px rgba(245,158,11,0.16), 0 20px 48px rgba(16,19,24,0.14);
}
.canvas-node.locked {
    cursor: default;
}
.canvas-node.hidden-node {
    display: none;
}
.canvas-node.grouped {
    outline: 1.5px dashed rgba(59,130,246,0.52);
    outline-offset: 3px;
}
.canvas-node.workflow-running {
    border-color: rgba(37,99,235,0.52);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12), 0 20px 48px rgba(16,19,24,0.14);
}
.canvas-node.workflow-done {
    border-color: rgba(13,148,136,0.46);
}
.canvas-node.workflow-error {
    border-color: rgba(244,63,94,0.56);
    box-shadow: 0 0 0 4px rgba(244,63,94,0.10), 0 20px 48px rgba(16,19,24,0.14);
}
.canvas-editable {
    outline: none;
    border-radius: 6px;
    cursor: text;
}
.canvas-editable:focus {
    background: rgba(13,148,136,0.08);
    box-shadow: 0 0 0 2px rgba(13,148,136,0.14);
}
.canvas-node-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
.canvas-node-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.canvas-node-meta {
    display: flex;
    gap: 5px;
    padding: 8px 10px 0;
    flex-wrap: wrap;
}
.canvas-node-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 8px;
    background: rgba(15,23,42,0.06);
    color: #475569;
    font-size: 11px;
    font-weight: 850;
}
.canvas-node-badge.comment {
    background: rgba(245,158,11,0.14);
    color: #92400e;
}
.canvas-node-badge.version {
    background: rgba(13,148,136,0.12);
    color: #0f766e;
}
.canvas-node-badge.locked {
    background: rgba(100,116,139,0.14);
    color: #475569;
}
.canvas-node-badge.group {
    background: rgba(59,130,246,0.12);
    color: #1d4ed8;
}
.canvas-node-badge.workflow {
    background: rgba(37,99,235,0.12);
    color: #1d4ed8;
}
.canvas-node-badge.workflow.done {
    background: rgba(13,148,136,0.12);
    color: #0f766e;
}
.canvas-node-badge.workflow.running {
    background: rgba(37,99,235,0.14);
    color: #1d4ed8;
}
.canvas-node-badge.workflow.error {
    background: rgba(244,63,94,0.12);
    color: #be123c;
}
.canvas-node-badge.port {
    background: rgba(99,102,241,0.10);
    color: #4f46e5;
}
.canvas-node-badge.output {
    background: rgba(16,185,129,0.12);
    color: #047857;
}
.canvas-workflow-summary {
    margin: 8px 10px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(13,148,136,0.07);
    border: 1px solid rgba(13,148,136,0.13);
    color: #0f766e;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}
.canvas-workflow-summary span {
    color: #475569;
    font-weight: 700;
}
.canvas-agent-confirmation {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(245,158,11,0.28);
    border-radius: 10px;
    background: rgba(255,251,235,0.92);
    color: #92400e;
    font-size: 12px;
    line-height: 1.55;
}
.canvas-agent-confirmation strong {
    display: block;
    margin-bottom: 3px;
}
.canvas-agent-confirmation button {
    margin-top: 8px;
}
.canvas-node.section .canvas-node-head {
    background: rgba(15,23,42,0.88);
    color: #fff;
}
.canvas-node.section .canvas-node-body {
    color: #334155;
    min-height: 138px;
}
.canvas-node-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 8px;
    background: rgba(13,148,136,0.10);
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
}
.canvas-node-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    background: rgba(248,250,252,0.95);
    border-bottom: 1px solid rgba(16,19,24,0.08);
    color: var(--ark-ink);
    font-size: 12px;
    font-weight: 900;
}
.canvas-node-body {
    padding: 10px;
    color: var(--ark-muted);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 48px;
}
.canvas-node img {
    display: block;
    width: 100%;
    max-height: 210px;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.canvas-node-actions {
    display: flex;
    gap: 6px;
    padding: 0 10px 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.canvas-mini-btn {
    border: 1px solid rgba(13,148,136,0.20);
    background: #fff;
    color: var(--ark-ink);
    border-radius: 8px;
    min-height: 30px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.canvas-mini-btn.danger {
    color: #b4233a;
    border-color: rgba(244,63,94,0.34);
    background: #fff1f2;
}
.canvas-node-gen-panel {
    position: absolute;
    z-index: 9;
    width: min(760px, calc(100% - 32px));
    display: none;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.10);
    background: rgba(255,255,255,0.96);
    box-shadow: 0 22px 64px rgba(16,19,24,0.16);
    backdrop-filter: blur(18px);
}
.canvas-node-gen-panel.show {
    display: grid;
}
.canvas-node-gen-panel.global {
    left: 50%;
    bottom: 20px;
    top: auto;
    transform: translateX(-50%);
}
.canvas-node-gen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
}
.canvas-node-gen-head span {
    min-width: 0;
    color: #64748b;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.canvas-node-gen-input {
    width: 100%;
    min-height: 76px;
    max-height: 150px;
    resize: vertical;
    border: 1px solid rgba(16,19,24,0.12);
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    outline: none;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.55;
}
.canvas-node-gen-input:focus {
    border-color: rgba(99,102,241,0.50);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.canvas-node-gen-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) minmax(112px, .75fr) minmax(88px, .55fr) auto auto;
    gap: 8px;
    align-items: center;
}
.canvas-node-gen-select,
.canvas-node-gen-cost,
.canvas-node-gen-send {
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.12);
    background: #fff;
    color: #0f172a;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 900;
}
.canvas-node-gen-cost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: #4f46e5;
    background: #eef2ff;
    border-color: rgba(99,102,241,0.20);
}
.canvas-node-gen-send {
    min-width: 78px;
    border-color: rgba(99,102,241,0.54);
    background: #635bff;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(99,91,255,0.22);
}
.canvas-node-gen-send:disabled {
    cursor: wait;
    opacity: .68;
}
.canvas-node-gen-close {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(16,19,24,0.10);
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}
.canvas-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 3;
}
.canvas-resize-handle::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(15,23,42,0.38);
    border-bottom: 2px solid rgba(15,23,42,0.38);
}
.canvas-status {
    font-size: 12px;
    color: var(--ark-muted);
    font-weight: 700;
}
.canvas-floating-dock {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 4;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(16,19,24,0.08);
    box-shadow: 0 16px 36px rgba(16,19,24,0.10);
    backdrop-filter: blur(14px);
}
.canvas-dock-btn {
    min-width: 38px;
    min-height: 34px;
    border: 1px solid rgba(13,148,136,0.18);
    border-radius: 8px;
    background: rgba(255,255,255,0.92);
    color: var(--ark-ink);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.canvas-dock-btn.primary {
    min-width: 68px;
    border-color: rgba(99,102,241,0.45);
    background: #635bff;
    color: #fff;
    box-shadow: 0 10px 22px rgba(99,91,255,0.20);
}
.canvas-dock-btn:hover {
    border-color: rgba(13,148,136,0.42);
    background: #effaf7;
}
.canvas-selection-box {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    border: 1.5px solid rgba(13,148,136,0.82);
    background: rgba(13,148,136,0.12);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.7) inset;
    display: none;
}
.canvas-minimap {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 178px;
    height: 118px;
    z-index: 5;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.12);
    background:
        radial-gradient(circle at 1px 1px, rgba(16,19,24,0.10) 1px, transparent 0),
        rgba(255,255,255,0.92);
    background-size: 12px 12px;
    box-shadow: 0 18px 42px rgba(16,19,24,0.16);
    overflow: hidden;
    cursor: pointer;
}
.canvas-minimap-node {
    position: absolute;
    border-radius: 4px;
    background: rgba(13,148,136,0.54);
    border: 1px solid rgba(13,148,136,0.64);
}
.canvas-minimap-node.section {
    background: rgba(59,130,246,0.18);
    border-style: dashed;
}
.canvas-minimap-view {
    position: absolute;
    border: 1.5px solid rgba(15,23,42,0.74);
    background: rgba(15,23,42,0.08);
    border-radius: 5px;
}
.canvas-context-menu {
    position: absolute;
    z-index: 20;
    min-width: 152px;
    display: none;
    padding: 7px;
    border-radius: 8px;
    background: rgba(15,23,42,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 18px 48px rgba(15,23,42,0.28);
}
.canvas-context-menu button {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #f8fafc;
    text-align: left;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.canvas-context-menu button:hover {
    background: rgba(255,255,255,0.10);
}
.canvas-timeline {
    position: absolute;
    left: 16px;
    right: 212px;
    bottom: 74px;
    z-index: 4;
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 74px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.10);
    background: rgba(255,255,255,0.90);
    box-shadow: 0 18px 42px rgba(16,19,24,0.13);
    backdrop-filter: blur(14px);
    overflow-x: auto;
}
.canvas-timeline-title {
    flex: 0 0 auto;
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
    padding: 0 8px;
}
.canvas-timeline-item {
    flex: 0 0 166px;
    min-height: 50px;
    border-radius: 8px;
    border: 1px solid rgba(13,148,136,0.20);
    background: #fff;
    padding: 8px;
    color: #334155;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(16,19,24,0.06);
}
.canvas-timeline-item:hover {
    border-color: rgba(13,148,136,0.48);
    transform: translateY(-1px);
}
.canvas-timeline-item b {
    display: block;
    color: #0f172a;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.canvas-timeline-item span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.canvas-link-label {
    display: none;
    fill: #0f172a;
    font-size: 13px;
    font-weight: 900;
    paint-order: stroke;
    stroke: rgba(255,255,255,0.90);
    stroke-width: 4px;
    stroke-linejoin: round;
}
.canvas-presentation-controls {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    z-index: 8;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.12);
    background: rgba(15,23,42,0.92);
    color: #f8fafc;
    box-shadow: 0 18px 42px rgba(15,23,42,0.26);
}
.canvas-presentation-controls.show {
    display: flex;
}
.canvas-presentation-title {
    min-width: 150px;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 950;
}
.canvas-presentation-btn {
    min-height: 30px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    padding: 0 10px;
    cursor: pointer;
}
.canvas-presentation-btn:hover {
    background: rgba(255,255,255,0.16);
}
.canvas-inspector {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.canvas-inspector-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid rgba(16,19,24,0.08);
    background: rgba(255,255,255,0.86);
}
.canvas-inspector-tab {
    min-height: 32px;
    border: 1px solid rgba(16,19,24,0.10);
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.canvas-inspector-tab.active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}
.canvas-inspector-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px;
}
.canvas-inspector-panel {
    display: none;
}
.canvas-inspector-panel.active {
    display: grid;
    gap: 8px;
}
.canvas-layer-row,
.canvas-comment-row,
.canvas-asset-row,
.canvas-connection-row {
    display: grid;
    gap: 6px;
    padding: 9px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.08);
    background: rgba(248,250,252,0.92);
}
.canvas-layer-row.active {
    border-color: rgba(13,148,136,0.45);
    background: rgba(236,253,245,0.90);
}
.canvas-layer-main,
.canvas-comment-main,
.canvas-connection-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.canvas-layer-title,
.canvas-comment-title,
.canvas-asset-title,
.canvas-connection-title {
    min-width: 0;
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.canvas-layer-meta,
.canvas-comment-text,
.canvas-asset-meta,
.canvas-connection-meta {
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
}
.canvas-layer-actions,
.canvas-comment-actions,
.canvas-connection-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.canvas-icon-btn {
    min-width: 28px;
    min-height: 28px;
    padding: 0 7px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.10);
    background: #fff;
    color: #0f172a;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}
.canvas-icon-btn:hover {
    border-color: rgba(13,148,136,0.38);
    background: #effaf7;
}
.canvas-property-card {
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.08);
    background: rgba(248,250,252,0.94);
}
.canvas-property-title {
    color: #0f172a;
    font-size: 12px;
    font-weight: 950;
}
.canvas-property-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.canvas-property-field {
    display: grid;
    gap: 5px;
}
.canvas-property-field.full {
    grid-column: 1 / -1;
}
.canvas-property-field label {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}
.canvas-property-input,
.canvas-property-select,
.canvas-property-textarea {
    width: 100%;
    min-height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.12);
    background: #fff;
    color: #0f172a;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 750;
    outline: none;
}
.canvas-property-textarea {
    min-height: 92px;
    padding: 9px;
    resize: vertical;
    line-height: 1.5;
}
.canvas-property-input:focus,
.canvas-property-select:focus,
.canvas-property-textarea:focus {
    border-color: rgba(13,148,136,0.46);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.10);
}
.canvas-color-input {
    width: 100%;
    min-height: 34px;
    border: 1px solid rgba(16,19,24,0.12);
    border-radius: 8px;
    background: #fff;
    padding: 3px;
    cursor: pointer;
}
.canvas-swatch-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.canvas-swatch {
    min-height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.12);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.52);
}
.canvas-asset-row {
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    cursor: pointer;
}
.canvas-asset-row img {
    width: 56px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(16,19,24,0.08);
    background: #fff;
}
.canvas-empty-small {
    padding: 16px 10px;
    text-align: center;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
    border: 1px dashed rgba(16,19,24,0.14);
    border-radius: 8px;
    background: rgba(248,250,252,0.72);
}
@media (max-width: 1280px) {
    .canvas-shell {
        grid-template-columns: 260px minmax(0, 1fr);
    }
    .canvas-inspector {
        display: none;
    }
}

/* =====================================================================
   ManyTokens 创作中心 — 主页同色编辑级日间设计层（v2 · light only）
   ---------------------------------------------------------------------
   设计目标：
   · 与主页奶白日间模式完全同源（背景 #f8f8fb / 紫色 #5B47FB / 衬线 Noto Serif SC）
   · 编辑级排版节奏：眉头 mono 小字 → 衬线大标题 → 副标语 → 留白
   · 玻璃卡片层次（白底带细线 + 软紫光晕投影）
   · 单一紫色重音贯穿（按钮、激活态、聚焦边、纹理光晕），不再使用 teal/cyan
   · 强制日间模式，移除主题切换器
   ===================================================================== */

body.ui-polished-creator {
    /* ─── 设计令牌（与主页 day 一致） ─── */
    --mt-bg: #f8f8fb;
    --mt-bg-2: #f0f0f6;
    --mt-ink: #0c0c12;
    --mt-ink-2: #1c1c24;
    --mt-muted: rgba(12,12,18,.62);
    --mt-soft: rgba(12,12,18,.40);
    --mt-line: rgba(12,12,18,.07);
    --mt-line-2: rgba(12,12,18,.13);
    --mt-accent: #5B47FB;
    --mt-accent-2: #7F6BFF;
    --mt-accent-3: #3F2EE0;
    --mt-accent-soft: rgba(91,71,251,.07);
    --mt-accent-tint: rgba(91,71,251,.14);
    --mt-paper: rgba(255,255,255,.86);
    --mt-paper-2: rgba(255,255,255,.96);
    --mt-radius-lg: 20px;
    --mt-radius: 14px;
    --mt-radius-sm: 10px;
    --mt-shadow-sm: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px -10px rgba(40,30,90,.10);
    --mt-shadow-md: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 44px -22px rgba(40,30,90,.18);
    --mt-shadow-lg: 0 1px 0 rgba(255,255,255,.95) inset, 0 36px 80px -32px rgba(40,30,90,.22);

    background: var(--mt-bg) !important;
    color: var(--mt-ink) !important;
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif !important;
    font-feature-settings: 'palt';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light;
}

/* 全局微弱紫色辐射 —— 与主页 hero 同源的氛围光，量保持低 */
body.ui-polished-creator::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(900px 700px at 6% -8%, rgba(91,71,251,.10), transparent 62%),
        radial-gradient(700px 600px at 102% 108%, rgba(91,71,251,.06), transparent 60%),
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,.45) 100%);
}

/* 细纹理（与主页 grain 同源思路，量极低） */
body.ui-polished-creator::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .025;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* 关掉原 cyberpunk 背景层 */
body.ui-polished-creator .bg-dynamic,
body.ui-polished-creator .grid-bg {
    display: none !important;
}

/* 隐藏主题切换按钮 —— 创作页只用日间 */
body.ui-polished-creator .ark-theme-toggle {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   侧栏
   ───────────────────────────────────────────────────────────────────── */
body.ui-polished-creator .sidebar {
    width: 268px;
    padding: 20px 14px 16px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.74) 100%) !important;
    border-right: 1px solid var(--mt-line) !important;
    box-shadow: 1px 0 0 rgba(255,255,255,.4), 18px 0 50px -36px rgba(40,30,90,.18) !important;
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
}
body.ui-polished-creator .sidebar::before,
body.ui-polished-creator .sidebar::after {
    display: none !important;
}

body.ui-polished-creator .logo-section {
    padding: 4px 6px 18px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid var(--mt-line) !important;
    background: transparent !important;
}

body.ui-polished-creator .logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* 隐藏侧栏 logo 小图标（保留 "ManyTokens" 文字） */
body.ui-polished-creator .logo-icon {
    display: none !important;
}
/* logo 文字带一个 6px 紫色圆点做编辑级标记 —— 与主页 nav .logo .dot 风格同源 */
body.ui-polished-creator .logo-text {
    position: relative;
    padding-left: 16px !important;
}
body.ui-polished-creator .logo-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mt-accent);
    box-shadow: 0 0 10px var(--mt-accent);
}

body.ui-polished-creator .logo-text {
    font-family: 'Noto Serif SC', serif !important;
    font-weight: 900 !important;
    font-size: 19px !important;
    letter-spacing: -.015em !important;
    color: var(--mt-ink) !important;
    -webkit-text-fill-color: var(--mt-ink) !important;
    background: none !important;
}

/* 隐藏冗余的「返回首页」按钮 —— logo 本身就能点击回家 */
body.ui-polished-creator .ark-home-btn {
    display: none !important;
}

body.ui-polished-creator .nav-menu {
    padding: 8px 6px 12px !important;
}

body.ui-polished-creator .nav-section {
    margin-bottom: 14px !important;
    position: relative;
}
/* 段间细分割线，比 uppercase 段名更克制 */
body.ui-polished-creator .nav-section + .nav-section {
    padding-top: 12px;
}
body.ui-polished-creator .nav-section + .nav-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: var(--mt-line);
}

/* 段名：中文不再用 uppercase + 巨大 letter-spacing，恢复正常字距 */
body.ui-polished-creator .nav-section-title {
    padding: 0 12px 6px !important;
    color: var(--mt-soft) !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}

body.ui-polished-creator .nav-item {
    min-height: 34px;
    margin-bottom: 0 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--mt-muted) !important;
    transition: background .15s, color .15s !important;
}
body.ui-polished-creator .nav-item .nav-text {
    color: inherit !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    letter-spacing: -.005em !important;
}
body.ui-polished-creator .nav-item:hover {
    background: rgba(91,71,251,.05) !important;
    color: var(--mt-ink) !important;
}
/* 激活态：实底紫色背景，白字 —— 主页 day mode 同款"确定感" */
body.ui-polished-creator .nav-item.active {
    background: linear-gradient(135deg, var(--mt-accent), var(--mt-accent-3)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 16px -8px rgba(91,71,251,.55) !important;
}
body.ui-polished-creator .nav-item.active::before {
    display: none !important;
}
body.ui-polished-creator .nav-item.active .nav-text {
    color: #fff !important;
    font-weight: 700 !important;
}

/* 徽章：扁平小号、激活态变白 */
body.ui-polished-creator .nav-badge {
    margin-left: auto !important;
    padding: 1px 7px !important;
    border-radius: 4px !important;
    background: rgba(91,71,251,.10) !important;
    color: var(--mt-accent) !important;
    border: 0 !important;
    font-family: 'Manrope', 'Noto Sans SC', sans-serif !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    box-shadow: none !important;
    line-height: 1.6;
}
body.ui-polished-creator .nav-item.active .nav-badge {
    background: rgba(255,255,255,.20) !important;
    color: #fff !important;
}

/* 用户卡：去掉抢眼的紫色头像，整体降噪 */
body.ui-polished-creator .user-section {
    padding: 12px 6px 8px !important;
    border-top: 1px solid var(--mt-line) !important;
}
body.ui-polished-creator .user-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 8px 10px !important;
    gap: 10px !important;
}
body.ui-polished-creator .user-card:hover {
    background: rgba(91,71,251,.05) !important;
    border: 0 !important;
}
body.ui-polished-creator .user-avatar {
    width: 32px !important;
    height: 32px !important;
    background: var(--mt-bg-2) !important;
    color: var(--mt-muted) !important;
    border: 1px solid var(--mt-line-2) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}
body.ui-polished-creator .user-name {
    color: var(--mt-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
body.ui-polished-creator .user-status {
    color: var(--mt-muted) !important;
    font-size: 11.5px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   主内容区
   ───────────────────────────────────────────────────────────────────── */
body.ui-polished-creator .main-content {
    margin-left: 268px !important;
    padding: 26px clamp(28px, 3.4vw, 52px) 64px !important;
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* 自动隐藏侧边栏 */
body.ui-polished-creator.sidebar-auto-hide .sidebar {
    transform: translateX(-282px) !important;
    transition: transform .28s ease, box-shadow .28s ease !important;
    will-change: transform;
}
body.ui-polished-creator.sidebar-auto-hide.sidebar-revealed .sidebar {
    transform: translateX(0) !important;
    box-shadow: 22px 0 60px -28px rgba(40,30,90,.22) !important;
}
body.ui-polished-creator.sidebar-auto-hide .main-content {
    margin-left: 0 !important;
    padding-left: clamp(40px, 4vw, 64px) !important;
    padding-right: clamp(32px, 3.4vw, 52px) !important;
    transition: margin-left .28s ease, padding .28s ease !important;
}
body.ui-polished-creator.sidebar-auto-hide.sidebar-revealed .main-content {
    margin-left: 268px !important;
}

.sidebar-hover-zone {
    position: fixed;
    left: 0;
    top: 0;
    width: 12px;
    height: 100vh;
    z-index: 160;
    background: linear-gradient(90deg, rgba(91,71,251,.14), rgba(91,71,251,.02), transparent);
    opacity: .55;
    transition: opacity .2s ease, width .2s ease;
    cursor: pointer;
}
.sidebar-hover-zone::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 3px;
    height: 56px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--mt-accent, #5B47FB);
    box-shadow: 0 0 18px rgba(91,71,251,.42);
    opacity: .85;
}
body.sidebar-revealed .sidebar-hover-zone {
    width: 4px;
    opacity: 0;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────
   顶栏 —— 编辑级排版：mono eyebrow + 衬线大标题 + 副标语
   ───────────────────────────────────────────────────────────────────── */
body.ui-polished-creator .top-bar {
    position: relative;
    min-height: 84px;
    margin-bottom: 28px !important;
    padding: 4px 2px 22px !important;
    border-bottom: 1px solid var(--mt-line) !important;
}
/* eyebrow（mono 小字「· · · CREATIVE STUDIO · MANYTOKENS」） */
body.ui-polished-creator .top-bar::before {
    content: "·  ·  ·   CREATIVE  STUDIO  ·  MANYTOKENS";
    position: absolute;
    top: -2px;
    left: 0;
    font-family: 'Manrope', 'Noto Sans SC', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .32em;
    color: var(--mt-soft);
    text-transform: uppercase;
}

body.ui-polished-creator .page-title {
    margin-top: 16px !important;
    font-family: 'Noto Serif SC', serif !important;
    font-weight: 700 !important;
    font-size: clamp(26px, 2.4vw, 34px) !important;
    line-height: 1.18 !important;
    letter-spacing: -.025em !important;
    color: var(--mt-ink) !important;
}
body.ui-polished-creator .page-title span {
    color: var(--mt-accent) !important;
    -webkit-text-fill-color: var(--mt-accent) !important;
    background: none !important;
    font-weight: 900 !important;
}
body.ui-polished-creator .page-title::after {
    content: "一段剧本，多种风格 · 在统一的工作台里完成提示词、参考图与视频镜头";
    display: block;
    margin-top: 8px;
    max-width: 64ch;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: .005em;
    color: var(--mt-muted);
    border-left: 2px solid var(--mt-accent);
    padding-left: 14px;
}

body.ui-polished-creator .top-actions {
    gap: 8px !important;
    align-self: flex-end;
}

body.ui-polished-creator .ark-top-home-btn {
    height: 38px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    border: 1px solid var(--mt-line) !important;
    background: var(--mt-paper) !important;
    color: var(--mt-ink) !important;
    font-family: 'Manrope', 'Noto Sans SC', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    box-shadow: var(--mt-shadow-sm) !important;
    cursor: pointer !important;
    transition: background .2s, border-color .2s, transform .2s, color .2s, box-shadow .2s !important;
}
body.ui-polished-creator .ark-top-home-btn:hover {
    background: #fff !important;
    border-color: rgba(91, 71, 251, .35) !important;
    color: var(--mt-accent) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--mt-shadow-md) !important;
}
body.canvas-mode-active .ark-top-home-btn {
    display: none !important;
}

body.ui-polished-creator .icon-btn,
body.ui-polished-creator .tool-btn,
body.ui-polished-creator .t2i-action-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    border: 1px solid var(--mt-line) !important;
    background: var(--mt-paper) !important;
    color: var(--mt-ink-2) !important;
    box-shadow: var(--mt-shadow-sm) !important;
    transition: background .2s, border-color .2s, transform .2s, color .2s !important;
}
body.ui-polished-creator .icon-btn:hover,
body.ui-polished-creator .tool-btn:hover,
body.ui-polished-creator .t2i-action-btn:hover {
    background: #fff !important;
    border-color: var(--mt-accent) !important;
    color: var(--mt-accent) !important;
    transform: translateY(-1px) !important;
}

body.ui-polished-creator .ark-balance-widget,
body.ui-polished-creator .ark-points-widget {
    padding: 0 14px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    border-radius: 11px !important;
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    color: var(--mt-ink) !important;
    font-family: 'Manrope', 'Noto Sans SC', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    box-shadow: var(--mt-shadow-sm) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   主创作面板
   ───────────────────────────────────────────────────────────────────── */
body.ui-polished-creator .create-section {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 26px !important;
}

/* 主面板「舞台」 —— 大尺寸玻璃卡，紫色顶光 + 深层投影 */
body.ui-polished-creator .t2i-layout {
    position: relative;
    align-items: stretch !important;
    gap: 22px !important;
    padding: 26px !important;
    border-radius: var(--mt-radius-lg) !important;
    background:
        radial-gradient(900px 280px at 0% 0%, rgba(91,71,251,.05), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78)) !important;
    border: 1px solid rgba(91,71,251,.10) !important;
    box-shadow: var(--mt-shadow-lg) !important;
    overflow: hidden;
}
/* 卡片顶部细紫线（编辑级 hairline） */
body.ui-polished-creator .t2i-layout::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91,71,251,.42), transparent);
    pointer-events: none;
}

body.ui-polished-creator .t2i-left,
body.ui-polished-creator .t2i-right {
    border-radius: var(--mt-radius) !important;
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    box-shadow: var(--mt-shadow-sm) !important;
}

body.ui-polished-creator .t2i-left {
    padding: 24px !important;
}
/* 创作流程提示条 —— 主页 hero-sub 同款 */
body.ui-polished-creator .t2i-left::after {
    content: "创作流程 · 提示词 / 参考图 → 模型参数 → 生成结果 → 图库 / 画布";
    display: block;
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 10px;
    border-left: 2px solid var(--mt-accent);
    background: var(--mt-accent-soft);
    color: #3d2f9a;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .005em;
}

body.ui-polished-creator .t2i-right {
    padding: 24px !important;
    display: flex;
    flex-direction: column;
    min-height: 560px !important;
}

/* 快捷预设 —— chip 风格，主页 style-btn 同源 */
body.ui-polished-creator .t2i-presets {
    gap: 7px !important;
    margin-bottom: 4px !important;
}
body.ui-polished-creator .t2i-preset-btn,
body.ui-polished-creator .director-style-chip {
    min-height: 32px !important;
    padding: 5px 13px !important;
    border-radius: 999px !important;
    color: var(--mt-ink-2) !important;
    background: #fff !important;
    border: 1px solid var(--mt-line-2) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px -3px rgba(40,30,90,.10) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: -.005em !important;
    transition: background .18s, border-color .18s, transform .18s, color .18s !important;
}
body.ui-polished-creator .t2i-preset-btn:hover,
body.ui-polished-creator .director-style-chip:hover {
    background: var(--mt-accent-soft) !important;
    border-color: rgba(91,71,251,.32) !important;
    color: var(--mt-accent-3) !important;
    transform: translateY(-1px) !important;
}

body.ui-polished-creator .t2i-label {
    color: var(--mt-ink) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
}

body.ui-polished-creator .t2i-textarea,
body.ui-polished-creator .t2i-select,
body.ui-polished-creator input[type="text"],
body.ui-polished-creator input[type="number"],
body.ui-polished-creator input[type="search"],
body.ui-polished-creator input:not([type]),
body.ui-polished-creator textarea,
body.ui-polished-creator select {
    border-radius: 11px !important;
    border: 1px solid var(--mt-line-2) !important;
    background: #ffffff !important;
    color: var(--mt-ink) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset !important;
    font-family: inherit !important;
    transition: border-color .2s, background .2s, box-shadow .2s !important;
}
body.ui-polished-creator input:focus,
body.ui-polished-creator textarea:focus,
body.ui-polished-creator select:focus,
body.ui-polished-creator .t2i-textarea:focus,
body.ui-polished-creator .t2i-select:focus {
    border-color: var(--mt-accent) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(91,71,251,.10) !important;
    outline: none !important;
}
body.ui-polished-creator .t2i-textarea::placeholder,
body.ui-polished-creator textarea::placeholder,
body.ui-polished-creator input::placeholder {
    color: var(--mt-soft) !important;
}

/* 生成主按钮 —— 全宽、衬线大字 + 紫色渐变 + 软光晕 */
body.ui-polished-creator .generate-btn {
    position: relative;
    min-height: 56px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--mt-accent-2) 0%, var(--mt-accent) 60%, var(--mt-accent-3) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.20) inset,
        0 18px 32px -14px rgba(91,71,251,.55),
        0 6px 18px -8px rgba(63,46,224,.40) !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: .04em !important;
    transition: transform .2s, box-shadow .2s, filter .2s !important;
}
body.ui-polished-creator .generate-btn:hover {
    transform: translateY(-2px) !important;
    filter: saturate(1.05) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.24) inset,
        0 24px 40px -14px rgba(91,71,251,.65),
        0 8px 22px -8px rgba(63,46,224,.45) !important;
}

/* 右侧预览标题 —— 衬线 */
body.ui-polished-creator .t2i-preview-header {
    height: auto !important;
    padding: 0 0 14px !important;
    margin-bottom: 18px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--mt-ink) !important;
    border-bottom: 1px solid var(--mt-line) !important;
}
body.ui-polished-creator .t2i-preview-header > span {
    color: var(--mt-ink) !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
}

/* 图像舞台 —— 棋盘格底纹 + 紫色顶光 */
body.ui-polished-creator .t2i-image-container {
    flex: 1;
    min-height: 480px !important;
    border-radius: var(--mt-radius) !important;
    border: 1px solid var(--mt-line) !important;
    background:
        radial-gradient(700px 360px at 50% 0%, rgba(91,71,251,.08), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(240,240,246,.78) 100%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.95) inset,
        0 24px 60px -32px rgba(40,30,90,.22) !important;
}

/* 空状态 —— 编辑级文案排版 */
body.ui-polished-creator .ark-empty-stage {
    color: var(--mt-ink) !important;
}
body.ui-polished-creator .ark-empty-title {
    color: var(--mt-ink) !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -.015em !important;
    line-height: 1.25 !important;
}
body.ui-polished-creator .ark-empty-subtitle {
    color: var(--mt-muted) !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    max-width: 42ch;
    margin-inline: auto;
}
body.ui-polished-creator .ark-empty-tags span {
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid rgba(91,71,251,.22) !important;
    color: var(--mt-accent) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 10px -6px rgba(91,71,251,.20);
}

/* 二级面板 —— upload / picker / library */
body.ui-polished-creator .upload-area-multi,
body.ui-polished-creator .history-image-picker,
body.ui-polished-creator .img-library-panel {
    border-radius: var(--mt-radius) !important;
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    box-shadow: var(--mt-shadow-sm) !important;
}
body.ui-polished-creator .img-library-header,
body.ui-polished-creator .history-picker-header {
    color: var(--mt-ink) !important;
    background: linear-gradient(180deg, rgba(91,71,251,.06), rgba(91,71,251,.02)) !important;
    border-bottom: 1px solid var(--mt-line) !important;
    font-weight: 700 !important;
}

/* 卡片类容器 */
body.ui-polished-creator .result-section,
body.ui-polished-creator .modal-content,
body.ui-polished-creator .settings-panel,
body.ui-polished-creator .workflow-container,
body.ui-polished-creator .director-card {
    border-radius: var(--mt-radius-lg) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)) !important;
    border: 1px solid var(--mt-line) !important;
    box-shadow: var(--mt-shadow-md) !important;
    color: var(--mt-ink) !important;
}

body.ui-polished-creator .director-style-box,
body.ui-polished-creator .director-style-current,
body.ui-polished-creator .canvas-board-shell {
    border-radius: var(--mt-radius) !important;
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
}

/* 隐藏的公用 tabs（保留样式以防其它入口启用） */
body.ui-polished-creator .create-tabs {
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 14px !important;
}
body.ui-polished-creator .create-tab {
    color: var(--mt-muted) !important;
    border-radius: 10px !important;
}
body.ui-polished-creator .create-tab:hover {
    background: #fff !important;
    color: var(--mt-ink) !important;
}
body.ui-polished-creator .create-tab.active {
    background: linear-gradient(135deg, var(--mt-accent-2), var(--mt-accent)) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -10px rgba(91,71,251,.55) !important;
}

/* 历史/结果区标题 —— 衬线 */
body.ui-polished-creator .history-title,
body.ui-polished-creator h2,
body.ui-polished-creator h3 {
    font-family: 'Noto Serif SC', serif !important;
    letter-spacing: -.015em !important;
    color: var(--mt-ink) !important;
    font-weight: 700 !important;
}

body.ui-polished-creator .template-tag {
    border-radius: 999px !important;
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line-2) !important;
    color: var(--mt-muted) !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    box-shadow: var(--mt-shadow-sm) !important;
}
body.ui-polished-creator .template-tag:hover {
    background: #fff !important;
    color: var(--mt-accent) !important;
    border-color: var(--mt-accent) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   隐藏所有 emoji 装饰：侧栏导航 / 返回首页 🏠 / 顶栏 emoji
   ───────────────────────────────────────────────────────────────────── */
body.ui-polished-creator .nav-item .nav-icon { display: none !important; }
body.ui-polished-creator .nav-item { gap: 0 !important; }
body.ui-polished-creator .ark-home-btn span:first-child { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────
   顶栏：工具下拉菜单
   ───────────────────────────────────────────────────────────────────── */
body.ui-polished-creator .ark-tools-menu {
    position: relative;
    display: inline-flex;
}
body.ui-polished-creator .ark-tools-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 16px;
    border-radius: 11px;
    border: 1px solid var(--mt-line);
    background: var(--mt-paper);
    color: var(--mt-ink-2);
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: var(--mt-shadow-sm);
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s, color .2s;
}
body.ui-polished-creator .ark-tools-trigger:hover {
    background: #fff;
    border-color: var(--mt-accent);
    color: var(--mt-accent);
    transform: translateY(-1px);
}
body.ui-polished-creator .ark-tools-chev {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px,-2px);
    opacity: .7;
    transition: transform .25s;
}
body.ui-polished-creator .ark-tools-menu.open .ark-tools-chev {
    transform: rotate(-135deg) translate(-1px,-1px);
}
body.ui-polished-creator .ark-tools-menu.open .ark-tools-trigger {
    background: #fff;
    border-color: var(--mt-accent);
    color: var(--mt-accent);
}

body.ui-polished-creator .ark-tools-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 248px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255,255,255,.98);
    border: 1px solid var(--mt-line-2);
    box-shadow:
        0 1px 0 rgba(255,255,255,.95) inset,
        0 24px 60px -24px rgba(40,30,90,.30),
        0 8px 22px -10px rgba(40,30,90,.18);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s ease, transform .18s ease;
}
body.ui-polished-creator .ark-tools-menu.open .ark-tools-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

body.ui-polished-creator .ark-tools-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--mt-ink-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.005em;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}
body.ui-polished-creator .ark-tools-item:hover {
    background: var(--mt-accent-soft);
    color: var(--mt-accent-3);
}
body.ui-polished-creator .ark-tools-name {
    flex: 1;
    color: inherit;
}
body.ui-polished-creator .ark-tools-kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(12,12,18,.05);
    border: 1px solid var(--mt-line-2);
    font-family: 'Manrope', monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mt-muted);
    letter-spacing: .02em;
}
body.ui-polished-creator .ark-tools-item:hover .ark-tools-kbd {
    background: rgba(91,71,251,.08);
    border-color: rgba(91,71,251,.20);
    color: var(--mt-accent);
}
body.ui-polished-creator .ark-tools-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--mt-line);
}

.ark-logout-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ark-logout-confirm-overlay.show {
    display: flex;
}
.ark-logout-confirm-card {
    width: min(360px, calc(100vw - 40px));
    border-radius: 14px;
    background: #fff;
    color: #111827;
    border: 1px solid rgba(16, 19, 24, .08);
    box-shadow: 0 28px 80px rgba(16, 19, 24, .24);
    padding: 22px 22px 18px;
}
.ark-logout-confirm-text {
    margin: 0 0 22px;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}
.ark-logout-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.ark-logout-confirm-actions button {
    min-width: 72px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.ark-logout-confirm-cancel {
    background: #f3f4f6;
    color: #374151;
}
.ark-logout-confirm-ok {
    background: #5B47FB;
    color: #fff;
}

/* 余额 / 积分胶囊（已去 emoji） */
body.ui-polished-creator .ark-balance-widget,
body.ui-polished-creator .ark-points-widget {
    cursor: pointer;
}

/* 选择高亮、滚动条 */
body.ui-polished-creator ::selection {
    background: var(--mt-accent-tint);
    color: var(--mt-ink);
}
body.ui-polished-creator ::-webkit-scrollbar { width: 8px; height: 8px; }
body.ui-polished-creator ::-webkit-scrollbar-track { background: transparent; }
body.ui-polished-creator ::-webkit-scrollbar-thumb {
    background: rgba(12,12,18,.14);
    border-radius: 999px;
}
body.ui-polished-creator ::-webkit-scrollbar-thumb:hover {
    background: var(--mt-accent);
}

/* =====================================================================
   v3 修正块：覆盖所有"裸样式"组件 + 清理 emoji / FA 残留
   ===================================================================== */

/* ─── 全局清理：Font Awesome 残桩、剩余 emoji 装饰 ─── */
body.ui-polished-creator .t2i-label > i,
body.ui-polished-creator label > i,
body.ui-polished-creator .fas,
body.ui-polished-creator .fa { display: none !important; }

/* 生成按钮里的 🚀 */
body.ui-polished-creator .generate-btn > span:first-child { display: none !important; }

/* 上传/图库标题里的 emoji 文本（📁 📷 🎨 🖼️），用 :first-letter 抹掉太脆弱，改成统一 padding-left 0 即可 */
body.ui-polished-creator .upload-icon { display: none !important; }

/* ─── t2i-form-group / t2i-row / t2i-label ─── */
body.ui-polished-creator .t2i-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.ui-polished-creator .t2i-row {
    display: grid !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}
body.ui-polished-creator .t2i-row-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1280px) {
    body.ui-polished-creator .t2i-row-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
body.ui-polished-creator .t2i-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--mt-ink) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* ─── t2i-actions 工具行 + 生成按钮 ─── */
body.ui-polished-creator .t2i-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--mt-line) !important;
}
body.ui-polished-creator .t2i-tools {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px !important;
    border-radius: 11px !important;
    background: var(--mt-bg-2) !important;
    border: 1px solid var(--mt-line) !important;
}
body.ui-polished-creator .t2i-tools .tool-btn {
    width: auto !important;
    height: 30px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--mt-muted) !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
    box-shadow: none !important;
    transition: background .15s, color .15s !important;
}
body.ui-polished-creator .t2i-tools .tool-btn:hover {
    background: #fff !important;
    color: var(--mt-accent) !important;
    transform: none !important;
}
body.ui-polished-creator .generate-btn {
    flex: 1 !important;
    margin-left: auto !important;
}

/* ─── 进度条 ─── */
body.ui-polished-creator .progress-container {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    box-shadow: var(--mt-shadow-sm) !important;
}
body.ui-polished-creator .progress-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}
body.ui-polished-creator .progress-text {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--mt-ink) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
body.ui-polished-creator .progress-elapsed {
    color: var(--mt-muted) !important;
    font-family: 'Manrope', monospace !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
}
body.ui-polished-creator .progress-percent {
    color: var(--mt-accent) !important;
    font-family: 'Manrope', monospace !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
}
body.ui-polished-creator .progress-bar-wrapper {
    height: 6px !important;
    border-radius: 999px !important;
    background: var(--mt-bg-2) !important;
    overflow: hidden !important;
    position: relative !important;
}
body.ui-polished-creator .progress-fill {
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--mt-accent-2), var(--mt-accent)) !important;
    box-shadow: 0 0 12px rgba(91,71,251,.45) !important;
    transition: width .3s ease !important;
}

/* ─── 图库面板（详细） ─── */
body.ui-polished-creator .img-library-panel {
    margin-top: 14px !important;
    overflow: hidden !important;
}
body.ui-polished-creator .img-library-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    transition: background .15s !important;
}
body.ui-polished-creator .img-library-header:hover {
    background: rgba(91,71,251,.05) !important;
}
body.ui-polished-creator .img-library-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--mt-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
body.ui-polished-creator .img-library-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 18px !important;
    padding: 0 6px !important;
    border-radius: 4px !important;
    background: var(--mt-accent-soft) !important;
    color: var(--mt-accent) !important;
    border: 0 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}
body.ui-polished-creator .img-library-toggle {
    color: var(--mt-soft) !important;
    font-size: 11px !important;
    transition: transform .25s !important;
}
body.ui-polished-creator .img-library-toggle.open {
    transform: rotate(180deg) !important;
}
body.ui-polished-creator .img-library-body {
    padding: 12px 14px 14px !important;
    border-top: 1px solid var(--mt-line) !important;
}
body.ui-polished-creator .img-library-empty {
    padding: 22px 14px !important;
    text-align: center !important;
    border-radius: 10px !important;
    background: rgba(91,71,251,.03) !important;
    border: 1px dashed rgba(91,71,251,.20) !important;
    color: var(--mt-muted) !important;
    font-size: 12.5px !important;
    line-height: 1.7 !important;
}
body.ui-polished-creator .img-library-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
    gap: 6px !important;
}
body.ui-polished-creator .img-library-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--mt-line) !important;
    gap: 10px !important;
}
body.ui-polished-creator .img-library-hint {
    color: var(--mt-muted) !important;
    font-size: 11.5px !important;
}
body.ui-polished-creator .img-lib-clear-btn {
    padding: 5px 11px !important;
    border-radius: 7px !important;
    background: transparent !important;
    border: 1px solid var(--mt-line-2) !important;
    color: var(--mt-muted) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s, color .15s, border-color .15s !important;
}
body.ui-polished-creator .img-lib-clear-btn:hover {
    background: rgba(244,63,94,.08) !important;
    color: #dc2626 !important;
    border-color: rgba(244,63,94,.24) !important;
}

/* ─── 上传区域（图生图） ─── */
body.ui-polished-creator .upload-area-multi {
    min-height: 140px !important;
    padding: 22px 16px !important;
    border-radius: 12px !important;
    background: rgba(91,71,251,.03) !important;
    border: 1.5px dashed rgba(91,71,251,.28) !important;
    box-shadow: none !important;
    color: var(--mt-ink) !important;
    transition: background .2s, border-color .2s !important;
    margin-bottom: 14px !important;
}
body.ui-polished-creator .upload-area-multi:hover {
    background: rgba(91,71,251,.06) !important;
    border-color: var(--mt-accent) !important;
}
body.ui-polished-creator .upload-area-multi.drag-over {
    background: rgba(91,71,251,.10) !important;
    border-color: var(--mt-accent) !important;
}
body.ui-polished-creator .upload-multi-content {
    text-align: center !important;
}
body.ui-polished-creator .upload-text {
    color: var(--mt-muted) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}
body.ui-polished-creator .upload-text small {
    color: var(--mt-soft) !important;
}
body.ui-polished-creator .upload-multi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 8px !important;
}

/* ─── 历史图片选择器 ─── */
body.ui-polished-creator .history-image-picker {
    overflow: hidden !important;
    margin-bottom: 14px !important;
}
body.ui-polished-creator .history-picker-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 14px !important;
    cursor: pointer !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    transition: background .15s !important;
}
body.ui-polished-creator .history-picker-header:hover {
    background: rgba(91,71,251,.05) !important;
}
body.ui-polished-creator .history-picker-toggle {
    color: var(--mt-soft) !important;
    font-size: 11px !important;
    transition: transform .25s !important;
}
body.ui-polished-creator .history-picker-toggle.open {
    transform: rotate(180deg) !important;
}
body.ui-polished-creator .history-picker-body {
    padding: 12px 14px 14px !important;
    border-top: 1px solid var(--mt-line) !important;
}
body.ui-polished-creator .history-picker-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
    gap: 6px !important;
}
body.ui-polished-creator .history-picker-empty {
    padding: 18px 14px !important;
    text-align: center !important;
    color: var(--mt-muted) !important;
    font-size: 12.5px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   独立剧本分析 .director-* —— 覆盖原本的蓝紫 (#667eea / #2a2a3e) → 紫色
   ───────────────────────────────────────────────────────────────────── */
body.ui-polished-creator .director-section {
    margin-bottom: 16px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    box-shadow: var(--mt-shadow-sm) !important;
}
body.ui-polished-creator .director-section h4 {
    color: var(--mt-accent) !important;
    border-bottom: 1px solid var(--mt-line) !important;
    font-family: 'Noto Serif SC', serif !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
}
body.ui-polished-creator .director-rating-item,
body.ui-polished-creator .director-scene-card {
    background: var(--mt-bg-2) !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 8px !important;
}
body.ui-polished-creator .director-scene-card {
    border-left: 3px solid var(--mt-accent) !important;
}
body.ui-polished-creator .director-rating-item .label {
    color: var(--mt-muted) !important;
}
body.ui-polished-creator .director-scene-id {
    color: var(--mt-accent) !important;
    font-weight: 800 !important;
}
body.ui-polished-creator .director-scene-meta {
    color: var(--mt-soft) !important;
}
body.ui-polished-creator .director-camera,
body.ui-polished-creator .director-char-tag,
body.ui-polished-creator .director-tag {
    background: var(--mt-accent-soft) !important;
    color: var(--mt-accent-3) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
body.ui-polished-creator .director-timeline-item {
    border-left: 2px solid var(--mt-accent) !important;
}
body.ui-polished-creator .director-timeline-item::before {
    background: var(--mt-accent) !important;
}
body.ui-polished-creator .director-timeline-time {
    color: var(--mt-accent) !important;
}
body.ui-polished-creator .director-timeline-content {
    background: var(--mt-bg-2) !important;
    border-radius: 8px !important;
}
body.ui-polished-creator .director-timeline-shot-num {
    background: var(--mt-accent) !important;
    color: #fff !important;
}
body.ui-polished-creator .director-timeline-dialogue {
    background: rgba(91,71,251,.05) !important;
    border-left: 3px solid var(--mt-accent) !important;
}
body.ui-polished-creator .btn-primary {
    background: linear-gradient(135deg, var(--mt-accent-2), var(--mt-accent)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -8px rgba(91,71,251,.55) !important;
}
body.ui-polished-creator .btn-secondary {
    background: var(--mt-paper) !important;
    color: var(--mt-ink-2) !important;
    border: 1px solid var(--mt-line-2) !important;
}

.ark-theme-toggle {
    font-size: 16px !important;
    font-family: inherit !important;
    line-height: 1 !important;
}

body.creator-gate-pending .bg-dynamic,
body.creator-gate-pending .grid-bg,
body.creator-gate-pending .sidebar-hover-zone,
body.creator-gate-pending .sidebar,
body.creator-gate-pending .main-content,
body.creator-gate-pending .ark-modal-overlay {
    opacity: 0;
    pointer-events: none;
}

body.creator-gate-pending::after {
    content: "正在检查账号与实名认证...";
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #05060a;
    color: #f7f8ff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

/* =====================================================================
   v4 · 编辑级重构（B 方向）
   ─────────────────────────────────────────────────────────────────────
   核心动作：
   1. 主内容区约束最大宽度 1320px 居中，制造杂志阅读感的留白
   2. 顶栏标题随当前 tab 变化对应的副标语（用 body[data-active-tab] 读取）
   3. t2i-layout 重新分配比例：左控制区 380px 固定 + 右预览区 flex
   4. 底部"最近作品"横向滚动轨道（编辑级）
   5. 卡片之间留白拉开，呼吸感强
   ===================================================================== */

/* 主内容区：占满侧栏右侧的全部宽度，避免"卡片漂浮在白板上"的 SaaS 病 */
body.ui-polished-creator .main-content {
    max-width: none !important;
    margin-left: 268px !important;
    margin-right: 0 !important;
    padding: 32px clamp(40px, 4vw, 72px) 96px !important;
}
body.ui-polished-creator.sidebar-auto-hide .main-content {
    margin-left: 0 !important;
    padding-left: clamp(56px, 5vw, 96px) !important;
    padding-right: clamp(40px, 4vw, 72px) !important;
}
body.ui-polished-creator.sidebar-auto-hide.sidebar-revealed .main-content {
    margin-left: 268px !important;
    padding-left: clamp(40px, 4vw, 72px) !important;
}

/* 顶栏：跟主页 hero-eyebrow 一致，但属于主内容上方 */
body.ui-polished-creator .top-bar {
    min-height: 96px;
    margin-bottom: 36px !important;
    padding: 4px 4px 28px !important;
}

/* 编辑级副标语 —— 每个 tab 不同文案，靠 body[data-active-tab] 切换 */
body.ui-polished-creator[data-active-tab="text2img"] .page-title::after {
    content: "用一段提示词，让模型把场景画出来。支持豆包 / 香蕉 / GPT Image 2 / Midjourney 同台对照";
}
body.ui-polished-creator[data-active-tab="project-home"] .page-title::after {
    content: "用一段提示词，让模型把场景画出来。支持豆包 / 香蕉 / GPT Image 2 / Midjourney 同台对照";
}
body.ui-polished-creator[data-active-tab="img2img"] .page-title::after {
    content: "用一张参考图为锚，让 AI 沿着你的视觉风格继续创作，最多支持 9 张参考图";
}
body.ui-polished-creator[data-active-tab="text2video"] .page-title::after {
    content: "把脚本变成可拍的镜头视频，支持主流视频模型同台调度";
}
body.ui-polished-creator[data-active-tab="img2video"] .page-title::after {
    content: "拿一张图当起始帧，让 AI 帮你把这一帧延展成一段镜头";
}
body.ui-polished-creator[data-active-tab="canvas"] .page-title::after {
    content: "在自由画布上拼接素材、调度镜头、组装出整段作品的视觉雏形";
}
body.ui-polished-creator[data-active-tab="director"] .page-title::after {
    content: "把剧本喂给 AI 导演，自动拆出分镜、运镜节奏、音乐与音效";
}
body.ui-polished-creator[data-active-tab="workflow"] .page-title::after {
    content: "批量调度多种创作模式，让一份脚本走完从图到视频的全流程";
}

/* 创作面板：内部留白 + 阶段感分割 */
body.ui-polished-creator .create-section {
    margin-bottom: 36px !important;
}

/* t2i-layout（4 个文/图 → 图/视频 tab 共用）—— 左控制区更宽，确保下拉框/按钮不被切 */
body.ui-polished-creator .t2i-layout {
    display: grid !important;
    grid-template-columns: minmax(460px, 520px) minmax(0, 1fr) !important;
    gap: 28px !important;
    padding: 28px !important;
    align-items: start !important;
}
@media (max-width: 1200px) {
    body.ui-polished-creator .t2i-layout {
        grid-template-columns: 1fr !important;
    }
}

/* 下拉框 4 列 → 2x2 网格（4 列在 460px 容器里必然被切） */
body.ui-polished-creator .t2i-row-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* 操作行：竖排 —— 生成按钮独占一行 + 工具行另一行 */
body.ui-polished-creator .t2i-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--mt-line) !important;
}
body.ui-polished-creator .generate-btn {
    flex: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    order: 1 !important;
}
body.ui-polished-creator .t2i-tools {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    order: 2 !important;
}
body.ui-polished-creator .t2i-tools .tool-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* 左控制区：上下贴齐 */
body.ui-polished-creator .t2i-left {
    padding: 24px !important;
    align-self: stretch;
}
/* 隐藏之前我加的"创作流程"提示条 —— 重新设计后用顶栏副标语替代 */
body.ui-polished-creator .t2i-left::after {
    display: none !important;
}

/* 右预览区：留更高的预览面板，sticky 让滚动时一直可见（编辑级流式阅读时仍可看到预览） */
body.ui-polished-creator .t2i-right {
    padding: 28px !important;
    position: sticky;
    top: 24px;
    min-height: calc(100vh - 240px) !important;
}

/* 预览图区：更高、更"舞台感" */
body.ui-polished-creator .t2i-image-container {
    min-height: 540px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   底部「最近作品」横向编辑级轨道（重整 #historySection）
   ───────────────────────────────────────────────────────────────────── */
body.ui-polished-creator .history-section {
    margin-top: 48px !important;
    padding-top: 32px !important;
    border-top: 1px solid var(--mt-line);
    background: transparent !important;
}
body.ui-polished-creator .history-header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    padding: 0 4px 16px !important;
    border: 0 !important;
    background: transparent !important;
}
body.ui-polished-creator .history-title {
    font-family: 'Noto Serif SC', serif !important;
    font-size: clamp(18px, 1.4vw, 22px) !important;
    font-weight: 700 !important;
    letter-spacing: -.015em !important;
    color: var(--mt-ink) !important;
    margin: 0 !important;
    position: relative;
    padding-left: 18px !important;
}
/* 标题前小 mono 编号（增加编辑级阅读感） */
body.ui-polished-creator .history-title::before {
    content: "02";
    position: absolute;
    left: -22px;
    top: 4px;
    font-family: 'Manrope', monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--mt-soft);
}
body.ui-polished-creator[data-active-tab="text2img"] .history-title::before { content: "01"; }
body.ui-polished-creator[data-active-tab="img2img"] .history-title::before { content: "02"; }
body.ui-polished-creator[data-active-tab="text2video"] .history-title::before { content: "03"; }
body.ui-polished-creator[data-active-tab="img2video"] .history-title::before { content: "04"; }
body.ui-polished-creator .favorites-content .history-title {
    padding-left: 34px !important;
}
body.ui-polished-creator .favorites-content .history-title::before {
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    color: var(--ark-muted) !important;
}
body.ui-polished-creator .favorites-content .ark-shortcut-title {
    padding-left: 0 !important;
}
body.ui-polished-creator .favorites-content .ark-shortcut-title::before {
    content: none !important;
    display: none !important;
}

/* 横向滚动 grid */
body.ui-polished-creator .history-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(220px, 240px) !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    padding: 4px 4px 24px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
}
body.ui-polished-creator .history-grid > * {
    scroll-snap-align: start !important;
    border-radius: 12px !important;
    border: 1px solid var(--mt-line) !important;
    background: var(--mt-paper) !important;
    box-shadow: var(--mt-shadow-sm) !important;
    overflow: hidden !important;
    transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
body.ui-polished-creator .history-grid > *:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(91,71,251,.32) !important;
    box-shadow: var(--mt-shadow-md) !important;
}

/* 「查看全部」编辑级链接按钮 */
body.ui-polished-creator .history-section .template-tag {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    color: var(--mt-accent) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    letter-spacing: -.005em !important;
}
body.ui-polished-creator .history-section .template-tag:hover {
    color: var(--mt-accent-3) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* "生成结果" #resultSection 同样改成卡片化网格 */
body.ui-polished-creator .result-section {
    margin-bottom: 36px !important;
    padding: 24px !important;
}
body.ui-polished-creator .result-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 14px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   段落分隔：在 t2i-layout 和历史轨道之间加 mono section label
   ───────────────────────────────────────────────────────────────────── */
body.ui-polished-creator .history-section::before {
    content: "·  ·  ·   RECENT  WORKS";
    display: block;
    margin-bottom: 12px;
    padding: 0 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .26em;
    color: var(--mt-soft);
    text-transform: uppercase;
}

/* =====================================================================
   v5 · 视觉密度提升 + 治 SaaS 感（针对图生视频示例做的整体重设计，
        所有 .t2i-* 类目共享 → 4 个创作 tab 同步生效）
   ===================================================================== */

/* ───── 顶栏：去掉 "- AI 创作中心" 这种 SaaS 拼接尾巴 ───── */
body.ui-polished-creator .page-title { font-size: 0 !important; line-height: 1 !important; }
body.ui-polished-creator .page-title > #pageTitleText,
body.ui-polished-creator .page-title > span:first-child {
    font-size: clamp(28px, 2.6vw, 36px) !important;
    color: var(--mt-ink) !important;
    -webkit-text-fill-color: var(--mt-ink) !important;
    background: none !important;
    font-weight: 700 !important;
    font-family: 'Noto Serif SC', serif !important;
    letter-spacing: -.025em !important;
    line-height: 1.1 !important;
    display: inline-block !important;
}

/* ───── 上传区：翻倍高度 + 编辑级 CTA ───── */
body.ui-polished-creator .upload-area-multi {
    min-height: 200px !important;
    padding: 32px 22px !important;
    border-radius: 14px !important;
    background:
        radial-gradient(500px 200px at 50% 0%, rgba(91,71,251,.08), transparent 70%),
        repeating-linear-gradient(45deg, rgba(91,71,251,.025) 0 10px, transparent 10px 22px),
        rgba(255,255,255,.5) !important;
    border: 1.5px dashed rgba(91,71,251,.32) !important;
}
body.ui-polished-creator .upload-area-multi:hover {
    background:
        radial-gradient(500px 200px at 50% 0%, rgba(91,71,251,.14), transparent 70%),
        repeating-linear-gradient(45deg, rgba(91,71,251,.04) 0 10px, transparent 10px 22px),
        rgba(255,255,255,.7) !important;
    border-color: var(--mt-accent) !important;
}
/* 大字 CTA：把第一行字号拉到 16px 加粗，副行 11.5px */
body.ui-polished-creator .upload-multi-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
}
body.ui-polished-creator .upload-text {
    font-family: 'Noto Serif SC', serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--mt-ink) !important;
    line-height: 1.4 !important;
    letter-spacing: -.01em !important;
}
body.ui-polished-creator .upload-text small {
    display: block !important;
    margin-top: 6px !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--mt-muted) !important;
    opacity: 1 !important;
    letter-spacing: 0 !important;
}
/* 上传区上方加一个 mono section 编号 + 标题 */
body.ui-polished-creator .upload-area-multi {
    position: relative;
}
body.ui-polished-creator .upload-area-multi::before {
    content: "01  ·  起 始 帧";
    position: absolute;
    top: -22px;
    left: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .26em;
    color: var(--mt-soft);
    text-transform: uppercase;
}

/* ───── 历史图片选择器：作为上传区延伸，不再像独立卡 ───── */
body.ui-polished-creator .history-image-picker {
    margin-top: 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.ui-polished-creator .history-picker-header {
    padding: 8px 12px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 10px !important;
    background: var(--mt-paper) !important;
}
body.ui-polished-creator .history-picker-header:hover {
    background: rgba(91,71,251,.06) !important;
    border-color: rgba(91,71,251,.22) !important;
}
body.ui-polished-creator .history-picker-body {
    padding: 12px !important;
    margin-top: 8px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 10px !important;
    background: var(--mt-paper) !important;
}

/* ───── 描述框：更高、有编号、紫色聚焦光环 ───── */
body.ui-polished-creator .t2i-form-group:has(> .t2i-textarea) {
    position: relative;
    margin-top: 32px !important;
}
body.ui-polished-creator .t2i-form-group:has(> .t2i-textarea)::before {
    content: "02  ·  动 态 描 述";
    position: absolute;
    top: -22px;
    left: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .26em;
    color: var(--mt-soft);
    text-transform: uppercase;
}
body.ui-polished-creator .t2i-form-group:has(> .t2i-textarea) > .t2i-label {
    display: none !important;
}
body.ui-polished-creator .t2i-textarea {
    min-height: 130px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

/* ───── 参数行：变成 segmented pill 风格（更窄高度、更精致） ───── */
body.ui-polished-creator .t2i-row:not(#i2vAudioRow) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 32px !important;
    position: relative;
}
body.ui-polished-creator .t2i-row:not(#i2vAudioRow)::before {
    content: "03  ·  参 数";
    position: absolute;
    top: -22px;
    left: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .26em;
    color: var(--mt-soft);
    text-transform: uppercase;
}
body.ui-polished-creator .t2i-row:not(#i2vAudioRow) > .t2i-form-group {
    flex: 1 1 120px !important;
    min-width: 0 !important;
    position: relative !important;
}
body.ui-polished-creator .t2i-row:not(#i2vAudioRow) > .t2i-form-group > .t2i-label {
    font-size: 9.5px !important;
    color: var(--mt-soft) !important;
    margin-bottom: 4px !important;
    letter-spacing: .14em !important;
}
body.ui-polished-creator .t2i-row:not(#i2vAudioRow) > .t2i-form-group > select.t2i-select,
body.ui-polished-creator .t2i-row:not(#i2vAudioRow) > .t2i-form-group > .t2i-select {
    height: 40px !important;
    padding: 0 32px 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--mt-line-2) !important;
    background: #fff !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--mt-muted) 50%),
                      linear-gradient(135deg, var(--mt-muted) 50%, transparent 50%) !important;
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color: var(--mt-ink) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
}

/* ───── 音频卡：完全推翻它的内联紫绿混搭 ───── */
body.ui-polished-creator #i2vAudioRow {
    margin-top: 16px !important;
}
body.ui-polished-creator #i2vAudioRow > .t2i-form-group {
    flex: none !important;
    width: 100% !important;
}
body.ui-polished-creator #i2vAudioRow .t2i-label {
    display: none !important;
}
body.ui-polished-creator #i2vAudioRow > .t2i-form-group > div[style*="background:rgba(168,85,247"] {
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
}
body.ui-polished-creator #i2vAudioRow label {
    color: var(--mt-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
body.ui-polished-creator #i2vAudioRow label b {
    color: var(--mt-accent) !important;
    font-weight: 800 !important;
}
body.ui-polished-creator #i2vAudioRow input[type="checkbox"] {
    accent-color: var(--mt-accent) !important;
}
body.ui-polished-creator #i2vAudioRow > .t2i-form-group > div[style*="font-size:11px"] {
    color: var(--mt-muted) !important;
    font-size: 11.5px !important;
    line-height: 1.6 !important;
}

/* ───── 生成按钮：64px 大型 CTA + 费用提示 ───── */
body.ui-polished-creator .generate-btn {
    min-height: 64px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    margin-top: 32px !important;
}
body.ui-polished-creator .t2i-actions {
    position: relative !important;
}
body.ui-polished-creator .t2i-actions::before {
    content: "04  ·  生 成";
    position: absolute;
    top: -22px;
    left: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .26em;
    color: var(--mt-soft);
    text-transform: uppercase;
}
body.ui-polished-creator .t2i-actions {
    margin-top: 36px !important;
    border-top: 0 !important;
    padding-top: 0 !important;
}

/* ───── 预览区：黑色电影画框（核心治丑！） ───── */
body.ui-polished-creator .t2i-right {
    padding: 0 !important;
    background: #0c0c12 !important;
    border: 1px solid #1a1a22 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    color: #fff !important;
    position: sticky;
    top: 24px;
    min-height: calc(100vh - 240px) !important;
}
body.ui-polished-creator .t2i-preview-header {
    padding: 18px 22px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    color: #fff !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
body.ui-polished-creator .t2i-preview-header > span {
    color: #fff !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .26em !important;
    text-transform: uppercase !important;
}
body.ui-polished-creator[data-active-tab="img2video"] .t2i-preview-header > span,
body.ui-polished-creator[data-active-tab="text2video"] .t2i-preview-header > span { font-size: 0 !important; }
body.ui-polished-creator[data-active-tab="img2video"] .t2i-preview-header > span::after,
body.ui-polished-creator[data-active-tab="text2video"] .t2i-preview-header > span::after {
    content: "·  ·  ·   VIDEO  PREVIEW";
    font-size: 10.5px !important;
}
body.ui-polished-creator[data-active-tab="text2img"] .t2i-preview-header > span,
body.ui-polished-creator[data-active-tab="img2img"] .t2i-preview-header > span { font-size: 0 !important; }
body.ui-polished-creator[data-active-tab="text2img"] .t2i-preview-header > span::after,
body.ui-polished-creator[data-active-tab="img2img"] .t2i-preview-header > span::after {
    content: "·  ·  ·   IMAGE  PREVIEW";
    font-size: 10.5px !important;
}

/* 预览图框：黑底 + 胶片纹理 + 紫色细描边 */
body.ui-polished-creator .t2i-image-container {
    flex: 1 !important;
    min-height: 580px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(800px 400px at 50% -10%, rgba(91,71,251,.12), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
        #0c0c12 !important;
    box-shadow: inset 0 0 60px rgba(0,0,0,.4) !important;
    color: #fff !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* 左右两边的电影院齿孔 */
body.ui-polished-creator .t2i-image-container::before,
body.ui-polished-creator .t2i-image-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    background-image: radial-gradient(circle, rgba(255,255,255,.08) 0 3px, transparent 4px);
    background-size: 18px 22px;
    background-repeat: repeat-y;
    background-position: center;
    pointer-events: none;
}
body.ui-polished-creator .t2i-image-container::before { left: 0; }
body.ui-polished-creator .t2i-image-container::after { right: 0; }

/* 空状态：编辑级文案 + 大衬线 + 紫色光晕 */
body.ui-polished-creator .ark-empty-stage {
    text-align: center !important;
    color: #fff !important;
    padding: 40px !important;
    z-index: 1 !important;
}
body.ui-polished-creator .ark-empty-cinema {
    margin-bottom: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
}
body.ui-polished-creator .ark-empty-screen {
    position: relative !important;
    width: 220px !important;
    height: 124px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(135deg, rgba(91,71,251,.16), rgba(91,71,251,.06)),
        #0a0a10 !important;
    box-shadow: 0 0 60px rgba(91,71,251,.20) !important;
    overflow: hidden !important;
}
body.ui-polished-creator .ark-empty-scan {
    position: absolute !important;
    inset: 0 !important;
    background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,.04) 2px 3px) !important;
}
body.ui-polished-creator .ark-empty-play {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,.32) !important;
    font-size: 32px !important;
}
body.ui-polished-creator .ark-empty-timeline {
    display: flex !important;
    gap: 4px !important;
}
body.ui-polished-creator .ark-empty-timeline > span {
    width: 28px !important;
    height: 6px !important;
    border-radius: 2px !important;
    background: rgba(255,255,255,.16) !important;
}
body.ui-polished-creator .ark-empty-timeline > span:first-child {
    background: var(--mt-accent) !important;
    box-shadow: 0 0 12px var(--mt-accent) !important;
}
body.ui-polished-creator .ark-empty-title {
    color: #fff !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 8px !important;
}
body.ui-polished-creator .ark-empty-subtitle {
    color: rgba(255,255,255,.55) !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    max-width: 38ch !important;
    margin: 0 auto 18px !important;
}
body.ui-polished-creator .ark-empty-tags {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
body.ui-polished-creator .ark-empty-tags span {
    border-radius: 999px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 11px !important;
    box-shadow: none !important;
}

/* 预览区内的工具按钮（下载/清除）需要白色版本以适配深色背景 */
body.ui-polished-creator .t2i-right .t2i-action-btn {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff !important;
    box-shadow: none !important;
}
body.ui-polished-creator .t2i-right .t2i-action-btn:hover {
    background: rgba(91,71,251,.20) !important;
    border-color: var(--mt-accent) !important;
    color: #fff !important;
}

/* ───── 整个左控制区：去掉外层卡片背景，让内部组件直接呼吸 ───── */
body.ui-polished-creator .t2i-left {
    padding: 28px 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.ui-polished-creator .t2i-layout {
    padding: 8px clamp(8px, 1vw, 16px) 24px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* 同样的"减少卡片套卡片"原则推到所有 4 个 tab —— 与图生视频统一 */
body.ui-polished-creator.day #text2img-panel,
body.ui-polished-creator.day #img2img-panel,
body.ui-polished-creator.day #text2video-panel,
body.ui-polished-creator.day #img2video-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
body.ui-polished-creator.day #text2img-panel .t2i-layout,
body.ui-polished-creator.day #img2img-panel .t2i-layout,
body.ui-polished-creator.day #text2video-panel .t2i-layout {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 8px clamp(8px, 1vw, 16px) 20px !important;
    gap: 28px !important;
}

/* =====================================================================
   v6 · 用 panel-ID 作用域强力覆盖旧 #xxx-panel ID 规则
   旧版 5387-5475 + 38139-38212 把 .t2i-right / .t2i-image-container 设
   成浅色，ID 选择器永远赢 class。本块用 .day + panel-ID 提升优先级
   把"黑色电影预览"硬覆盖到 4 个创作 tab。
   ===================================================================== */
body.ui-polished-creator.day #text2img-panel .t2i-right,
body.ui-polished-creator.day #img2img-panel .t2i-right,
body.ui-polished-creator.day #text2video-panel .t2i-right,
body.ui-polished-creator.day #img2video-panel .t2i-right {
    padding: 0 !important;
    background: #0c0c12 !important;
    border: 1px solid #1a1a22 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    color: #fff !important;
    position: sticky !important;
    top: 24px !important;
    min-height: 600px !important;
    height: auto !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 24px 60px -24px rgba(12,12,18,.45) !important;
}

body.ui-polished-creator.day #text2img-panel .t2i-preview-header,
body.ui-polished-creator.day #img2img-panel .t2i-preview-header,
body.ui-polished-creator.day #text2video-panel .t2i-preview-header,
body.ui-polished-creator.day #img2video-panel .t2i-preview-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    padding: 18px 22px !important;
    margin: 0 !important;
    z-index: auto !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
body.ui-polished-creator.day #text2img-panel .t2i-preview-header > span,
body.ui-polished-creator.day #img2img-panel .t2i-preview-header > span,
body.ui-polished-creator.day #text2video-panel .t2i-preview-header > span,
body.ui-polished-creator.day #img2video-panel .t2i-preview-header > span {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .26em !important;
    text-transform: uppercase !important;
}

body.ui-polished-creator.day #text2img-panel .t2i-image-container,
body.ui-polished-creator.day #img2img-panel .t2i-image-container,
body.ui-polished-creator.day #text2video-panel .t2i-image-container,
body.ui-polished-creator.day #img2video-panel .t2i-image-container {
    flex: 1 !important;
    min-height: 540px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(800px 380px at 50% -10%, rgba(91,71,251,.18), transparent 62%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
        #0a0a10 !important;
    background-size: auto !important;
    box-shadow: inset 0 0 80px rgba(0,0,0,.5) !important;
    color: #fff !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 隐藏旧版的"卡通插画"占位（堆叠相框 / 立体相片 / 魔法线 / 对比卡） */
body.ui-polished-creator.day .ark-empty-frame-stack,
body.ui-polished-creator.day .ark-empty-compare-stack,
body.ui-polished-creator.day .ark-empty-photo,
body.ui-polished-creator.day .ark-empty-photo-a,
body.ui-polished-creator.day .ark-empty-photo-b,
body.ui-polished-creator.day .ark-empty-photo-c,
body.ui-polished-creator.day .ark-empty-magic-line,
body.ui-polished-creator.day .ark-empty-compare-card {
    display: none !important;
}

body.ui-polished-creator.day #text2img-panel .ark-empty-stage,
body.ui-polished-creator.day #img2img-panel .ark-empty-stage,
body.ui-polished-creator.day #text2video-panel .ark-empty-stage,
body.ui-polished-creator.day #img2video-panel .ark-empty-stage,
body.ui-polished-creator.day #img2video-panel .ark-empty-stage-image-video {
    width: auto !important;
    max-width: 460px !important;
    padding: 40px 20px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
}

body.ui-polished-creator.day #text2img-panel .ark-empty-cinema,
body.ui-polished-creator.day #img2img-panel .ark-empty-cinema,
body.ui-polished-creator.day #text2video-panel .ark-empty-cinema,
body.ui-polished-creator.day #img2video-panel .ark-empty-cinema,
body.ui-polished-creator.day #img2video-panel .ark-empty-cinema.from-image {
    width: 240px !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: 0 0 50px rgba(91,71,251,.30), 0 0 0 1px rgba(255,255,255,.04) !important;
    overflow: hidden !important;
}

body.ui-polished-creator.day #text2img-panel .ark-empty-screen,
body.ui-polished-creator.day #img2img-panel .ark-empty-screen,
body.ui-polished-creator.day #text2video-panel .ark-empty-screen,
body.ui-polished-creator.day #img2video-panel .ark-empty-screen {
    width: 100% !important;
    height: 130px !important;
    position: relative !important;
    border-radius: 0 !important;
    background:
        linear-gradient(135deg, rgba(91,71,251,.35), rgba(91,71,251,.08) 65%, #0a0a10) !important;
    background-size: auto !important;
    overflow: hidden !important;
}
body.ui-polished-creator.day #text2img-panel .ark-empty-screen::before,
body.ui-polished-creator.day #text2img-panel .ark-empty-screen::after,
body.ui-polished-creator.day #img2img-panel .ark-empty-screen::before,
body.ui-polished-creator.day #img2img-panel .ark-empty-screen::after,
body.ui-polished-creator.day #text2video-panel .ark-empty-screen::before,
body.ui-polished-creator.day #text2video-panel .ark-empty-screen::after,
body.ui-polished-creator.day #img2video-panel .ark-empty-screen::before,
body.ui-polished-creator.day #img2video-panel .ark-empty-screen::after {
    display: none !important;
}
body.ui-polished-creator.day #text2img-panel .ark-empty-scan,
body.ui-polished-creator.day #img2img-panel .ark-empty-scan,
body.ui-polished-creator.day #text2video-panel .ark-empty-scan,
body.ui-polished-creator.day #img2video-panel .ark-empty-scan {
    background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,.06) 2px 3px) !important;
    opacity: 1 !important;
}
body.ui-polished-creator.day #text2img-panel .ark-empty-play,
body.ui-polished-creator.day #img2img-panel .ark-empty-play,
body.ui-polished-creator.day #text2video-panel .ark-empty-play,
body.ui-polished-creator.day #img2video-panel .ark-empty-play {
    background: transparent !important;
    color: rgba(255,255,255,.42) !important;
    box-shadow: none !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 26px !important;
    border-radius: 0 !important;
}
body.ui-polished-creator.day #text2img-panel .ark-empty-timeline,
body.ui-polished-creator.day #img2img-panel .ark-empty-timeline,
body.ui-polished-creator.day #text2video-panel .ark-empty-timeline,
body.ui-polished-creator.day #img2video-panel .ark-empty-timeline {
    display: flex !important;
    gap: 4px !important;
    margin-top: 0 !important;
    padding: 10px 12px !important;
    background: #0a0a10 !important;
    grid-template-columns: none !important;
}
body.ui-polished-creator.day #text2img-panel .ark-empty-timeline > span,
body.ui-polished-creator.day #img2img-panel .ark-empty-timeline > span,
body.ui-polished-creator.day #text2video-panel .ark-empty-timeline > span,
body.ui-polished-creator.day #img2video-panel .ark-empty-timeline > span {
    flex: 1 !important;
    height: 5px !important;
    border-radius: 2px !important;
    background: rgba(255,255,255,.12) !important;
}
body.ui-polished-creator.day #text2img-panel .ark-empty-timeline > span:first-child,
body.ui-polished-creator.day #img2img-panel .ark-empty-timeline > span:first-child,
body.ui-polished-creator.day #text2video-panel .ark-empty-timeline > span:first-child,
body.ui-polished-creator.day #img2video-panel .ark-empty-timeline > span:first-child {
    background: var(--mt-accent) !important;
    box-shadow: 0 0 10px var(--mt-accent) !important;
}

body.ui-polished-creator.day #text2img-panel .ark-empty-title,
body.ui-polished-creator.day #img2img-panel .ark-empty-title,
body.ui-polished-creator.day #text2video-panel .ark-empty-title,
body.ui-polished-creator.day #img2video-panel .ark-empty-title {
    color: #fff !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    margin: 8px 0 0 !important;
}
body.ui-polished-creator.day #text2img-panel .ark-empty-subtitle,
body.ui-polished-creator.day #img2img-panel .ark-empty-subtitle,
body.ui-polished-creator.day #text2video-panel .ark-empty-subtitle,
body.ui-polished-creator.day #img2video-panel .ark-empty-subtitle {
    color: rgba(255,255,255,.55) !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    max-width: 38ch !important;
    margin: 0 auto !important;
}
body.ui-polished-creator.day #text2img-panel .ark-empty-tags,
body.ui-polished-creator.day #img2img-panel .ark-empty-tags,
body.ui-polished-creator.day #text2video-panel .ark-empty-tags,
body.ui-polished-creator.day #img2video-panel .ark-empty-tags {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
}
body.ui-polished-creator.day #text2img-panel .ark-empty-tags span,
body.ui-polished-creator.day #img2img-panel .ark-empty-tags span,
body.ui-polished-creator.day #text2video-panel .ark-empty-tags span,
body.ui-polished-creator.day #img2video-panel .ark-empty-tags span {
    border-radius: 999px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 11px !important;
    box-shadow: none !important;
}

/* 预览区里的下载/清除：暗色版本 */
body.ui-polished-creator.day #text2img-panel .t2i-action-btn,
body.ui-polished-creator.day #img2img-panel .t2i-action-btn,
body.ui-polished-creator.day #text2video-panel .t2i-action-btn,
body.ui-polished-creator.day #img2video-panel .t2i-action-btn {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #fff !important;
    box-shadow: none !important;
    width: auto !important;
    padding: 0 12px !important;
    height: 30px !important;
    font-size: 12px !important;
}

/* =====================================================================
   v7 · 一致性收尾：参照 shadcn/ui · Vercel · Linear 的克制原则
   ─────────────────────────────────────────────────────────────────────
   - 中文标签字距修复（不再"01 · 起 始 帧"）
   - 每个 tab 按自身流程语义编号
   - 音频卡硬转单 pill
   - 隐藏底部"最近创作"
   - 预览区缩短并加微网格底，避免空大黑
   ===================================================================== */

/* ───── 1. 隐藏「最近创作」横向轨道（user 明确要求） ───── */
body.ui-polished-creator .history-section { display: none !important; }

/* ───── 2. 重置所有 mono section 标签的中文字距（之前 .26em + 字间空格双重灾难） ───── */
body.ui-polished-creator .upload-area-multi::before,
body.ui-polished-creator .t2i-form-group:has(> .t2i-textarea)::before,
body.ui-polished-creator .t2i-row:not([id*="AudioRow"])::before,
body.ui-polished-creator .t2i-actions::before {
    letter-spacing: .04em !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--mt-soft) !important;
    text-transform: none !important;
}

/* ───── 3. 每个 tab 的语义编号（不再"02 · 动态描述"出现在文生图） ───── */

/* 文生图：[01 提示词] → [02 参数] → [03 生成] */
body.ui-polished-creator[data-active-tab="text2img"] .t2i-form-group:has(> .t2i-textarea)::before {
    content: "01 · 提示词" !important;
}
body.ui-polished-creator[data-active-tab="text2img"] .t2i-row:not([id*="AudioRow"])::before {
    content: "02 · 参数" !important;
}
body.ui-polished-creator[data-active-tab="text2img"] .t2i-actions::before {
    content: "03 · 生成" !important;
}

/* 图生图：[01 参考图] → [02 描述修改] → [03 参数] → [04 生成] */
body.ui-polished-creator[data-active-tab="img2img"] .upload-area-multi::before {
    content: "01 · 参考图" !important;
}
body.ui-polished-creator[data-active-tab="img2img"] .t2i-form-group:has(> .t2i-textarea)::before {
    content: "02 · 描述修改" !important;
}
body.ui-polished-creator[data-active-tab="img2img"] .t2i-row:not([id*="AudioRow"])::before {
    content: "03 · 参数" !important;
}
body.ui-polished-creator[data-active-tab="img2img"] .t2i-actions::before {
    content: "04 · 生成" !important;
}

/* 文生视频：[01 提示词] → [02 参数] → [03 音频] → [04 生成] */
body.ui-polished-creator[data-active-tab="text2video"] .t2i-form-group:has(> .t2i-textarea)::before {
    content: "01 · 提示词" !important;
}
body.ui-polished-creator[data-active-tab="text2video"] .t2i-row:not([id*="AudioRow"])::before {
    content: "02 · 参数" !important;
}
body.ui-polished-creator[data-active-tab="text2video"] .t2i-actions::before {
    content: "04 · 生成" !important;
}

/* 图生视频：[01 起始帧] → [02 动态描述] → [03 参数] → [04 音频] → [05 生成] */
body.ui-polished-creator[data-active-tab="img2video"] .upload-area-multi::before {
    content: "01 · 起始帧" !important;
}
body.ui-polished-creator[data-active-tab="img2video"] .t2i-form-group:has(> .t2i-textarea)::before {
    content: "02 · 动态描述" !important;
}
body.ui-polished-creator[data-active-tab="img2video"] .t2i-row:not([id*="AudioRow"])::before {
    content: "03 · 参数" !important;
}
body.ui-polished-creator[data-active-tab="img2video"] .t2i-actions::before {
    content: "05 · 生成" !important;
}

/* 音频行标签（统一加上 03/04 编号） */
body.ui-polished-creator [id*="AudioRow"] {
    position: relative !important;
    margin-top: 32px !important;
}
body.ui-polished-creator [id*="AudioRow"]::before {
    content: "03 · 音频" !important;
    position: absolute !important;
    top: -22px !important;
    left: 0 !important;
    font-family: 'Manrope', 'Noto Sans SC', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    color: var(--mt-soft) !important;
    text-transform: none !important;
}
body.ui-polished-creator[data-active-tab="img2video"] [id*="AudioRow"]::before {
    content: "04 · 音频" !important;
}

/* ───── 4. 音频卡：彻底拆掉内联绿勾紫框，变成单 pill 风格 ───── */
body.ui-polished-creator [id*="AudioRow"] > .t2i-form-group {
    width: 100% !important;
}
body.ui-polished-creator [id*="AudioRow"] .t2i-label {
    display: none !important;
}
body.ui-polished-creator.day [id*="AudioRow"] > .t2i-form-group > div[style] {
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: var(--mt-ink) !important;
    box-shadow: var(--mt-shadow-sm) !important;
}
body.ui-polished-creator.day [id*="AudioRow"] label[style] {
    color: var(--mt-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
body.ui-polished-creator.day [id*="AudioRow"] label[style] span,
body.ui-polished-creator.day [id*="AudioRow"] label[style] span * {
    color: var(--mt-ink) !important;
}
body.ui-polished-creator.day [id*="AudioRow"] label[style] b {
    color: var(--mt-accent) !important;
    font-weight: 700 !important;
}
body.ui-polished-creator.day [id*="AudioRow"] input[type="checkbox"] {
    accent-color: var(--mt-accent) !important;
}
/* 把那个浪费空间的灯泡提示行藏掉 */
body.ui-polished-creator [id*="AudioRow"] > .t2i-form-group > div[style*="font-size:11px"] {
    display: none !important;
}

/* 音频状态圆点（替代 ✅ emoji） */
body.ui-polished-creator .mt-audio-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    background: rgba(12,12,18,.18);
    transition: background .25s, box-shadow .25s;
}
body.ui-polished-creator .mt-audio-dot[data-on="1"] {
    background: var(--mt-accent);
    box-shadow: 0 0 10px var(--mt-accent), 0 0 0 4px rgba(91,71,251,.10);
}

/* ───── 5. 预览区：彻底压缩底部空白，配合等高对齐 ───── */
body.ui-polished-creator.day #text2img-panel .t2i-image-container,
body.ui-polished-creator.day #img2img-panel .t2i-image-container,
body.ui-polished-creator.day #text2video-panel .t2i-image-container,
body.ui-polished-creator.day #img2video-panel .t2i-image-container {
    min-height: 660px !important;
    background:
        radial-gradient(600px 280px at 50% 0%, rgba(91,71,251,.20), transparent 60%),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        #0a0a10 !important;
    background-size: auto, 32px 32px, 32px 32px, auto !important;
    box-shadow: inset 0 0 100px rgba(0,0,0,.6) !important;
}

body.ui-polished-creator.day #text2img-panel .t2i-right,
body.ui-polished-creator.day #img2img-panel .t2i-right,
body.ui-polished-creator.day #text2video-panel .t2i-right,
body.ui-polished-creator.day #img2video-panel .t2i-right {
    min-height: 720px !important;
    top: 28px !important;
}

/* ───── 5b. 4 个 tab 左右两列等高 —— 解决"其它 tab 不撑满"的核心 ───── */
body.ui-polished-creator.day #text2img-panel .t2i-layout,
body.ui-polished-creator.day #img2img-panel .t2i-layout,
body.ui-polished-creator.day #text2video-panel .t2i-layout,
body.ui-polished-creator.day #img2video-panel .t2i-layout {
    align-items: stretch !important;
}
body.ui-polished-creator.day #text2img-panel .t2i-left,
body.ui-polished-creator.day #img2img-panel .t2i-left,
body.ui-polished-creator.day #text2video-panel .t2i-left,
body.ui-polished-creator.day #img2video-panel .t2i-left {
    min-height: 720px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    justify-content: flex-start !important;
}

/* 左列底部"图片图库"折叠区推到底部，避免上面挤一堆 */
body.ui-polished-creator.day #text2img-panel .img-library-panel,
body.ui-polished-creator.day #img2img-panel .img-library-panel,
body.ui-polished-creator.day #text2video-panel .img-library-panel,
body.ui-polished-creator.day #img2video-panel .img-library-panel {
    margin-top: auto !important;
}

/* ───── 6. 隐藏旧的预设小 chip 行（被新风格画廊取代） ───── */
body.ui-polished-creator .t2i-presets { display: none !important; }

/* ───── 7. 隐藏工具行（AI 扩写 / 撤销 / 重做 / 清空 / 历史）—— 跟顶栏「工具 ▾」下拉重复 ───── */
body.ui-polished-creator .t2i-tools { display: none !important; }

/* ───── 8. 隐藏左列底部"图片图库"折叠条 —— 单独一行 + 黄文件夹 emoji 视觉不和谐 ───── */
body.ui-polished-creator .img-library-panel { display: none !important; }

/* ───── 9. textarea 自动撑高 + 生成按钮贴底：解决砍掉两组件后的"左右不齐" ───── */
body.ui-polished-creator.day #text2img-panel .t2i-form-group:has(> .t2i-textarea),
body.ui-polished-creator.day #img2img-panel .t2i-form-group:has(> .t2i-textarea),
body.ui-polished-creator.day #text2video-panel .t2i-form-group:has(> .t2i-textarea),
body.ui-polished-creator.day #img2video-panel .t2i-form-group:has(> .t2i-textarea) {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
body.ui-polished-creator.day #text2img-panel .t2i-textarea,
body.ui-polished-creator.day #img2img-panel .t2i-textarea,
body.ui-polished-creator.day #text2video-panel .t2i-textarea,
body.ui-polished-creator.day #img2video-panel .t2i-textarea {
    flex: 1 1 auto !important;
    min-height: 160px !important;
}

/* 生成按钮所在的 .t2i-actions 自动推到左列底部 */
body.ui-polished-creator .t2i-actions {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--mt-line) !important;
}

/* =====================================================================
   v8 · 风格画廊（mt-gallery）—— 与主页 .showcase / .pillars 同源
   ===================================================================== */

body.ui-polished-creator .mt-gallery {
    margin-top: 56px;
    padding: 40px 4px 0;
    border-top: 1px solid var(--mt-line);
    position: relative;
}

body.ui-polished-creator .mt-gallery-head {
    display: grid;
    grid-template-columns: minmax(190px, auto) 1fr;
    gap: clamp(24px, 3.4vw, 52px);
    align-items: end;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--mt-line);
}
body.ui-polished-creator .mt-gallery-num {
    font-family: 'Noto Serif SC', serif;
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--mt-accent);
    display: flex;
    align-items: baseline;
    gap: 0;
}
body.ui-polished-creator .mt-gallery-num em {
    font-style: normal;
    color: var(--mt-accent);
    font-size: 1em;
    font-weight: 800;
    letter-spacing: 0;
    font-family: 'Manrope', sans-serif;
    text-transform: uppercase;
    padding-bottom: 0;
}
body.ui-polished-creator .mt-gallery-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mt-muted);
    margin-bottom: 12px;
    font-weight: 600;
}
body.ui-polished-creator .mt-gallery-eyebrow::after {
    content: "";
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}
body.ui-polished-creator .mt-gallery-desc {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.01em;
    color: var(--mt-muted);
    max-width: 680px;
    margin: 0;
}
body.ui-polished-creator .mt-gallery-desc em {
    font-style: normal;
    color: var(--mt-accent);
    font-weight: 700;
    font-family: 'Noto Serif SC', serif;
}
body.ui-polished-creator .mt-gallery-desc b {
    color: var(--mt-ink);
    font-weight: 700;
}

body.ui-polished-creator .mt-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1vw, 16px);
}
@media (max-width: 1200px) {
    body.ui-polished-creator .mt-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 880px) {
    body.ui-polished-creator .mt-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

body.ui-polished-creator .mt-style-card {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0c;
    border: 1px solid var(--mt-line);
    cursor: pointer;
    transition: transform .35s ease, border-color .25s, box-shadow .25s;
    padding: 0;
    font-family: inherit;
    color: #fff;
    text-align: left;
}
body.ui-polished-creator .mt-style-card:hover {
    transform: translateY(-3px);
    border-color: rgba(91,71,251,.45);
    box-shadow: 0 22px 50px -28px rgba(91,71,251,.55);
}

body.ui-polished-creator .mt-style-canvas {
    position: absolute;
    inset: 0;
    transition: transform .8s ease;
    background: #05060a;
}
body.ui-polished-creator .mt-style-card:hover .mt-style-canvas {
    transform: scale(1.04);
}

body.ui-polished-creator .mt-style-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.012);
    transition: opacity .5s ease, transform .8s ease;
    pointer-events: none;
}
body.ui-polished-creator .mt-style-media.is-active {
    opacity: 1;
    transform: scale(1);
}
body.ui-polished-creator video.mt-style-media {
    background: #05060a;
}
body.ui-polished-creator .mt-media-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 30px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(5,7,12,.36);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
    font: 700 19px/1 'Manrope', sans-serif;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s ease, background .2s ease;
}
body.ui-polished-creator .mt-media-prev { left: 10px; }
body.ui-polished-creator .mt-media-next { right: 10px; }
body.ui-polished-creator .mt-style-card:hover .mt-media-nav,
body.ui-polished-creator .mt-style-card:focus-visible .mt-media-nav {
    opacity: 1;
}
body.ui-polished-creator .mt-media-nav:hover {
    background: rgba(91,71,251,.68);
}
body.ui-polished-creator .mt-media-dots {
    position: absolute;
    left: 50%;
    bottom: 38px;
    z-index: 3;
    display: flex;
    gap: 5px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity .2s ease;
}
body.ui-polished-creator .mt-style-card:hover .mt-media-dots,
body.ui-polished-creator .mt-style-card:focus-visible .mt-media-dots {
    opacity: .92;
}
body.ui-polished-creator .mt-media-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
}
body.ui-polished-creator .mt-media-dot.is-active {
    width: 16px;
    background: #6a55ff;
}

body.ui-polished-creator .mt-style-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 100%);
    pointer-events: none;
    z-index: 1;
}

body.ui-polished-creator .mt-style-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: .5px solid rgba(255,255,255,.18);
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 9.5px;
    letter-spacing: .12em;
    color: rgba(255,255,255,.92);
    text-transform: uppercase;
    z-index: 2;
    font-weight: 600;
}

body.ui-polished-creator .mt-style-meta {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: #fff;
    z-index: 2;
    gap: 8px;
}
body.ui-polished-creator .mt-style-name {
    font-family: 'Noto Serif SC', serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}
body.ui-polished-creator .mt-style-num {
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255,255,255,.62);
}

/* 风格卡只显示真实素材；不再保留原始 CSS 手绘/渐变占位底。 */
body.ui-polished-creator .mt-style-card--cinema .mt-style-canvas,
body.ui-polished-creator .mt-style-card--anime .mt-style-canvas,
body.ui-polished-creator .mt-style-card--ink .mt-style-canvas,
body.ui-polished-creator .mt-style-card--cyber .mt-style-canvas,
body.ui-polished-creator .mt-style-card--oil .mt-style-canvas,
body.ui-polished-creator .mt-style-card--photo .mt-style-canvas,
body.ui-polished-creator .mt-style-card--minimal .mt-style-canvas,
body.ui-polished-creator .mt-style-card--concept .mt-style-canvas {
    background: #05060a !important;
}
body.ui-polished-creator .mt-style-card--minimal::after {
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.4) 100%) !important;
}
body.ui-polished-creator .mt-style-card--minimal .mt-style-name { color: #fff !important; }

/* ───── 6. 顶栏 status pills 配色：网络错误用红色重音，不再"和未登录同色" ───── */
body.ui-polished-creator .ark-balance-widget[id*="arkBalanceWidget"] {
    color: var(--mt-muted) !important;
}
/* 网络错误/未登录态：当文本含"错误"或"未登录"时给一个状态色（用属性选择器力有不逮，靠 JS 兜底更稳） */
body.ui-polished-creator .ark-balance-widget {
    border-color: rgba(220,38,38,.32) !important;
    background: rgba(220,38,38,.06) !important;
    color: #dc2626 !important;
}
body.ui-polished-creator .ark-points-widget {
    border-color: rgba(120,113,108,.22) !important;
    background: rgba(120,113,108,.05) !important;
    color: var(--mt-muted) !important;
}
body.ui-polished-creator .ark-points-widget:hover,
body.ui-polished-creator .canvas-lib-pill.points:hover {
    background: #fff !important;
    border-color: var(--mt-accent) !important;
    color: var(--mt-accent) !important;
    box-shadow: var(--mt-shadow-sm) !important;
    transform: translateY(-1px) !important;
}

/* =====================================================================
   v9 · 剩下 3 个面板的统一日间设计层（AI 画布 / 工作流 / 独立剧本分析）
   每个面板用独立 class 体系，必须分别覆盖，但都套同一个 mt-* 设计令牌
   ===================================================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AI 画布（canvas-panel）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.ui-polished-creator.day #canvas-panel { background: transparent !important; padding: 0 !important; }
body.ui-polished-creator.day #canvas-panel .canvas-shell {
    display: grid !important;
    grid-template-columns: 280px minmax(0,1fr) 320px !important;
    gap: 18px !important;
    align-items: stretch !important;
    background: transparent !important;
    padding: 8px 4px !important;
    min-height: 720px;
}
@media (max-width: 1400px){
    body.ui-polished-creator.day #canvas-panel .canvas-shell { grid-template-columns: 260px minmax(0,1fr); }
    body.ui-polished-creator.day #canvas-panel .canvas-inspector { display: none !important; }
}

/* 三列卡片：白纸 + 紫光阴影 */
body.ui-polished-creator.day #canvas-panel .canvas-side,
body.ui-polished-creator.day #canvas-panel .canvas-workspace,
body.ui-polished-creator.day #canvas-panel .canvas-inspector {
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: var(--mt-shadow-sm) !important;
    color: var(--mt-ink) !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-side {
    padding: 18px !important;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* hero kicker / title / desc */
body.ui-polished-creator.day #canvas-panel .canvas-kicker {
    font-family: 'Manrope', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: var(--mt-soft) !important;
    margin-bottom: 6px !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-title {
    font-family: 'Noto Serif SC', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    color: var(--mt-ink) !important;
    margin-bottom: 6px !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-desc {
    font-size: 12.5px !important;
    color: var(--mt-muted) !important;
    line-height: 1.6 !important;
}

body.ui-polished-creator.day #canvas-panel .canvas-project-card {
    background: rgba(91,71,251,.04) !important;
    border: 1px solid rgba(91,71,251,.16) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.ui-polished-creator.day #canvas-panel .canvas-project-select,
body.ui-polished-creator.day #canvas-panel .canvas-note-input,
body.ui-polished-creator.day #canvas-panel .canvas-search-input {
    width: 100%;
    border-radius: 8px !important;
    border: 1px solid var(--mt-line-2) !important;
    background: #fff !important;
    color: var(--mt-ink) !important;
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-note-input {
    min-height: 80px !important;
    resize: vertical;
}
body.ui-polished-creator.day #canvas-panel .canvas-cloud-status {
    font-family: 'Manrope', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--mt-accent) !important;
    font-weight: 700 !important;
}

body.ui-polished-creator.day #canvas-panel .canvas-type-grid,
body.ui-polished-creator.day #canvas-panel .canvas-tool-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-action-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}

/* 侧栏按钮 + 工具栏按钮 —— 统一 pill */
body.ui-polished-creator.day #canvas-panel .canvas-action-btn,
body.ui-polished-creator.day #canvas-panel .canvas-tool-btn,
body.ui-polished-creator.day #canvas-panel .canvas-dock-btn,
body.ui-polished-creator.day #canvas-panel .canvas-inspector-tab,
body.ui-polished-creator.day #canvas-panel .canvas-presentation-btn {
    min-height: 30px !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1px solid var(--mt-line-2) !important;
    color: var(--mt-ink-2) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
body.ui-polished-creator.day #canvas-panel .canvas-action-btn:hover,
body.ui-polished-creator.day #canvas-panel .canvas-tool-btn:hover,
body.ui-polished-creator.day #canvas-panel .canvas-dock-btn:hover,
body.ui-polished-creator.day #canvas-panel .canvas-inspector-tab:hover {
    background: rgba(91,71,251,.06) !important;
    border-color: var(--mt-accent) !important;
    color: var(--mt-accent) !important;
    transform: translateY(-1px);
}
body.ui-polished-creator.day #canvas-panel .canvas-action-btn.primary {
    background: linear-gradient(135deg, var(--mt-accent-2), var(--mt-accent)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 14px -6px var(--mt-accent) !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-action-btn.primary:hover {
    color: #fff !important;
    filter: saturate(1.1);
}
body.ui-polished-creator.day #canvas-panel .canvas-action-btn.danger,
body.ui-polished-creator.day #canvas-panel .canvas-tool-btn.danger {
    color: #dc2626 !important;
    border-color: rgba(220,38,38,.28) !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-action-btn.danger:hover {
    background: rgba(220,38,38,.08) !important;
    color: #dc2626 !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-action-btn.active,
body.ui-polished-creator.day #canvas-panel .canvas-inspector-tab.active {
    background: var(--mt-accent-soft) !important;
    border-color: rgba(91,71,251,.32) !important;
    color: var(--mt-accent-3) !important;
    font-weight: 700 !important;
}

body.ui-polished-creator.day #canvas-panel .canvas-divider {
    height: 1px;
    background: var(--mt-line) !important;
    margin: 6px 0 !important;
}

body.ui-polished-creator.day #canvas-panel .canvas-help-list {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--mt-line) !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.ui-polished-creator.day #canvas-panel .canvas-help-item {
    font-size: 11.5px !important;
    color: var(--mt-muted) !important;
    line-height: 1.55 !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-help-item b {
    color: var(--mt-ink) !important;
    font-weight: 700 !important;
}

/* 工作区 */
body.ui-polished-creator.day #canvas-panel .canvas-workspace {
    overflow: hidden;
    position: relative;
    padding: 0 !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-topbar {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--mt-line) !important;
    background: rgba(255,255,255,.5) !important;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
body.ui-polished-creator.day #canvas-panel .canvas-topbar-title {
    font-family: 'Noto Serif SC', serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: var(--mt-ink) !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-status {
    font-family: 'Manrope', sans-serif !important;
    font-size: 10.5px !important;
    letter-spacing: .14em !important;
    color: var(--mt-soft) !important;
    text-transform: uppercase !important;
    margin-left: 6px;
}
body.ui-polished-creator.day #canvas-panel .canvas-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-stage-wrap {
    background:
        radial-gradient(rgba(91,71,251,.05) 1px, transparent 1px),
        linear-gradient(180deg, #fbfbfe, #f3f3f8) !important;
    background-size: 28px 28px, auto !important;
    min-height: 580px !important;
    position: relative;
}
body.ui-polished-creator.day #canvas-panel .canvas-empty {
    text-align: center !important;
    color: var(--mt-muted) !important;
}
body.ui-polished-creator.day #canvas-panel .canvas-empty-icon { display: none !important; }
body.ui-polished-creator.day #canvas-panel .canvas-empty-title {
    font-family: 'Noto Serif SC', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    color: var(--mt-ink) !important;
    margin-bottom: 8px !important;
}

/* 右侧 inspector */
body.ui-polished-creator.day #canvas-panel .canvas-inspector { padding: 0 !important; }
body.ui-polished-creator.day #canvas-panel .canvas-inspector-tabs {
    display: flex !important;
    gap: 4px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--mt-line) !important;
    background: rgba(91,71,251,.03) !important;
    flex-wrap: wrap;
}
body.ui-polished-creator.day #canvas-panel .canvas-inspector-body {
    padding: 12px !important;
    overflow-y: auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   工作流（workflow-panel）—— 杀掉霓虹 + 黑底配色
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.ui-polished-creator.day #workflow-panel { background: transparent !important; padding: 0 !important; }
body.ui-polished-creator.day #workflow-panel .wf-topbar {
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: var(--mt-radius) !important;
    padding: 14px 18px !important;
    box-shadow: var(--mt-shadow-sm) !important;
    margin-bottom: 14px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
body.ui-polished-creator.day #workflow-panel .wf-steps {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.ui-polished-creator.day #workflow-panel .wf-step {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid var(--mt-line-2) !important;
    background: #fff !important;
    color: var(--mt-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all .2s;
}
body.ui-polished-creator.day #workflow-panel .wf-step:hover {
    border-color: var(--mt-accent) !important;
    color: var(--mt-accent) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-step.act {
    background: linear-gradient(135deg, var(--mt-accent-2), var(--mt-accent)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -6px var(--mt-accent) !important;
    font-weight: 700 !important;
}
body.ui-polished-creator.day #workflow-panel .wf-step-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(91,71,251,.10) !important;
    color: var(--mt-accent) !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 11px !important;
}
body.ui-polished-creator.day #workflow-panel .wf-step.act .wf-step-num {
    background: rgba(255,255,255,.22) !important;
    color: #fff !important;
}

/* 工作流主布局 —— 隐藏剧集导航后变两栏 */
body.ui-polished-creator.day #workflow-panel .wf-main-layout {
    display: grid !important;
    grid-template-columns: 380px minmax(0,1fr) !important;
    gap: 16px !important;
    min-height: 720px;
}
@media (max-width: 1400px){
    body.ui-polished-creator.day #workflow-panel .wf-main-layout { grid-template-columns: 340px minmax(0,1fr); }
}
@media (max-width: 1100px){
    body.ui-polished-creator.day #workflow-panel .wf-main-layout { grid-template-columns: 1fr; }
}

/* 砍掉左侧"剧集导航"面板 —— 它的功能（重新分集 / 识别剧本）已经在创作参数里
   有「✨ 识别剧本」按钮承担；分集结果会出现在右侧「剧本」tab 里 */
body.ui-polished-creator.day #workflow-panel .wf-chapter-panel { display: none !important; }

body.ui-polished-creator.day #workflow-panel .wf-chapter-panel,
body.ui-polished-creator.day #workflow-panel .wf-input-panel {
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: var(--mt-shadow-sm) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.ui-polished-creator.day #workflow-panel .wf-panel-topbar,
body.ui-polished-creator.day #workflow-panel .wf-input-header {
    padding: 12px 14px !important;
    background: rgba(91,71,251,.03) !important;
    border-bottom: 1px solid var(--mt-line) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
body.ui-polished-creator.day #workflow-panel .wf-panel-topbar-label,
body.ui-polished-creator.day #workflow-panel .wf-input-header-title {
    font-family: 'Noto Serif SC', serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: var(--mt-ink) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-input-header-icon { display: none !important; }
body.ui-polished-creator.day #workflow-panel .wf-project-tree {
    padding: 10px !important;
    overflow-y: auto;
    flex: 1;
}
body.ui-polished-creator.day #workflow-panel .wf-input-body {
    padding: 14px !important;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.ui-polished-creator.day #workflow-panel .wf-input-step {
    position: relative;
}
body.ui-polished-creator.day #workflow-panel .wf-input-step-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}
body.ui-polished-creator.day #workflow-panel .wf-input-step-num {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(91,71,251,.10) !important;
    color: var(--mt-accent) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 12px !important;
}
body.ui-polished-creator.day #workflow-panel .wf-input-step-label {
    font-family: 'Noto Serif SC', serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--mt-ink) !important;
    flex: 1;
}
body.ui-polished-creator.day #workflow-panel .wf-label {
    font-family: 'Manrope', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--mt-soft) !important;
    margin-bottom: 6px !important;
}
body.ui-polished-creator.day #workflow-panel .wf-divider {
    height: 1px !important;
    background: var(--mt-line) !important;
    margin: 4px 0 !important;
}

body.ui-polished-creator.day #workflow-panel .wf-textarea,
body.ui-polished-creator.day #workflow-panel .wf-script-dropzone textarea {
    width: 100% !important;
    border-radius: 10px !important;
    border: 1px solid var(--mt-line-2) !important;
    background: #fff !important;
    color: var(--mt-ink) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    min-height: 130px !important;
    line-height: 1.7;
}
body.ui-polished-creator.day #workflow-panel .wf-script-dropzone {
    border: 1.5px dashed rgba(91,71,251,.24) !important;
    border-radius: 12px !important;
    background: rgba(91,71,251,.02) !important;
    padding: 8px !important;
    position: relative;
}

body.ui-polished-creator.day #workflow-panel .wf-btn {
    border: 1px solid var(--mt-line-2) !important;
    background: #fff !important;
    color: var(--mt-ink-2) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer;
    transition: all .15s;
}
body.ui-polished-creator.day #workflow-panel .wf-btn:hover {
    border-color: var(--mt-accent) !important;
    color: var(--mt-accent) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-btn-primary {
    background: linear-gradient(135deg, var(--mt-accent-2), var(--mt-accent)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 4px 10px -4px var(--mt-accent) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-btn-primary:hover { color: #fff !important; filter: saturate(1.1); }
body.ui-polished-creator.day #workflow-panel .wf-btn-secondary {
    background: #fff !important;
    color: var(--mt-ink-2) !important;
}

body.ui-polished-creator.day #workflow-panel .wf-feedback-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    border: 1px solid var(--mt-line-2) !important;
    background: #fff !important;
    color: var(--mt-muted) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all .15s;
}
body.ui-polished-creator.day #workflow-panel .wf-feedback-tag.active {
    background: var(--mt-accent-soft) !important;
    border-color: rgba(91,71,251,.32) !important;
    color: var(--mt-accent-3) !important;
    font-weight: 700 !important;
}
body.ui-polished-creator.day #workflow-panel .wf-feedback-tag.active-green {
    background: rgba(34,197,94,.08) !important;
    border-color: rgba(34,197,94,.32) !important;
    color: #15803d !important;
}
/* 砍掉所有 chip 前面的小图标（国旗 / 屏幕 / 闪电 / 钻石 等），脱"SaaS 表单"感 */
body.ui-polished-creator.day #workflow-panel .wf-feedback-tag-icon {
    display: none !important;
}
body.ui-polished-creator.day #workflow-panel .style-option .style-icon,
body.ui-polished-creator.day #workflow-panel .style-icon {
    display: none !important;
}
/* 画面风格 grid 选项美化 —— 改成统一 pill 风格 */
body.ui-polished-creator.day #workflow-panel .style-option {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    border: 1px solid var(--mt-line-2) !important;
    background: #fff !important;
    color: var(--mt-muted) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all .15s !important;
    min-height: 32px !important;
}
body.ui-polished-creator.day #workflow-panel .style-option:hover {
    border-color: var(--mt-accent) !important;
    color: var(--mt-accent) !important;
}
body.ui-polished-creator.day #workflow-panel .style-option.active {
    background: var(--mt-accent-soft) !important;
    border-color: rgba(91,71,251,.32) !important;
    color: var(--mt-accent-3) !important;
    font-weight: 700 !important;
}
/* 风格选择器自身布局 */
body.ui-polished-creator.day #workflow-panel .style-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

body.ui-polished-creator.day #workflow-panel .wf-collapse-arrow {
    color: var(--mt-soft) !important;
    font-size: 10px !important;
    margin-left: auto;
}

/* 工作流中心工作区 */
body.ui-polished-creator.day #workflow-panel .wf-work-area,
body.ui-polished-creator.day #workflow-panel .wf-content-area,
body.ui-polished-creator.day #workflow-panel .wf-result-panel {
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: var(--mt-shadow-sm) !important;
    color: var(--mt-ink) !important;
    overflow: hidden;
    padding: 16px !important;
}

/* —— 双 ID 修正：覆盖 6308-6316 的"黑底大按钮"和 .wf-btn-secondary 灰底规则 —— */
body.ui-polished-creator.day #workflow-panel #wfSmartStartBtn,
body.ui-polished-creator.day #workflow-panel #wfBottomStartBtn,
body.ui-polished-creator.day #workflow-panel #aiGenScriptBtn {
    background: linear-gradient(135deg, var(--mt-accent-2), var(--mt-accent)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px -6px var(--mt-accent) !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    cursor: pointer !important;
    transition: transform .15s, filter .15s !important;
}
body.ui-polished-creator.day #workflow-panel #wfBottomStartBtn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
}
body.ui-polished-creator.day #workflow-panel #wfSmartStartBtn:hover,
body.ui-polished-creator.day #workflow-panel #wfBottomStartBtn:hover,
body.ui-polished-creator.day #workflow-panel #aiGenScriptBtn:hover {
    transform: translateY(-1px) !important;
    filter: saturate(1.1) !important;
}

/* 右侧结果面板（剧本待生成 / 角色图 / 分镜图 / 分镜视频 / 总视频）—— 跟 4 个主 tab 的暗色电影预览同款 */
body.ui-polished-creator.day #workflow-panel .wf-result-panel,
body.ui-polished-creator.day #workflow-panel .wf-result-body,
body.ui-polished-creator.day #workflow-panel .wf-result-header,
body.ui-polished-creator.day #workflow-panel .wf-empty-state,
body.ui-polished-creator.day #workflow-panel .wf-no-project,
body.ui-polished-creator.day #workflow-panel .wf-empty-text {
    background: transparent !important;
}
body.ui-polished-creator.day #workflow-panel .wf-result-panel {
    background: #0c0c12 !important;
    border: 1px solid #1a1a22 !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: 0 24px 60px -24px rgba(12,12,18,.45) !important;
    overflow: hidden !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
}
body.ui-polished-creator.day #workflow-panel .wf-result-header {
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: transparent !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
body.ui-polished-creator.day #workflow-panel .wf-result-body {
    flex: 1 !important;
    min-height: 480px !important;
    padding: 24px !important;
    background:
        radial-gradient(600px 280px at 50% 0%, rgba(91,71,251,.18), transparent 62%),
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
        #0a0a10 !important;
    background-size: auto, 32px 32px, 32px 32px, auto !important;
    color: #fff !important;
    overflow-y: auto !important;
}

/* 右侧 tabs（.wf-result-tab）—— 暗色版本，紫色 active */
body.ui-polished-creator.day #workflow-panel .wf-result-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
body.ui-polished-creator.day #workflow-panel .wf-result-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.04) !important;
    color: rgba(255,255,255,.62) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all .15s !important;
}
body.ui-polished-creator.day #workflow-panel .wf-result-tab:hover {
    background: rgba(91,71,251,.18) !important;
    color: #fff !important;
    border-color: rgba(91,71,251,.42) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-result-tab.active {
    background: linear-gradient(135deg, var(--mt-accent-2), var(--mt-accent)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -6px var(--mt-accent) !important;
    font-weight: 700 !important;
}
body.ui-polished-creator.day #workflow-panel .wf-result-tab.done {
    background: rgba(34,197,94,.14) !important;
    border-color: rgba(34,197,94,.35) !important;
    color: #4ade80 !important;
}

/* 工作流解析结果：始终保持暗色卡片，避免日间主题把内联半透明白色变成白底 */
#workflow-panel .wf-script-summary-card,
#workflow-panel .wf-script-asset-card,
#workflow-panel .wf-shot-card {
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.78) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#workflow-panel .wf-script-summary-card {
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
}
#workflow-panel .wf-script-summary-head,
#workflow-panel .wf-shot-card-head,
#workflow-panel .wf-shot-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
#workflow-panel .wf-script-summary-head {
    margin-bottom: 10px !important;
}
#workflow-panel .wf-script-summary-title,
#workflow-panel .wf-shot-title,
#workflow-panel .wf-shot-section-title {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}
#workflow-panel .wf-script-summary-title,
#workflow-panel .wf-shot-section-title {
    font-size: 13px !important;
}
#workflow-panel .wf-script-summary-pill,
#workflow-panel .wf-shot-chip,
#workflow-panel .wf-shot-index,
#workflow-panel .wf-shot-bridge-badge {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    padding: 0 8px !important;
    border-radius: 7px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    background: rgba(91,71,251,.16) !important;
    border: 1px solid rgba(139,118,255,.28) !important;
    color: rgba(214,207,255,.95) !important;
    white-space: nowrap !important;
}
#workflow-panel .wf-script-summary-pill.info {
    background: rgba(56,189,248,.13) !important;
    border-color: rgba(56,189,248,.26) !important;
    color: rgba(186,230,253,.95) !important;
}
#workflow-panel .wf-script-summary-preview,
#workflow-panel .wf-shot-desc {
    color: rgba(255,255,255,.66) !important;
    font-size: 12.5px !important;
    line-height: 1.75 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}
#workflow-panel .wf-script-summary-preview {
    max-height: 168px !important;
    overflow-y: auto !important;
}
#workflow-panel .wf-shot-section {
    margin-bottom: 18px !important;
}
#workflow-panel .wf-shot-section-title {
    margin-bottom: 10px !important;
}
#workflow-panel .wf-shot-list {
    display: grid !important;
    gap: 8px !important;
}
#workflow-panel .wf-shot-card {
    padding: 14px 16px !important;
    cursor: pointer !important;
    transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}
#workflow-panel .wf-script-asset-card {
    padding: 12px 14px !important;
    transition: border-color .16s ease, background .16s ease !important;
}
#workflow-panel .wf-script-asset-card:hover {
    background: rgba(255,255,255,.062) !important;
    border-color: rgba(139,118,255,.34) !important;
}
#workflow-panel .wf-script-asset-name {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
}
#workflow-panel .wf-script-asset-desc {
    color: rgba(255,255,255,.52) !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
}
#workflow-panel .wf-shot-card:hover {
    background: rgba(255,255,255,.065) !important;
    border-color: rgba(139,118,255,.38) !important;
    color: rgba(255,255,255,.86) !important;
    transform: translateY(-1px) !important;
}
#workflow-panel .wf-shot-card.is-bridge {
    border-color: rgba(56,189,248,.34) !important;
    background: rgba(56,189,248,.055) !important;
}
#workflow-panel .wf-shot-card.is-bridge:hover {
    background: rgba(56,189,248,.075) !important;
    border-color: rgba(56,189,248,.48) !important;
}
#workflow-panel .wf-shot-card-head {
    margin-bottom: 8px !important;
}
#workflow-panel .wf-shot-title {
    min-width: 0 !important;
    font-size: 12.5px !important;
}
#workflow-panel .wf-shot-index {
    background: rgba(255,0,222,.14) !important;
    border-color: rgba(255,0,222,.28) !important;
    color: rgba(255,198,246,.95) !important;
}
#workflow-panel .wf-shot-bridge-badge {
    background: rgba(56,189,248,.13) !important;
    border-color: rgba(56,189,248,.28) !important;
    color: rgba(186,230,253,.96) !important;
}
#workflow-panel .wf-shot-meta-row {
    margin-bottom: 8px !important;
}
#workflow-panel .wf-shot-continuity {
    margin-top: 8px !important;
    color: rgba(186,230,253,.62) !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
}

/* 右侧空状态：编辑级中央文案 */
body.ui-polished-creator.day #workflow-panel .wf-empty-state,
body.ui-polished-creator.day #workflow-panel .wf-no-project {
    min-height: 380px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #fff !important;
    gap: 12px !important;
}
body.ui-polished-creator.day #workflow-panel .wf-empty-text {
    font-family: 'Noto Serif SC', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    color: #fff !important;
}
body.ui-polished-creator.day #workflow-panel .wf-empty-state > div:not(.wf-empty-text) {
    color: rgba(255,255,255,.55) !important;
    font-size: 13px !important;
}
#workflow-panel .wf-script-upload-card {
    width: 86px;
    height: 86px;
    margin: 4px auto 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed currentColor;
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    color: #fff;
    cursor: pointer;
    transform: translateZ(0);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
    opacity: .88;
}
#workflow-panel .wf-script-upload-card:hover {
    transform: scale(1.055);
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 14px 34px rgba(91, 71, 251, .22);
    opacity: 1;
}
#workflow-panel .wf-script-upload-card:active {
    transform: scale(1.025);
}
#workflow-panel .wf-script-upload-plus {
    font-size: 36px;
    line-height: 1;
    font-weight: 300;
    color: currentColor;
}

/* 左侧"剧集导航"空状态 —— TV emoji 太大，缩小 + 编辑级文案 */
body.ui-polished-creator.day #workflow-panel .wf-project-tree {
    padding: 14px !important;
}
body.ui-polished-creator.day #workflow-panel .wf-no-project,
body.ui-polished-creator.day #workflow-panel .wf-project-tree .wf-empty-state {
    background: transparent !important;
    color: var(--mt-muted) !important;
    min-height: 0 !important;
}
body.ui-polished-creator.day #workflow-panel .wf-project-tree .wf-empty-state {
    color: var(--mt-muted) !important;
    text-align: center !important;
    padding: 32px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.7 !important;
}

/* 杀掉霓虹色 (内联 #ff00de / #00ffff) 上的暴力遮盖 */
body.ui-polished-creator.day #workflow-panel [style*="color:#ff00de"],
body.ui-polished-creator.day #workflow-panel [style*="color: #ff00de"] {
    color: var(--mt-accent) !important;
}
body.ui-polished-creator.day #workflow-panel [style*="background:linear-gradient(90deg,#ff00de,#00ffff)"] {
    background: linear-gradient(90deg, var(--mt-accent-2), var(--mt-accent)) !important;
}
body.ui-polished-creator.day #workflow-panel [style*="color:rgba(255,255,255,0.15)"],
body.ui-polished-creator.day #workflow-panel [style*="color:rgba(255,255,255,0.3)"],
body.ui-polished-creator.day #workflow-panel [style*="color:rgba(255,255,255,0.35)"],
body.ui-polished-creator.day #workflow-panel [style*="color:rgba(255,255,255,0.4)"] {
    color: var(--mt-soft) !important;
}
body.ui-polished-creator.day #workflow-panel [style*="background:rgba(0,0,0,0.3)"] {
    background: rgba(91,71,251,.04) !important;
    border-color: rgba(91,71,251,.18) !important;
}
body.ui-polished-creator.day #workflow-panel [style*="border:1px solid rgba(255,0,222,0.2)"] {
    border-color: rgba(91,71,251,.22) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   独立剧本分析（director-panel）—— 覆盖第二个 <style> 块里的 #667eea 蓝
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.ui-polished-creator.day #director-panel { background: transparent !important; padding: 0 !important; }
body.ui-polished-creator.day #director-panel .director-card,
body.ui-polished-creator.day #director-panel .director-section,
body.ui-polished-creator.day #director-panel .director-result-layout,
body.ui-polished-creator.day #director-panel .director-revision-result,
body.ui-polished-creator.day #director-panel .director-full-report,
body.ui-polished-creator.day #director-panel .director-empty-card {
    background: var(--mt-paper) !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: var(--mt-radius) !important;
    box-shadow: var(--mt-shadow-sm) !important;
    color: var(--mt-ink) !important;
    padding: 16px 18px !important;
    margin-bottom: 14px !important;
}
body.ui-polished-creator.day #director-panel .director-section h4 {
    font-family: 'Noto Serif SC', serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--mt-accent) !important;
    border-bottom: 1px solid var(--mt-line) !important;
    padding-bottom: 8px !important;
    margin: 0 0 12px !important;
    letter-spacing: -.01em !important;
}
body.ui-polished-creator.day #director-panel .director-rating-item,
body.ui-polished-creator.day #director-panel .director-scene-card,
body.ui-polished-creator.day #director-panel .director-revision-note,
body.ui-polished-creator.day #director-panel .director-timeline-content {
    background: rgba(91,71,251,.04) !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: var(--mt-ink) !important;
}
body.ui-polished-creator.day #director-panel .director-scene-card {
    border-left: 3px solid var(--mt-accent) !important;
}
body.ui-polished-creator.day #director-panel .director-rating-item .label,
body.ui-polished-creator.day #director-panel .director-scene-meta {
    color: var(--mt-muted) !important;
    font-size: 11px !important;
}
body.ui-polished-creator.day #director-panel .director-rating-item .stars {
    color: #d97706 !important;
}
body.ui-polished-creator.day #director-panel .director-scene-id,
body.ui-polished-creator.day #director-panel .director-timeline-time {
    color: var(--mt-accent) !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
}
body.ui-polished-creator.day #director-panel .director-camera,
body.ui-polished-creator.day #director-panel .director-char-tag,
body.ui-polished-creator.day #director-panel .director-tag,
body.ui-polished-creator.day #director-panel .director-revision-chip {
    background: var(--mt-accent-soft) !important;
    color: var(--mt-accent-3) !important;
    border: 1px solid rgba(91,71,251,.18) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
body.ui-polished-creator.day #director-panel .director-suggestions li {
    color: var(--mt-muted) !important;
    font-size: 12.5px !important;
    margin-bottom: 6px;
}
body.ui-polished-creator.day #director-panel .director-timeline-item {
    border-left: 2px solid var(--mt-accent) !important;
}
body.ui-polished-creator.day #director-panel .director-timeline-item::before {
    background: var(--mt-accent) !important;
}
body.ui-polished-creator.day #director-panel .director-timeline-shot-num {
    background: linear-gradient(135deg, var(--mt-accent-2), var(--mt-accent)) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
}
body.ui-polished-creator.day #director-panel .director-timeline-dialogue {
    background: rgba(91,71,251,.05) !important;
    border-left: 3px solid var(--mt-accent) !important;
    color: var(--mt-ink) !important;
    border-radius: 0 8px 8px 0 !important;
}
body.ui-polished-creator.day #director-panel .btn-primary {
    background: linear-gradient(135deg, var(--mt-accent-2), var(--mt-accent)) !important;
    color: #fff !important;
    border-radius: 10px !important;
    border: 0 !important;
    box-shadow: 0 6px 14px -6px var(--mt-accent) !important;
    padding: 8px 16px !important;
    font-weight: 700 !important;
}
body.ui-polished-creator.day #director-panel .btn-secondary {
    background: #fff !important;
    color: var(--mt-ink-2) !important;
    border: 1px solid var(--mt-line-2) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
}
body.ui-polished-creator.day #director-panel .btn-danger {
    background: rgba(220,38,38,.08) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220,38,38,.28) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
}

/* 杀掉 director 内嵌 #667eea 蓝紫色边/字 */
body.ui-polished-creator.day #director-panel [style*="color:#667eea"],
body.ui-polished-creator.day #director-panel [style*="color: #667eea"],
body.ui-polished-creator.day #director-panel [style*="color:#a5b4fc"] {
    color: var(--mt-accent) !important;
}
body.ui-polished-creator.day #director-panel [style*="background:#252540"],
body.ui-polished-creator.day #director-panel [style*="background:#3a3a5a"],
body.ui-polished-creator.day #director-panel [style*="background:#1a1a2e"] {
    background: var(--mt-paper) !important;
    color: var(--mt-ink) !important;
}
body.ui-polished-creator.day #director-panel [style*="background:rgba(0,0,0,0.3)"] {
    background: rgba(91,71,251,.04) !important;
}
body.ui-polished-creator.day #director-panel [style*="border:1px solid #333"] {
    border-color: var(--mt-line) !important;
}
body.ui-polished-creator.day #director-panel [style*="color:#fff"]:not([style*="background"]) {
    color: var(--mt-ink) !important;
}
body.ui-polished-creator.day #director-panel [style*="color:#aaa"],
body.ui-polished-creator.day #director-panel [style*="color:#888"],
body.ui-polished-creator.day #director-panel [style*="color:#71717a"] {
    color: var(--mt-muted) !important;
}

/* Workflow: use the result canvas as the script intake surface. */
#workflow-panel .wf-chapter-panel,
#workflow-panel .wf-input-panel {
    display: none !important;
}
#workflow-panel .wf-main-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
    min-height: calc(100vh - 280px) !important;
    height: calc(100vh - 280px) !important;
}
@media (max-width: 1200px) {
    #workflow-panel .wf-main-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
@media (max-width: 900px) {
    #workflow-panel .wf-main-layout {
        grid-template-columns: 1fr !important;
    }
}
#workflow-panel .wf-result-panel {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
}
#workflow-panel .wf-result-body {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
}
body.ui-polished-creator.day #workflow-panel .wf-chapter-panel,
body.ui-polished-creator.day #workflow-panel .wf-input-panel {
    display: none !important;
}
body.ui-polished-creator.day #workflow-panel .wf-main-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
    min-height: calc(100vh - 280px) !important;
    height: calc(100vh - 280px) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-result-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    padding: 0 !important;
}
body.ui-polished-creator.day #workflow-panel .wf-result-body {
    min-height: 0 !important;
    height: 100% !important;
}
#workflow-panel .wf-project-strip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 58px !important;
    padding: 10px 16px !important;
    border-top: 1px solid rgba(16, 19, 24, .06) !important;
    border-bottom: 1px solid rgba(16, 19, 24, .08) !important;
    background: rgba(255, 255, 255, .72) !important;
    box-sizing: border-box !important;
}
#workflow-panel .wf-project-strip-list {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
}
#workflow-panel .wf-project-strip-list::-webkit-scrollbar {
    height: 3px;
}
#workflow-panel .wf-project-strip-list::-webkit-scrollbar-thumb {
    background: rgba(91, 71, 251, .25);
    border-radius: 999px;
}
#workflow-panel .wf-project-chip,
#workflow-panel .wf-project-add-btn {
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(16, 19, 24, .10) !important;
    background: #fff !important;
    color: rgba(16, 19, 24, .72) !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    max-width: 260px !important;
}
#workflow-panel .wf-project-chip-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#workflow-panel .wf-project-chip.active {
    background: linear-gradient(135deg, #6d5dfc, #4f46e5) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(79, 70, 229, .20) !important;
}
#workflow-panel .wf-project-chip-meta {
    opacity: .58 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}
#workflow-panel .wf-project-delete-btn {
    width: 22px !important;
    height: 22px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: currentColor !important;
    opacity: .55 !important;
    cursor: pointer !important;
}
#workflow-panel .wf-project-delete-btn:hover {
    background: rgba(255, 255, 255, .18) !important;
    opacity: 1 !important;
}
#workflow-panel .wf-project-add-btn {
    flex: 0 0 auto !important;
    background: #101318 !important;
    border-color: #101318 !important;
    color: #fff !important;
}
#workflow-panel .wf-project-strip-empty {
    color: rgba(91, 104, 113, .76) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}
#workflow-panel.wf-project-home-active {
    background: #fff !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 10px !important;
    min-height: calc(100vh - 120px) !important;
    padding: 0 !important;
    overflow: hidden !important;
}
body.ui-polished-creator.day #workflow-panel.wf-project-home-active,
body.ui-polished-creator #workflow-panel.wf-project-home-active {
    background: #fff !important;
    border: 1px solid #d9dee7 !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .08) !important;
    padding: 0 !important;
}
#workflow-panel .wf-project-home {
    display: none;
    position: relative;
    min-height: calc(100vh - 128px);
    background: #fff;
    padding: 72px 56px 86px;
    box-sizing: border-box;
}
#workflow-panel.wf-project-home-active .wf-project-home {
    display: block;
}
body.ui-polished-creator.day #workflow-panel.wf-project-home-active .wf-project-home,
body.ui-polished-creator #workflow-panel.wf-project-home-active .wf-project-home {
    background: #fff !important;
}
#workflow-panel.wf-project-home-active .wf-workspace-shell {
    display: none !important;
}
#workflow-panel:not(.wf-project-home-active) .wf-project-home {
    display: none !important;
}
#workflow-panel .wf-project-home-search {
    position: absolute;
    top: 24px;
    right: 56px;
    width: min(360px, 36vw);
    height: 32px;
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
#workflow-panel .wf-project-home-search input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    padding: 0 34px 0 14px;
    font-size: 12px;
    font-weight: 700;
}
#workflow-panel .wf-project-home-search input::placeholder {
    color: #9ca3af;
}
#workflow-panel .wf-project-home-search span {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
}
#workflow-panel .wf-project-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 244px);
    gap: 16px;
    align-items: start;
    justify-content: start;
}
#workflow-panel .wf-project-card {
    width: 244px;
    height: 180px;
    position: relative;
    border-radius: 10px;
    border: 1px solid #d9dee7;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    color: #111827;
    cursor: pointer;
    overflow: visible;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#workflow-panel .wf-project-card:hover {
    transform: translateY(-2px);
    border-color: #aeb8c6;
    box-shadow: 0 18px 36px rgba(15,23,42,.10);
}
#workflow-panel .wf-project-card.add {
    border-color: #c7ced8;
    border-style: dashed;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
#workflow-panel .wf-project-card-menu-left,
#workflow-panel .wf-project-card-menu-right {
    position: absolute;
    top: 10px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #64748b;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    border-radius: 6px;
    z-index: 3;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
}
#workflow-panel .wf-project-card-menu-left { left: 8px; }
#workflow-panel .wf-project-card-menu-right { right: 8px; }
#workflow-panel .wf-project-card-menu-left:hover,
#workflow-panel .wf-project-card-menu-right:hover {
    background: #f1f5f9;
    color: #334155;
}
#workflow-panel .wf-project-folder {
    position: absolute;
    left: 50%;
    top: 70px;
    width: 82px;
    height: 60px;
    transform: translate(-50%, -50%);
    border-radius: 7px;
    background: #94a3b8;
    box-shadow: 0 10px 18px rgba(15,23,42,.10);
}
#workflow-panel .wf-project-folder::before {
    content: "";
    position: absolute;
    left: 0;
    top: -11px;
    width: 28px;
    height: 18px;
    border-radius: 6px 6px 0 0;
    background: #94a3b8;
}
#workflow-panel .wf-project-add-icon {
    position: absolute;
    left: 50%;
    top: 76px;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 42px;
    border: 3px solid #64748b;
    border-radius: 6px;
}
#workflow-panel .wf-project-add-icon::before {
    content: "";
    position: absolute;
    left: 8px;
    top: -10px;
    width: 19px;
    height: 12px;
    border: 3px solid #64748b;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}
#workflow-panel .wf-project-add-icon::after {
    content: "+";
    position: absolute;
    right: 8px;
    bottom: 4px;
    color: #64748b;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}
#workflow-panel .wf-project-card-title {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    color: #111827;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#workflow-panel .wf-project-card.add .wf-project-card-title {
    color: #334155;
}
#workflow-panel .wf-project-card-meta {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 34px;
    color: #94a3b8;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#workflow-panel .wf-project-home-empty {
    grid-column: 1 / -1;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    padding: 30px 4px;
}
#workflow-panel .wf-project-home-pager {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 30px;
}
#workflow-panel .wf-project-home-pager button,
#workflow-panel .wf-project-home-page-num {
    min-width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #c7ced8;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
#workflow-panel .wf-project-home-pager button {
    border-color: #c7ced8;
    background: #fff;
    color: #64748b;
}
#workflow-panel .wf-project-home-pager button:disabled {
    opacity: .28;
    cursor: not-allowed;
}
#workflow-panel .wf-project-home-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 900px) {
    #workflow-panel .wf-project-home {
        padding: 74px 22px 76px;
    }
    #workflow-panel .wf-project-home-search {
        left: 22px;
        right: auto;
        top: 22px;
        width: min(calc(100% - 44px), 360px);
    }
    #workflow-panel .wf-project-home-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
    #workflow-panel .wf-project-card {
        width: 100%;
        height: 164px;
    }
}
#wfAddProjectModal .wf-project-modal {
    max-width: 620px !important;
    width: min(92vw, 620px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #101318 !important;
    box-shadow: 0 28px 70px rgba(16, 19, 24, .20) !important;
}
#wfAddProjectModal .wf-project-modal-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid rgba(16, 19, 24, .08) !important;
    background: #fff !important;
}
#wfAddProjectModal .wf-project-modal-icon {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #6d5dfc, #7c3aed) !important;
    color: #fff !important;
    font-size: 20px !important;
    flex: 0 0 auto !important;
}
#wfAddProjectModal .wf-project-modal-title {
    color: #101318 !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}
#wfAddProjectModal .wf-project-modal-sub {
    color: #5b6871 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}
#wfAddProjectModal .wf-project-modal-close {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(16, 19, 24, .08) !important;
    border-radius: 8px !important;
    background: #f7fafc !important;
    color: #5b6871 !important;
    cursor: pointer !important;
    font-size: 18px !important;
}
#wfAddProjectModal .wf-project-modal-body {
    padding: 22px 24px 24px !important;
    background: #f8fafc !important;
}
#wfAddProjectModal .wf-project-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}
#wfAddProjectModal .wf-project-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-width: 0 !important;
}
#wfAddProjectModal .wf-project-field.full {
    grid-column: 1 / -1 !important;
}
#wfAddProjectModal .wf-project-label {
    color: #2b3338 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
#wfAddProjectModal .wf-project-label span {
    color: #ef4444 !important;
}
#wfAddProjectModal .wf-project-input,
#wfAddProjectModal .wf-project-select,
#wfAddProjectModal .wf-project-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(16, 19, 24, .12) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #101318 !important;
    outline: none !important;
    font-size: 13px !important;
}
#wfAddProjectModal .wf-project-input,
#wfAddProjectModal .wf-project-select {
    height: 42px !important;
    padding: 0 12px !important;
}
#wfAddProjectModal .wf-project-textarea {
    min-height: 92px !important;
    padding: 11px 12px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}
#wfAddProjectModal .wf-project-input:focus,
#wfAddProjectModal .wf-project-select:focus,
#wfAddProjectModal .wf-project-textarea:focus {
    border-color: rgba(91, 71, 251, .55) !important;
    box-shadow: 0 0 0 3px rgba(91, 71, 251, .10) !important;
}
#wfAddProjectModal .wf-project-tip {
    grid-column: 1 / -1 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(91, 71, 251, .18) !important;
    border-radius: 8px !important;
    background: rgba(91, 71, 251, .06) !important;
    color: #4b5563 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
}
#wfAddProjectModal .wf-project-tip strong {
    color: #4f46e5 !important;
}

/* Project-first creator shell */
.mt-project-home,
.mt-project-workspace-bar {
    border: 1px solid rgba(17, 24, 39, .10);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
}
.mt-project-home {
    display: none;
    min-height: calc(100vh - 150px);
    border-radius: 0;
    padding: 56px 24px 24px;
    border: 0;
    background: #fff;
    box-shadow: none;
}
body.mt-project-home-active .mt-project-home {
    display: block;
}
body.mt-project-home-active #resultSection,
body.mt-project-home-active #historySection,
body.mt-project-home-active .create-section,
body.mt-project-home-active #mtProjectWorkspaceBar {
    display: none !important;
}
/* The public entry now opens the canvas project home directly, without rendering the legacy master-project picker first. */
body.canvas-entry-default.mt-project-home-active .mt-project-home {
    display: none !important;
}
body.ui-polished-creator.mt-project-home-active:not(.canvas-mode-active) .sidebar,
body.ui-polished-creator.mt-project-home-active:not(.canvas-mode-active) .sidebar-hover-zone {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.ui-polished-creator.mt-project-home-active:not(.canvas-mode-active) .main-content,
body.ui-polished-creator.sidebar-auto-hide.mt-project-home-active:not(.canvas-mode-active) .main-content,
body.ui-polished-creator.sidebar-auto-hide.sidebar-revealed.mt-project-home-active:not(.canvas-mode-active) .main-content {
    margin-left: 0 !important;
    padding-left: clamp(40px, 5vw, 72px) !important;
    padding-right: clamp(40px, 5vw, 72px) !important;
}
.mt-project-head {
    display: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.mt-project-kicker {
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.mt-project-title {
    margin: 8px 0 6px;
    color: #111827;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 900;
    letter-spacing: 0;
}
.mt-project-subtitle {
    max-width: 860px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.8;
}
.mt-project-primary,
.mt-project-secondary,
.mt-project-tool-btn {
    border: 1px solid rgba(99, 102, 241, .16);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.mt-project-primary {
    min-width: 148px;
    padding: 14px 18px;
    color: #fff;
    background: linear-gradient(135deg, #6d5dfc, #8b5cf6);
    box-shadow: 0 14px 30px rgba(109, 93, 252, .24);
}
.mt-project-secondary,
.mt-project-tool-btn {
    padding: 10px 13px;
    color: #374151;
    background: #fff;
}
.mt-project-primary:hover,
.mt-project-secondary:hover,
.mt-project-tool-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .10);
}
.mt-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(244px, 244px));
    gap: 16px;
    align-items: start;
}
.mt-project-card {
    position: relative;
    width: 244px;
    height: 180px;
    min-height: 180px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, .36);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .06);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mt-project-card:hover {
    transform: translateY(-1px);
    border-color: rgba(99, 102, 241, .38);
    box-shadow: 0 22px 42px rgba(15, 23, 42, .09);
}
.mt-project-card.add {
    border: 1px dashed rgba(148, 163, 184, .58);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 18px;
}
.mt-project-add-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 3px solid #64748b;
    position: relative;
}
.mt-project-add-icon::before {
    width: 12px;
    height: 3px;
}
.mt-project-add-icon::after {
    width: 3px;
    height: 12px;
}
.mt-project-add-icon {
    box-shadow: inset 0 10px 0 -7px #64748b;
}
.mt-project-add-handle {
    position: absolute;
    left: 50%;
    top: -12px;
    width: 22px;
    height: 15px;
    transform: translateX(-50%);
    border: 3px solid #64748b;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #fff;
}
.mt-project-add-icon::before,
.mt-project-add-icon::after {
    content: "";
    position: absolute;
    background: #64748b;
    border-radius: 2px;
}
.mt-project-card-title {
    display: block;
    margin: 0;
    color: #111827;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
}
.mt-project-card.add .mt-project-card-title {
    margin-right: 0;
}
.mt-project-card-desc {
    display: none;
}
.mt-project-card-meta {
    position: static;
    display: flex;
    justify-content: center;
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.3;
}
.mt-project-card-meta span {
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.mt-project-card-actions {
    position: absolute;
    inset: 12px 14px auto 14px;
    display: flex;
    justify-content: space-between;
    gap: 0;
    z-index: 2;
    pointer-events: none;
}
.mt-project-card-actions button {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    pointer-events: auto;
}
.mt-project-card-actions button:hover {
    background: rgba(100, 116, 139, .08);
    color: #334155;
}
.mt-project-folder-icon {
    position: absolute;
    left: 50%;
    top: 30px;
    width: 82px;
    height: 70px;
    transform: translateX(-50%);
    border-radius: 8px;
    background: #94a3b8;
    box-shadow: 0 18px 28px rgba(100, 116, 139, .18);
}
.mt-project-folder-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: -10px;
    width: 28px;
    height: 18px;
    border-radius: 7px 7px 0 0;
    background: #94a3b8;
}
.mt-project-card-body {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.mt-project-card-status {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}
.mt-project-empty {
    align-self: stretch;
    min-height: 190px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    background: rgba(255,255,255,.72);
}
.mt-project-workspace-bar {
    display: none;
    margin: 0 0 14px;
    border-radius: 14px;
    padding: 12px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
body.mt-project-workspace-active #mtProjectWorkspaceBar {
    display: flex;
}
.mt-project-current {
    display: flex;
    flex-direction: column;
    min-width: 170px;
}
.mt-project-current span {
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}
.mt-project-current strong {
    color: #111827;
    font-size: 15px;
}
.mt-project-tool-nav {
    flex: 1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mt-project-tool-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #6d5dfc, #8b5cf6);
    box-shadow: 0 10px 24px rgba(109, 93, 252, .20);
}
@media (max-width: 760px) {
    .mt-project-home { padding: 18px; }
    .mt-project-head,
    .mt-project-workspace-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .mt-project-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}
#wfAddProjectModal .wf-project-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 18px !important;
}
#wfAddProjectModal .wf-project-cancel,
#wfAddProjectModal .wf-project-submit {
    height: 42px !important;
    min-width: 118px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}
#wfAddProjectModal .wf-project-cancel {
    border: 1px solid rgba(16, 19, 24, .12) !important;
    background: #fff !important;
    color: #2b3338 !important;
}
#wfAddProjectModal .wf-project-submit {
    border: 0 !important;
    background: linear-gradient(135deg, #6d5dfc, #7c3aed) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(91, 71, 251, .22) !important;
}
@media (max-width: 680px) {
    #wfAddProjectModal .wf-project-form-grid {
        grid-template-columns: 1fr !important;
    }
}
#workflow-panel .wf-result-panel.drag-doc .wf-result-body,
#workflow-panel .wf-result-panel.drag-active .wf-result-body {
    outline: 2px dashed rgba(91, 71, 251, .72) !important;
    outline-offset: -12px !important;
}
#workflow-panel .wf-result-drop-overlay {
    position: absolute;
    inset: 72px 24px 24px;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border: 1.5px dashed rgba(91, 71, 251, .72);
    border-radius: 12px;
    background: rgba(10, 10, 16, .72);
    color: #fff;
    backdrop-filter: blur(6px);
}
#workflow-panel .wf-result-panel.drag-doc .wf-result-drop-overlay,
#workflow-panel .wf-result-panel.drag-active .wf-result-drop-overlay {
    display: flex;
}
#workflow-panel .wf-result-drop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 28px;
    text-align: center;
}
#workflow-panel .wf-result-drop-icon {
    font-size: 28px;
    line-height: 1;
}
#workflow-panel .wf-result-drop-title {
    font-size: 18px;
    font-weight: 800;
}
#workflow-panel .wf-result-drop-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, .58);
}
#workflow-panel .wf-result-importing {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 24;
    display: none;
    align-items: center;
    gap: 10px;
    transform: translate(-50%, -50%);
    padding: 16px 24px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .32);
    backdrop-filter: blur(8px);
}

/* 工作流角色/场景/道具资产卡：完整预览 + 可编辑生成提示词 */
#workflow-panel .wf-char-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
}
#workflow-panel .wf-char-card {
    text-align: left !important;
    border-radius: 8px !important;
}
#workflow-panel .wf-char-thumb {
    aspect-ratio: 4 / 5 !important;
    cursor: zoom-in !important;
}
#workflow-panel .wf-char-thumb img {
    object-fit: contain !important;
    object-position: center !important;
    background: #fff !important;
}
#workflow-panel .wf-char-info {
    padding: 10px !important;
}
#workflow-panel .wf-asset-prompt-label {
    display: block !important;
    margin: 7px 0 4px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
}
#workflow-panel .wf-asset-prompt-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 7px 0 4px !important;
}
#workflow-panel .wf-asset-prompt-head .wf-asset-prompt-label {
    margin: 0 !important;
}
#workflow-panel .wf-asset-prompt-head .wf-shotlist-expand-btn {
    flex: 0 0 auto !important;
}
#workflow-panel .wf-asset-prompt-input {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 96px !important;
    max-height: 210px !important;
    resize: vertical !important;
    border-radius: 8px !important;
    padding: 8px 9px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    font-family: inherit !important;
}
#workflow-panel .wf-asset-actions {
    display: flex !important;
    gap: 6px !important;
    margin-top: 8px !important;
}
body.ui-polished-creator.day #workflow-panel .wf-asset-prompt-label {
    color: #475569 !important;
}
body.ui-polished-creator.day #workflow-panel .wf-asset-prompt-input {
    border: 1px solid rgba(16, 19, 24, .12) !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-asset-prompt-input:focus {
    border-color: rgba(91, 71, 251, .55) !important;
    box-shadow: 0 0 0 3px rgba(91, 71, 251, .10) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-asset-prompt-input::placeholder {
    color: rgba(91, 104, 113, .56) !important;
}
#workflow-panel .wf-sb-thumb,
#workflow-panel .wf-video-thumb {
    cursor: zoom-in !important;
    background: #05070b !important;
}
#workflow-panel .wf-sb-thumb img,
#workflow-panel .wf-sb-thumb video,
#workflow-panel .wf-video-thumb img,
#workflow-panel .wf-video-thumb video {
    object-fit: contain !important;
    object-position: center !important;
    background: #05070b !important;
}
#workflow-panel .wf-scene-prompt-label {
    display: block !important;
    margin: 7px 0 4px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
}
#workflow-panel .wf-scene-prompt-input {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 90px !important;
    max-height: 210px !important;
    resize: vertical !important;
    border-radius: 8px !important;
    padding: 8px 9px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    font-family: inherit !important;
}
#workflow-panel .wf-video-card {
    border-radius: 8px !important;
}
#workflow-panel .wf-video-title {
    color: rgba(255,255,255,.86);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.ui-polished-creator.day #workflow-panel .wf-scene-prompt-label {
    color: #475569 !important;
}
body.ui-polished-creator.day #workflow-panel .wf-scene-prompt-input {
    border: 1px solid rgba(16, 19, 24, .12) !important;
    background: #f8fafc !important;
    color: #111827 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-scene-prompt-input:focus {
    border-color: rgba(91, 71, 251, .55) !important;
    box-shadow: 0 0 0 3px rgba(91, 71, 251, .10) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-scene-prompt-input::placeholder {
    color: rgba(91, 104, 113, .56) !important;
}
#workflow-panel .wf-shotlist-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}
#workflow-panel .wf-shotlist-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}
#workflow-panel .wf-shotlist-sub {
    margin-top: 4px !important;
    color: rgba(255,255,255,.42) !important;
    font-size: 11px !important;
}
#workflow-panel .wf-shotlist-actions {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}
#workflow-panel .wf-shotlist-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    grid-auto-rows: 1fr !important;
}
#workflow-panel .wf-shotlist-card {
    padding: 16px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.045) !important;
    color: rgba(255,255,255,.78) !important;
    transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: 100% !important;
    min-height: 690px !important;
    box-sizing: border-box !important;
}
#workflow-panel .wf-shotlist-card:hover,
#workflow-panel .wf-shotlist-card.active {
    border-color: rgba(139,118,255,.42) !important;
    background: rgba(255,255,255,.062) !important;
}
#workflow-panel .wf-shotlist-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}
#workflow-panel .wf-shotlist-meta {
    display: grid !important;
    grid-template-columns: 82px minmax(100px, 1fr) minmax(110px, 1fr) auto !important;
    gap: 8px !important;
    align-items: end !important;
    margin-bottom: 0 !important;
}
#workflow-panel .wf-shotlist-meta label,
#workflow-panel .wf-shotlist-fields label {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    color: rgba(255,255,255,.48) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
}
#workflow-panel .wf-shotlist-meta input,
#workflow-panel .wf-shotlist-meta select,
#workflow-panel .wf-shotlist-fields textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 8px !important;
    background: rgba(5,7,11,.7) !important;
    color: rgba(255,255,255,.86) !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    outline: none !important;
}
#workflow-panel .wf-shotlist-meta input,
#workflow-panel .wf-shotlist-meta select {
    height: 34px !important;
    padding: 0 9px !important;
}
#workflow-panel .wf-shotlist-fields {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
#workflow-panel .wf-shotlist-fields textarea {
    min-height: 92px !important;
    max-height: 220px !important;
    resize: vertical !important;
    padding: 8px 9px !important;
}
#workflow-panel .wf-shotlist-fields label.wide {
    grid-column: span 3 !important;
}
#workflow-panel .wf-shotlist-fields label.wide textarea {
    min-height: 112px !important;
}
#workflow-panel .wf-shotlist-field-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
#workflow-panel .wf-shotlist-expand-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(31,32,42,.94) !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
}
#workflow-panel .wf-shotlist-expand-btn[data-keep-icon] {
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
}
#workflow-panel .wf-shotlist-expand-btn[data-keep-icon]::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    display: block;
    background:
        linear-gradient(#f4f1ff,#f4f1ff) 0 0/5px 1.5px no-repeat,
        linear-gradient(#f4f1ff,#f4f1ff) 0 0/1.5px 5px no-repeat,
        linear-gradient(#f4f1ff,#f4f1ff) 100% 0/5px 1.5px no-repeat,
        linear-gradient(#f4f1ff,#f4f1ff) 100% 0/1.5px 5px no-repeat,
        linear-gradient(#f4f1ff,#f4f1ff) 0 100%/5px 1.5px no-repeat,
        linear-gradient(#f4f1ff,#f4f1ff) 0 100%/1.5px 5px no-repeat,
        linear-gradient(#f4f1ff,#f4f1ff) 100% 100%/5px 1.5px no-repeat,
        linear-gradient(#f4f1ff,#f4f1ff) 100% 100%/1.5px 5px no-repeat !important;
}
#workflow-panel .wf-shotlist-expand-btn:hover {
    background: rgba(48,49,62,.98) !important;
    border-color: rgba(139,118,255,.48) !important;
}
#workflow-panel .wf-shotlist-assets-panel {
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding-top: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 286px !important;
    min-height: 286px !important;
    max-height: 286px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
#workflow-panel .wf-shotlist-asset-caption {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    color: rgba(255,255,255,.54) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
}
#workflow-panel .wf-shot-asset-refs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    align-items: stretch !important;
}
#workflow-panel .wf-shot-asset-group {
    min-width: 0 !important;
    padding: 9px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
#workflow-panel .wf-shot-asset-group-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    margin-bottom: 8px !important;
}
#workflow-panel .wf-shot-asset-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important;
    gap: 7px !important;
    flex: 1 1 auto !important;
    align-content: start !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding-right: 3px !important;
    grid-auto-rows: 102px !important;
}
#workflow-panel .wf-shot-asset-list::-webkit-scrollbar {
    width: 5px !important;
}
#workflow-panel .wf-shot-asset-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
}
#workflow-panel .wf-shot-asset-mini,
#workflow-panel .wf-shot-asset-add {
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
    border-radius: 8px !important;
    border: 1px dashed rgba(255,255,255,.16) !important;
    background: rgba(5,7,11,.58) !important;
    color: rgba(255,255,255,.78) !important;
    overflow: hidden !important;
}
#workflow-panel .wf-shot-asset-mini {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    border-style: solid !important;
}
#workflow-panel .wf-shot-asset-thumb {
    position: relative !important;
    height: 64px !important;
    background: rgba(255,255,255,.055) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
#workflow-panel .wf-shot-asset-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
#workflow-panel .wf-shot-asset-thumb span {
    font-size: 22px !important;
    opacity: .42 !important;
}
#workflow-panel .wf-shot-asset-name {
    padding: 6px 7px 4px !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    color: rgba(255,255,255,.9) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
#workflow-panel .wf-shot-asset-actions {
    display: flex !important;
    gap: 4px !important;
    padding: 0 6px 6px !important;
}
#workflow-panel .wf-shot-asset-actions button,
#workflow-panel .wf-shot-asset-add {
    cursor: pointer !important;
}
#workflow-panel .wf-shot-asset-actions button {
    flex: 1 !important;
    height: 24px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.07) !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}
#workflow-panel .wf-shot-asset-remove {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 20px !important;
    height: 20px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: rgba(0,0,0,.48) !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 20px !important;
    cursor: pointer !important;
}
#workflow-panel .wf-shot-asset-add {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 102px !important;
    width: 100% !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}
#workflow-panel .wf-shot-asset-add strong {
    font-size: 22px !important;
    line-height: 1 !important;
}
#workflow-panel .wf-shotlist-time {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: rgba(0,229,255,.10) !important;
    border: 1px solid rgba(0,229,255,.20) !important;
    color: rgba(103,232,249,.95) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}
#workflow-panel .wf-shotlist-meta input:focus,
#workflow-panel .wf-shotlist-meta select:focus,
#workflow-panel .wf-shotlist-fields textarea:focus {
    border-color: rgba(139,118,255,.55) !important;
    box-shadow: 0 0 0 3px rgba(91,71,251,.14) !important;
}
#workflow-panel .wf-shotlist-editor-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 7600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(10px) !important;
}
#workflow-panel .wf-shotlist-editor-dialog {
    width: min(920px, 92vw) !important;
    max-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: linear-gradient(180deg, rgba(19,22,31,.98), rgba(9,11,18,.98)) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.46) !important;
    overflow: hidden !important;
}
#workflow-panel .wf-shotlist-editor-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
#workflow-panel .wf-shotlist-editor-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}
#workflow-panel .wf-shotlist-editor-sub {
    margin-top: 4px !important;
    color: rgba(255,255,255,.48) !important;
    font-size: 11px !important;
}
#workflow-panel .wf-shotlist-editor-textarea {
    min-height: 48vh !important;
    max-height: 62vh !important;
    resize: vertical !important;
    margin: 18px !important;
    padding: 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: rgba(5,7,11,.72) !important;
    color: rgba(255,255,255,.9) !important;
    font-size: 13px !important;
    line-height: 1.72 !important;
    outline: none !important;
}
#workflow-panel .wf-shotlist-editor-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 0 18px 18px !important;
}
@media (max-width: 980px) {
    #workflow-panel .wf-shotlist-grid {
        grid-template-columns: 1fr !important;
    }
    #workflow-panel .wf-shotlist-meta,
    #workflow-panel .wf-shotlist-fields,
    #workflow-panel .wf-shot-asset-refs {
        grid-template-columns: 1fr !important;
    }
    #workflow-panel .wf-shotlist-fields label.wide {
        grid-column: auto !important;
    }
}
body.ui-polished-creator.day #workflow-panel .wf-scene-title-input {
    color: #111827 !important;
}
body.ui-polished-creator.day #workflow-panel .wf-card-icon-btn {
    background: #fff !important;
    border-color: rgba(16,19,24,.12) !important;
    color: rgba(16,19,24,.55) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-card-icon-btn:hover {
    border-color: rgba(220,38,38,.35) !important;
    color: #dc2626 !important;
    background: rgba(220,38,38,.06) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-video-card {
    background: #fff !important;
    border: 1px solid rgba(16, 19, 24, .10) !important;
    box-shadow: 0 10px 24px rgba(16,19,24,.04) !important;
}
body.ui-polished-creator.day #workflow-panel .wf-video-title {
    color: #111827 !important;
}

body.ui-polished-creator #text2img-panel .generate-btn,
body.ui-polished-creator #img2img-panel .generate-btn,
body.ui-polished-creator #text2video-panel .generate-btn,
body.ui-polished-creator #img2video-panel .generate-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
}

/* First paint night guard: prevent white flashes before the body theme script runs. */
html.ark-preferred-night,
html.ark-preferred-night body {
    background: #07080d !important;
    color-scheme: dark;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active) {
    --mt-bg: #07080d;
    --mt-ink: #f7f5ff;
    --mt-muted: rgba(231,226,255,.68);
    --mt-line: rgba(255,255,255,.09);
    --mt-line-2: rgba(255,255,255,.14);
    background: #07080d !important;
    color: #f7f5ff !important;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active)::before {
    background:
        radial-gradient(760px 520px at 9% 0%, rgba(126,100,255,.24), transparent 62%),
        radial-gradient(820px 560px at 100% 4%, rgba(28,126,104,.18), transparent 64%),
        linear-gradient(180deg, #10121a 0%, #080a10 48%, #06070b 100%) !important;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active) .main-content {
    background: transparent !important;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active) .sidebar {
    background: linear-gradient(180deg, rgba(13,14,20,.94), rgba(8,9,13,.92)) !important;
    border-right-color: rgba(255,255,255,.08) !important;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active) :is(
    .ark-top-home-btn,
    .tool-btn,
    .ark-balance-widget,
    .ark-points-widget,
    .ark-tools-trigger,
    .btn-secondary
) {
    background: rgba(24,25,33,.78) !important;
    background-color: rgba(24,25,33,.78) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: rgba(247,245,255,.92) !important;
    -webkit-text-fill-color: rgba(247,245,255,.92) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 32px -28px rgba(0,0,0,.92) !important;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active) :is(
    .ark-balance-widget.low,
    .ark-points-widget.low
) {
    background: rgba(80, 24, 28, .52) !important;
    background-color: rgba(80, 24, 28, .52) !important;
    border-color: rgba(248, 113, 113, .38) !important;
    color: #fca5a5 !important;
    -webkit-text-fill-color: #fca5a5 !important;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active) .ark-points-widget.warning {
    background: rgba(92, 50, 16, .50) !important;
    background-color: rgba(92, 50, 16, .50) !important;
    border-color: rgba(251, 191, 36, .36) !important;
    color: #fcd34d !important;
    -webkit-text-fill-color: #fcd34d !important;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active) :is(
    .mt-project-home,
    #workflow-panel.wf-project-home-active,
    #workflow-panel.wf-project-home-active .wf-project-home,
    #workflow-panel .wf-project-home,
    #text2img-panel .t2i-layout,
    #img2img-panel .t2i-layout,
    #text2video-panel .t2i-layout,
    #img2video-panel .t2i-layout
) {
    background:
        radial-gradient(720px 300px at 96% 0%, rgba(23,113,96,.18), transparent 62%),
        radial-gradient(620px 260px at 0% 0%, rgba(129,108,255,.16), transparent 62%),
        linear-gradient(180deg, rgba(35,36,45,.84), rgba(16,17,23,.82)) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 28px 80px -44px rgba(0,0,0,.92) !important;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active) :is(
    .mt-project-card,
    .mt-project-card.add,
    #workflow-panel .wf-project-card,
    #workflow-panel .wf-project-card.add,
    #workflow-panel .wf-project-home-empty
) {
    background: rgba(22,23,30,.78) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f7f5ff !important;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active) :is(
    .page-title,
    .mt-project-title,
    .mt-project-card-title,
    #workflow-panel .wf-project-card-title
) {
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
}
html.ark-preferred-night body.ui-polished-creator:not(.canvas-mode-active) :is(
    .page-subtitle,
    .mt-project-subtitle,
    .mt-project-card-status,
    .mt-project-card-meta,
    #workflow-panel .wf-project-card-meta
) {
    color: rgba(231,226,255,.68) !important;
    -webkit-text-fill-color: rgba(231,226,255,.68) !important;
}

#arkCanvasBootCover {
    display: none;
}
html.ark-canvas-first-paint #arkCanvasBootCover {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: block;
    pointer-events: none;
    background: #08090a;
    opacity: 1;
    transition: opacity .16s ease;
}
html.ark-canvas-first-paint.ark-canvas-first-paint-ready #arkCanvasBootCover {
    opacity: 0;
}