/* =========================================

   1. 基础变量与全局设置

   ========================================= */

:root {

    --primary-color: #6a5acd;

    --primary-color-rgb: 106, 90, 205; /* 主题色RGB值，用于透明度调整 */

    --secondary-color: #9370db;

    --light-color: #f0f8ff;

    --dark-color: #483d8b;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



/* 全局字体设置*/

body {

    font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;

    font-size: 22px; 

    line-height: 1.6;

    background: #f5f7fa;

    color: #333;

}



/* 强制所有表单元素继承大字体 */

input, textarea, button, select, label {

    font-family: inherit;

    font-size: 18px !important;

}



/* =========================================

   2. 布局容器

   ========================================= */

.oc-sheet-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 20px;

}



.oc-sheet-tabs {

    display: flex;

    margin-bottom: 20px;

    border-bottom: 2px solid #dee2e6;

    background: white;

    border-radius: 10px 10px 0 0;

    padding: 0 20px;

}



.tab-button {

    background: none;

    border: none;

    padding: 15px 25px;

    font-size: 18px;

    cursor: pointer;

    border-bottom: 3px solid transparent;

    transition: all 0.3s ease;

    font-weight: 600;

    color: #666;

}



.tab-button.active {

    border-bottom-color: var(--primary-color);

    color: var(--primary-color);

    font-weight: 700;

    background: rgba(var(--primary-color-rgb), 0.1);

}



.tab-content {

    display: none;

}



.tab-content.active {

    display: block;

}



/* 主表格包装 */

.oc-sheet-wrapper {

    background-color: white;

    border-radius: 0 0 10px 10px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.08);

    overflow: hidden; /* 导出时可能需要覆盖此属性 */

    display: grid;

}



/* 头部样式 */

.header {

    grid-column: 1 / -1;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    padding: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

}



.header h1 {

    font-size: 36px;

    font-weight: 800;

    margin: 0;

    text-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



/* 表格主体两列布局 */

.sheet-container {

    grid-column: 1 / -1;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0;

    min-height: 800px;

}



.left-column {

    padding: 30px;

    border-right: 2px solid #f1f3f4;

    background: var(--light-color);

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.right-column {

    padding: 30px;

    background: var(--light-color);

    display: flex;

    flex-direction: column;

    gap: 30px;

}



/* =========================================

   3. 通用组件样式

   ========================================= */



/* 区块卡片 */

.section {

    background: white;

    border-radius: 12px;

    padding: 25px;

    box-shadow: 0 2px 12px rgba(0,0,0,0.06);

    border: 1px solid #e9ecef;

    transition: all 0.3s ease;

}



.section:hover {

    box-shadow: 0 4px 20px rgba(0,0,0,0.1);

}



.section-title {

    font-size: 24px;

    font-weight: 800;

    margin-bottom: 20px;

    color: var(--dark-color);

    padding-bottom: 12px;

    border-bottom: 3px solid var(--primary-color);

}



/* 所有标签加粗 */

label, 

.trait-name, 

.diet-label, 

.happiness-label, 

.personality-label-left, 

.personality-label-right {

    font-weight: 700 !important;

    color: #444;

    font-size: 18px !important;

}



/* 输入框通用样式 - 加大 */

.sheet-field,

.impression-text, 

.social-evaluation,

.weapon-skills textarea,

.disease-input,

.radar-input-item input,

.likes-item input, 

.dislikes-item input,

.creator-item input,

input[type="text"],

input[type="number"],

textarea {

    background: rgba(var(--primary-color-rgb), 0.05) !important;

    border: 2px solid #dcdfe6 !important;

    border-radius: 8px !important;

    padding: 12px 15px !important;

    font-size: 18px !important;

    transition: all 0.3s ease !important;

    width: 100% !important;

    box-sizing: border-box !important;

    color: #000 !important; /* 确保黑色字体 */

    font-family: inherit !important;

    line-height: 1.5 !important;

    min-height: 50px;

    

    /* 换行设置 */

    white-space: pre-wrap;

    word-wrap: break-word;

    overflow-wrap: break-word;

    resize: vertical;

}



textarea {

    min-height: 120px !important;

}



.sheet-field:focus {

    border-color: var(--primary-color) !important;

    outline: none !important;

    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1) !important;

    background: rgba(var(--primary-color-rgb), 0.08) !important;

}



/* =========================================

   4. 具体功能区样式

   ========================================= */



/* 主题选择器 */

.theme-selector {

    display: flex;

    gap: 12px;

    align-items: center;

    flex-wrap: wrap;

    background: rgba(255,255,255,0.2);

    padding: 15px;

    border-radius: 8px;

}



.theme-color {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    cursor: pointer;

    border: 3px solid transparent;

    transition: transform 0.3s ease;

}



.theme-color.active {

    border-color: white;

    transform: scale(1.1);

}



.custom-color-input, .custom-light-color-input {

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 500;

}



.custom-color-input input, .custom-light-color-input input {

    width: 40px;

    height: 40px;

    padding: 2px !important;

    min-height: auto;

}



/* 按钮样式 */

.export-btn, .save-btn, .export-text-btn, .import-btn {

    background: rgba(255,255,255,0.25);

    color: white;

    border: 2px solid rgba(255,255,255,0.6);

    padding: 10px 20px;

    border-radius: 6px;

    cursor: pointer;

    font-weight: 700;

    font-size: 16px; /* 按钮字稍微小一点点以免太挤 */

    margin-left: 10px;

    transition: all 0.2s;

}



.export-btn:hover, .save-btn:hover {

    background: rgba(255,255,255,0.4);

    transform: translateY(-2px);

}



/* 头像区域 */

.avatar-area {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}



.avatar-preview {

    width: 200px;

    height: 200px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border: 5px solid var(--primary-color);

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

}



.avatar-preview img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.avatar-upload { display: none; }



.upload-btn {

    background: var(--primary-color);

    color: white;

    padding: 12px 25px;

    border-radius: 30px;

    cursor: pointer;

    font-weight: 700;

    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);

    text-align: center;

    display: inline-block;

}



/* 个人信息 */

.personal-info {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.info-item {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



/* 特质星星 */

.traits-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

}



.trait-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

    border-bottom: 1px solid #f1f3f4;

}



.trait-stars {

    display: flex;

    gap: 8px;

}



.star {

    width: 28px;

    height: 28px;

    background: #e9ecef;

    border-radius: 4px;

    cursor: pointer;

}



.star.filled {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.3);

}



/* 性格滑块 - 重点优化 */

.personality-container {

    display: flex;

    flex-direction: column;

    gap: 25px;

    padding: 10px 0;

}



.personality-item {

    display: flex;

    align-items: center;

    gap: 15px;

}



.personality-label-left,

.personality-label-right {

    min-width: 80px;

    text-align: center;

    padding: 8px 12px;

    background: white;

    border: 2px solid #e9ecef;

    border-radius: 8px;

}



.personality-bar-container {

    flex: 1;

    height: 40px;

    display: flex;

    align-items: center;

    position: relative;

}



.personality-bar {

    width: 100%;

    height: 14px;

    background: linear-gradient(to right, 

        rgba(255, 107, 107, 0.3), 

        rgba(var(--primary-color-rgb), 0.6), 

        rgba(29, 209, 161, 0.3));

    border-radius: 7px;

    position: relative; /* 关键：相对定位 */

    cursor: pointer;

    border: 2px solid #e9ecef;

}



.personality-indicator {

    position: absolute;

    width: 28px;

    height: 28px;

    background: white;

    border: 4px solid var(--primary-color);

    border-radius: 50%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%); /* 居中对齐 */

    cursor: grab;

    z-index: 10;

    box-shadow: 0 3px 8px rgba(0,0,0,0.2);

}



/* 雷达图 */

.radar-container, .taste-radar-container {

    background: transparent !important;

    border: 2px solid #e9ecef;

    border-radius: 12px;

    width: 100%;

    height: 350px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 20px;

}



.radar-inputs {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    background: rgba(var(--primary-color-rgb), 0.05);

    padding: 20px;

    border-radius: 12px;

}



.radar-input-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

}



.radar-input-item input {

    text-align: center;

    font-weight: 700;

}



#taste-radar-container .radar-inputs {

    grid-template-columns: repeat(5, 1fr);

}



/* 幸福度与饮食进度条 */

.happiness-item, .diet-item {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 15px;

}



.happiness-label, .diet-label {

    width: 100px;

}



.happiness-bar, .diet-bar {

    flex: 1;

    height: 26px;

    background: #e9ecef;

    border-radius: 13px;

    position: relative;

    cursor: pointer;

    border: 2px solid #dee2e6;

    overflow: hidden;

}



.happiness-fill, .diet-fill {

    height: 100%;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    width: 50%;

    transition: width 0.3s ease;

}



/* 喜欢/讨厌 */

.likes-dislikes {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-bottom: 20px;

}



/* 疾病/状态 */

.disease-container {

    display: flex;

    flex-direction: row;

    gap: 30px;

    align-items: flex-start;

}



.disease-column {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.checkbox-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px;

    background: rgba(var(--primary-color-rgb), 0.05);

    border-radius: 8px;

    border: 1px solid #e9ecef;

    cursor: pointer;

}



.checkbox-item input[type="checkbox"] {

    width: 24px;

    height: 24px;

    accent-color: var(--primary-color);

}



.disease-details {

    display: none;

    margin-top: 10px;

}



.disease-details.visible {

    display: block;

}



/* 制表人 */

.creator-info {

    display: flex;

    justify-content: space-between;

    margin-top: 40px;

    padding: 30px;

    background: #fff;

    border-radius: 12px;

    border: 2px solid #e9ecef;

}



/* =========================================

   5. 导出优化专用样式 (Export Optimize)

   ========================================= */

.export-optimize {

    width: 1400px !important; /* 强制宽度 */

    background: white !important;

    padding: 40px !important;

    position: absolute;

    left: 0;

    top: 0;

    z-index: -1000;

}



/* 隐藏所有导出时不需要的元素 */

.export-optimize .theme-selector,

.export-optimize .radar-inputs,

.export-optimize .save-btn,

.export-optimize .export-btn,

.export-optimize .export-text-btn,

.export-optimize .import-btn,

.export-optimize .avatar-upload,

.export-optimize .upload-btn,

.export-optimize input[type="file"],

.export-optimize button {

    display: none !important;

}



/* 强制重置被 JS 替换后的文本 div 样式 */

.export-optimize .replaced-text-div {

    display: block;

    width: 100%;

    height: auto !important; /* 允许高度自适应，解决截断问题 */

    min-height: 50px;

    white-space: pre-wrap !important; /* 保留换行 */

    word-wrap: break-word !important; /* 单词换行 */

    overflow: visible !important;

    

    background: rgba(var(--primary-color-rgb), 0.05) !important;

    border-radius: 8px;

    padding: 12px 15px;

    

    /* 字体颜色强制黑色 */

    color: #000000 !important;

    -webkit-text-fill-color: #000000 !important;

    font-size: 18px !important;

    font-weight: 500;

    line-height: 1.5;

    border: none;

}



/* 强制父容器高度自适应，防止内容溢出被切 */

.export-optimize .info-item,

.export-optimize .likes-item,

.export-optimize .dislikes-item,

.export-optimize .section,

.export-optimize .disease-details {

    height: auto !important;

    overflow: visible !important;

}



/* 确保雷达图背景在导出时透明 */

.export-optimize .radar-container,

.export-optimize .taste-radar-container {

    background: transparent !important;

    border: none;

}



/* 确保滑块条定位基准 */

.export-optimize .personality-bar {

    position: relative !important;

    background: linear-gradient(to right, 

        rgba(255, 107, 107, 0.3), 

        rgba(var(--primary-color-rgb), 0.6), 

        rgba(29, 209, 161, 0.3)) !important;

    -webkit-print-color-adjust: exact;

}



/* 列表与加载动画 */

.character-list { padding: 30px; background: white; border-radius: 12px; }

.character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; }

.character-card { border: 2px solid #e9ecef; border-radius: 12px; overflow: hidden; background: white; }

.character-avatar { height: 220px; background: #eee; display: flex; align-items: center; justify-content: center; }

.character-info { padding: 20px; }

.character-actions { display: flex; gap: 10px; margin-top: 15px; }

.character-actions button { flex: 1; font-size: 16px; padding: 8px; }



.ocs-loading {

    position: fixed; top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(0,0,0,0.8); z-index: 9999;

    display: flex; flex-direction: column; align-items: center; justify-content: center;

}

.loading-spinner {

    width: 60px; height: 60px;

    border: 5px solid rgba(255,255,255,0.3);

    border-top-color: var(--primary-color);

    border-radius: 50%;

    animation: spin 1s linear infinite;

    margin-bottom: 20px;

}

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



/* 响应式 */

@media (max-width: 1200px) {

    .sheet-container { grid-template-columns: 1fr; }

    .left-column { border-right: none; border-bottom: 2px solid #eee; }

}

@media (max-width: 768px) {

    .header { flex-direction: column; text-align: center; }

    .personal-info, .traits-container, .likes-dislikes { grid-template-columns: 1fr; }

    .disease-container { flex-direction: column; }

    .radar-inputs { grid-template-columns: 1fr 1fr; }

    #taste-radar-container .radar-inputs { grid-template-columns: 1fr 1fr 1fr; }

}