@charset "UTF-8";

/* 1. 页面最大宽度限制与居中 */
.main-container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

/* 2. 确保所有基础按钮自身水平居中 */
.center-block-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* 按钮文字加大 */
.category-btn, .btn {
    font-size: 1.15rem !important; 
    padding: 8px 16px !important;
    margin: 6px !important;
    display: inline-block !important;
}

/* 3. 分类块级独立与完全居中 */
.category-block {
    width: 100% !important;
    margin-bottom: 20px !important;
}

.category-label {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #212529 !important;
    display: block !important;     
    width: 100% !important;
    margin-bottom: 12px !important;
}

/* 选项按钮横向一字排开且整体绝对抱紧居中 */
.buttons-wrapper {
    display: flex !important;
    flex-direction: row !important;     
    flex-wrap: wrap !important;         
    justify-content: center !important; 
    align-items: center !important;
    width: 100% !important;
}

/* 4. 图片显示限制大小，最大宽度限制为 400px，且 block 居中 */
#imagePreview { 
    max-width: 400px !important;  
    width: 100% !important;        
    height: auto !important;       
    object-fit: contain !important; 
    display: block !important;
    margin: 0 auto !important;     
}

/* 5. 100% 均分两列 Grid 网格（每列精确占 50%）。因为有 6 个格子，它会自动向下排成 3 行 */
.grid-layout-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; 
    gap: 20px 24px !important;                 /* 💡 稍微压缩了一下行间距(20px)，防止页面拉得过长 */     
    width: 100% !important;
    box-sizing: border-box !important;
}

.grid-item {
    width: 100% !important;
    text-align: left !important;               
}

/* 输入框文字样式：加粗、加大，彻底禁止拉伸 */
.content-textarea { 
    resize: none !important; 
    font-size: 1.15rem !important;  
    font-weight: 700 !important;     
    line-height: 1.6 !important;                
    width: 100% !important;                     
    transition: all 0.2s ease-in-out;
}

/* 标签文字加大加粗 */
.role-label {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* 锁定状态样式 */
.content-textarea[readonly] {
    background-color: #f8f9fa !important;
    border: 2px dashed #ced4da !important;
    cursor: not-allowed !important;
    color: #212529 !important; 
}

/* 解锁状态样式 */
.content-textarea:not([readonly]) {
    background-color: #ffffff !important;
    border: 2px solid #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    color: #000000;
}

/* 自适应内容区域内衬 */
.content-area-wrapper { 
    padding: 25px !important; 
    background: #fff !important; 
    width: 100% !important; 
}