/**
 * 项目面板主样式
 * 定义项目面板的基础样式和CSS变量
 * 使用 review- 前缀确保样式独立
 */

/* CSS变量定义 */
:root {
    /* 项目面板专用颜色变量 */
    --review-bg-primary: var(--bg-card, #0d0d0d);
    --review-bg-secondary: #0d0d0d;
    --review-text-primary: rgba(255, 255, 255, 0.92);
    --review-text-secondary: rgba(255, 255, 255, 0.68);
    /* 对齐 AI 创作面板的暗色边框表现 */
    --review-border-color: rgba(255, 255, 255, 0.08);
    
    /* 项目面板专用间距变量 */
    --review-spacing-xs: var(--spacing-xs, 4px);
    --review-spacing-sm: var(--spacing-sm, 8px);
    --review-spacing-md: var(--spacing-md, 16px);
    --review-spacing-lg: var(--spacing-lg, 24px);
    --review-spacing-xl: var(--spacing-xl, 32px);
    
    /* 项目面板专用圆角变量 */
    --review-radius-sm: var(--radius-sm, 4px);
    --review-radius-md: var(--radius-md, 8px);
    --review-radius-lg: var(--radius-lg, 12px);
}

/* 项目面板主容器 */
/* 注意：display 属性由 .panel-content 和 .panel-content.active 控制，这里不设置 */
#review-panel {
    width: 100%;
    height: 100%;
    /* display 由父元素 .panel-content 控制，确保面板切换时能正确隐藏 */
    flex-direction: column;
    background-color: var(--review-bg-primary);
    color: var(--review-text-primary);
    font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", "Arial", sans-serif;
}

/* 只有在激活状态时才设置 flex 布局 */
.panel-content.active#review-panel {
    display: flex;
}

#review-panel-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 审核面板整体壳层：对齐 AI 创作面板深色容器 */
#review-panel .content-area {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

#review-panel .content-area:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* 确保项目面板样式不影响其他面板 */
#review-panel * {
    box-sizing: border-box;
}