/* ============================================================
   Sora视频生成平台 - 主页面亮度优化
   优化任务卡片、输入框、导航的对比度和可读性
   版本：1.0
   日期：2026-01-22
   ============================================================ */

/* ========== 任务创建区域提亮 ========== */
.create-task-box {
    background: linear-gradient(145deg,
        rgba(30, 38, 58, 1),
        rgba(20, 28, 46, 1)) !important; /* 提亮卡片背景 */
    border: 1px solid rgba(102, 126, 234, 0.2) !important; /* 添加霓虹边框 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                0 0 25px rgba(249, 115, 22, 0.08) !important; /* 橙色微光 */
    backdrop-filter: blur(10px);
}

.create-task-box:hover {
    border-color: rgba(102, 126, 234, 0.35) !important;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5),
                0 0 35px rgba(249, 115, 22, 0.12) !important;
}

/* 标题增强 */
.create-task-box h2 {
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(249, 115, 22, 0.3) !important;
}

.create-task-box h2 i {
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.5));
}

/* ========== 输入框提亮和增强 ========== */
.form-group input,
.form-group textarea,
.form-group select,
.param-group select {
    background: rgba(30, 35, 50, 0.95) !important; /* 更亮的输入框背景 */
    color: #e0e0e0 !important; /* 更亮的文字 */
    border: 2px solid rgba(102, 126, 234, 0.25) !important; /* 霓虹边框 */
    transition: all 0.2s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #a0a0a0 !important; /* 更明显的placeholder */
}

/* 聚焦状态增强 */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.param-group select:focus {
    background: rgba(35, 40, 60, 1) !important; /* 聚焦时更亮 */
    border-color: rgba(249, 115, 22, 0.6) !important; /* 橙色霓虹边框 */
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15),
                0 0 20px rgba(249, 115, 22, 0.3) !important; /* 橙色外发光 */
}

/* 图标颜色增强 */
.param-group label i {
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.4));
}

/* ========== 任务卡片大幅提亮 ========== */
.task-card {
    background: linear-gradient(145deg,
        rgba(35, 43, 65, 1),
        rgba(25, 33, 55, 1)) !important; /* 提亮任务卡片 */
    border: 1px solid rgba(102, 126, 234, 0.25) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.task-card:hover {
    background: linear-gradient(145deg,
        rgba(40, 48, 75, 1),
        rgba(30, 38, 65, 1)) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(249, 115, 22, 0.2) !important; /* 橙色发光 */
    transform: translateY(-4px);
}

/* 任务标题增强 */
.task-title {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.2);
}

/* 任务提示词增强 */
.task-prompt {
    color: #d0d0d0 !important; /* 更亮的提示词文字 */
}

/* 任务时间增强 */
.task-time {
    color: #b0b0b0 !important;
}

/* ========== 状态徽章增强 ========== */
.task-status {
    font-weight: 600 !important;
    border: 1px solid;
    box-shadow: 0 0 10px currentColor;
}

.task-status.pending {
    background: rgba(249, 115, 22, 0.25) !important;
    color: #ffa855 !important;
    border-color: rgba(249, 115, 22, 0.5);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
}

.task-status.queued {
    background: rgba(79, 172, 254, 0.25) !important;
    color: #5fb8ff !important;
    border-color: rgba(79, 172, 254, 0.5);
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.4);
}

.task-status.processing {
    background: rgba(139, 92, 246, 0.25) !important;
    color: #a78bfa !important;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}

.task-status.completed {
    background: rgba(67, 233, 123, 0.25) !important;
    color: #4ef98f !important;
    border-color: rgba(67, 233, 123, 0.5);
    box-shadow: 0 0 12px rgba(67, 233, 123, 0.4);
}

.task-status.failed {
    background: rgba(245, 87, 108, 0.25) !important;
    color: #ff6b7f !important;
    border-color: rgba(245, 87, 108, 0.5);
    box-shadow: 0 0 12px rgba(245, 87, 108, 0.4);
}

.task-status.enhancing {
    background: rgba(240, 147, 62, 0.25) !important;
    color: #ffa855 !important;
    border-color: rgba(240, 147, 62, 0.5);
    box-shadow: 0 0 12px rgba(240, 147, 62, 0.4);
}

/* ========== 进度条增强 ========== */
.progress-bar {
    background: rgba(30, 35, 50, 0.8) !important;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.progress-fill {
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.5) !important; /* 增强发光 */
}

/* ========== 导航标签增强 ========== */
.nav-item {
    background: rgba(30, 35, 50, 0.8) !important;
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
    color: #c0c0c0 !important;
    transition: all 0.2s;
}

.nav-item:hover {
    background: rgba(40, 45, 65, 0.9) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
    color: #ffffff !important;
}

.nav-item.active {
    border-color: rgba(249, 115, 22, 0.6) !important;
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.35),
                0 0 25px rgba(249, 115, 22, 0.2) !important; /* 增强橙色发光 */
}

/* ========== 按钮增强 ========== */
.btn-primary {
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4),
                0 0 25px rgba(249, 115, 22, 0.25) !important; /* 增强橙色发光 */
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 30px rgba(249, 115, 22, 0.5),
                0 0 35px rgba(249, 115, 22, 0.3) !important;
}

.btn-outline {
    background: rgba(30, 35, 50, 0.6) !important;
    border: 2px solid rgba(249, 115, 22, 0.4) !important;
    color: #ffa855 !important;
}

.btn-outline:hover {
    background: rgba(249, 115, 22, 0.15) !important;
    border-color: rgba(249, 115, 22, 0.6) !important;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

.btn-outline.active {
    border-color: rgba(249, 115, 22, 0.7) !important;
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
}

/* ========== 标签按钮增强 ========== */
.tab-btn {
    background: rgba(30, 35, 50, 0.7) !important;
    border: 2px solid rgba(102, 126, 234, 0.25) !important;
    color: #c0c0c0 !important;
}

.tab-btn:hover {
    border-color: rgba(249, 115, 22, 0.5) !important;
    background: rgba(35, 40, 55, 0.8) !important;
}

.tab-btn.active {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4),
                0 0 20px rgba(249, 115, 22, 0.3) !important;
}

/* ========== 模态框增强 ========== */
.modal-content {
    background: linear-gradient(145deg,
        rgba(35, 43, 65, 0.98),
        rgba(25, 33, 55, 0.98)) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7),
                0 0 40px rgba(102, 126, 234, 0.15) !important;
    backdrop-filter: blur(20px);
}

.modal-header {
    border-bottom: 1px solid rgba(102, 126, 234, 0.25) !important;
}

.modal-header h3 {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.3);
}

.modal-body {
    color: #e0e0e0 !important;
}

/* ========== 视频预览增强 ========== */
.video-preview {
    border: 2px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(102, 126, 234, 0.2) !important;
}

.video-preview:hover {
    border-color: rgba(249, 115, 22, 0.5) !important;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(249, 115, 22, 0.2) !important;
}

/* ========== Toast通知增强 ========== */
.toast {
    background: linear-gradient(145deg,
        rgba(40, 48, 75, 0.98),
        rgba(30, 38, 65, 0.98)) !important;
    border: 1px solid rgba(102, 126, 234, 0.35) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(102, 126, 234, 0.2) !important;
    backdrop-filter: blur(15px);
    color: #ffffff !important;
}

.toast.success {
    border-color: rgba(67, 233, 123, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(67, 233, 123, 0.2) !important;
}

.toast.error {
    border-color: rgba(245, 87, 108, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(245, 87, 108, 0.2) !important;
}

/* ========== 响应式优化 ========== */
@media (max-width: 768px) {
    .task-card {
        padding: 16px !important;
    }

    .create-task-box {
        padding: 20px !important;
    }
}

/* ========== 性能优化 ========== */
.task-card,
.create-task-box,
.modal-content {
    transform: translateZ(0);
    will-change: auto;
}

/* 字体渲染优化 */
.task-card,
.create-task-box,
.nav-item {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}