/* ========================================== */
/* --- 基础与全局滚动配置 --- */
/* ========================================== */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; 
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); 
    min-height: 100vh; margin: 0; color: #2c3e50; 
    padding: 90px 40px 60px 40px; /* 顶部留出 90px 防止挤压 */
    box-sizing: border-box; 
    overflow-y: auto; overflow-x: hidden; letter-spacing: 0.02em; 
}

#petal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.petal { position: absolute; background-color: rgba(255, 255, 255, 0.4); border-radius: 15px 0px 15px 0px; animation: fall linear infinite; }
@keyframes fall { 0% { top: -10%; transform: translateX(0) rotate(0deg); opacity: 0.8; } 100% { top: 110%; transform: translateX(150px) rotate(360deg); opacity: 0.1; } }

/* ========================================== */
/* --- 顶部控制区 --- */
/* ========================================== */
.top-controls { position: fixed; top: 20px; right: 40px; display: flex; gap: 15px; z-index: 100; }
.mini-lang-btn, .score-board { 
    background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); 
    border: 1px solid rgba(255,255,255,0.6); border-radius: 20px; 
    font-weight: bold; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.mini-lang-btn { padding: 6px 14px; color: #a18cd1; }
.score-board { padding: 8px 20px; color: #f39c12; font-size: 16px; border-radius: 30px; }
.mini-lang-btn:hover, .score-board:hover { transform: translateY(-2px); }

/* ========================================== */
/* --- 全局布局 --- */
/* ========================================== */
.main-layout { display: grid; grid-template-columns: 550px 1fr; gap: 35px; width: 100%; max-width: 1700px; margin: 0 auto; position: relative; z-index: 1; }
.left-column { display: flex; flex-direction: column; gap: 25px; }
.dashboard-panel { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 24px; padding: 30px; box-shadow: 0 12px 40px rgba(0,0,0,0.06); }

/* ========================================== */
/* --- 标题与输入组件 --- */
/* ========================================== */
.header-section { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid rgba(161, 140, 209, 0.1); padding-bottom: 15px; margin-bottom: 20px; }
h2, h3 { margin: 0 0 18px 0; color: #333; } /* 增加呼吸感 */
.header-section h2 { margin: 0; } /* 特例修正 */

.input-group { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
input[type="text"], input[type="date"], input[type="number"], input[type="time"], select { 
    padding: 12px 15px; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; 
    background: rgba(255,255,255,0.8); outline: none; font-size: 14px; transition: 0.3s;
}
input:focus, select:focus { border-color: #a18cd1; box-shadow: 0 0 0 3px rgba(161, 140, 209, 0.1); }
button { padding: 12px 20px; background-color: #a18cd1; color: white; border: none; border-radius: 12px; cursor: pointer; font-weight: bold; transition: 0.3s; }
button:hover { background-color: #8e74c9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(161, 140, 209, 0.3); }
.drag-hint { font-size: 12px; color: #8e8e93; margin-bottom: 15px; }

/* ========================================== */
/* --- 任务卡片与长期项目 --- */
/* ========================================== */
ul { padding: 0; margin: 0; list-style: none; }
li { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.8); margin-bottom: 15px; border-radius: 16px; padding: 20px; border-left: 6px solid #a18cd1; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: 0.3s; }
li:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.05); }

.project-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.project-title-group { display: flex; justify-content: space-between; align-items: center; flex: 1; margin-right: 15px; }
.project-title { font-weight: bold; font-size: 16px; }
.ddl-badge { font-size: 12px; background: rgba(161, 140, 209, 0.1); color: #8e74c9; padding: 5px 12px; border-radius: 8px; font-weight: bold; }
.btn-delete-icon { background: none; border: none; padding: 0; color: #e74c3c; cursor: pointer; opacity: 0.5; font-size: 16px; box-shadow: none;}
.btn-delete-icon:hover { opacity: 1; background: none; transform: scale(1.1); box-shadow: none;}

.progress-container { background: #eff1f3; height: 8px; border-radius: 10px; overflow: hidden; margin: 12px 0; }
.progress-bar { height: 100%; transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.project-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.btn-push { background: linear-gradient(135deg, #a18cd1 0%, #8e74c9 100%); color: white; padding: 8px 18px; border-radius: 20px; font-size: 13px; }
.btn-decompose { background: white; color: #a18cd1; border: 1px solid #a18cd1; padding: 6px 12px; font-size: 12px; border-radius: 8px; cursor: pointer; margin-left: 12px; }
.btn-decompose:hover { background: #a18cd1; color: white; }

/* ========================================== */
/* --- 左下角工具栏 --- */
/* ========================================== */
.config-tools { margin-top: 25px; padding-top: 20px; border-top: 1px dashed rgba(161, 140, 209, 0.3); display: flex; flex-direction: column; gap: 12px; }
.tool-group { display: flex; gap: 12px; }
.btn-tool, .btn-tool-small { background: rgba(161, 140, 209, 0.08); color: #8e74c9; border: 1px solid rgba(161, 140, 209, 0.2); border-radius: 12px; font-weight: bold; transition: 0.2s; text-align: center; box-shadow: none; }
.btn-tool { width: 100%; padding: 12px; font-size: 14px; }
.btn-tool-small { flex: 1; padding: 10px; font-size: 13px; }
.btn-tool:hover, .btn-tool-small:hover { background: #a18cd1; color: white; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(161, 140, 209, 0.2); }
.btn-upload { display: flex; justify-content: center; align-items: center; margin: 0; box-sizing: border-box; cursor: pointer;}

/* ========================================== */
/* --- 右侧时间轴 --- */
/* ========================================== */
.timeline-container { position: relative; height: 960px; margin-top: 10px;}
.time-slot { display: flex; border-top: 1px dashed rgba(161, 140, 209, 0.2); height: 60px; box-sizing: border-box; }
.time-label { width: 60px; font-size: 13px; color: #8e74c9; font-weight: bold; text-align: right; padding-right: 15px; padding-top: 5px;}
.drop-zone { flex: 1; border-left: 2px solid rgba(161, 140, 209, 0.1); position: relative; }
.timeline-block { position: absolute; left: 75px; right: 20px; border-radius: 12px; padding: 12px 16px; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.1); z-index: 5; box-sizing: border-box; display:flex; flex-direction:column; line-height: 1.4; overflow: hidden;}
.block-title { font-weight: bold; font-size: 14px; }
.block-time { font-size: 11px; opacity: 0.9; }

/* ========================================== */
/* --- 弹窗组件 (商城 & 设置) --- */
/* ========================================== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); display: flex; justify-content: center; align-items: center; z-index: 10000; }
.modal-overlay.hidden { display: none !important; }
.modal-content { background: rgba(255, 255, 255, 0.95); width: 450px; border-radius: 28px; padding: 35px; position: relative; box-shadow: 0 25px 50px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.6); }
.close-btn { position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.05); color: #888; border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; transition: 0.2s; box-shadow: none; padding: 0;}
.close-btn:hover { background: #ff6b6b; color: white; transform: rotate(90deg); }

.store-grid { display: flex; flex-direction: column; gap: 15px; }
.store-item { display: flex; justify-content: space-between; align-items: center; background: white; padding: 15px 20px; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.item-info { display: flex; align-items: center; gap: 15px; }
.item-name { font-weight: bold; font-size: 15px; }
.item-cost { color: #f39c12; font-size: 13px; font-weight: bold; }
.btn-redeem { background: #f39c12; color: white; padding: 8px 16px; border-radius: 12px; font-size: 13px; }
.btn-redeem:disabled { background: #d1d1d6; box-shadow: none; opacity: 0.6; cursor: not-allowed;}

/* ========================================== */
/* --- 课表排版引擎专属样式 --- */
/* ========================================== */
.settings-content { width: 480px; } /* 加宽适应输入框 */
.settings-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; background: rgba(0,0,0,0.03); padding: 20px; border-radius: 18px; }
.setting-list-header { font-size: 13px; color: #8e8e93; font-weight: bold; margin-bottom: 12px; }
.setting-course-list { max-height: 220px; overflow-y: auto; padding: 0; }
.setting-course-item { display: flex; justify-content: space-between; align-items: center; background: white; padding: 12px 18px; border-radius: 12px; margin-bottom: 10px; border-left: 4px solid #3498db; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }

/* 自定义多选框组样式 */
.custom-days-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: rgba(255,255,255,0.8);
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
}
.custom-days-group label {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #2c3e50;
    font-weight: bold;
}
.custom-days-group input[type="checkbox"] {
    width: auto !important;
    margin: 0;
    cursor: pointer;
    accent-color: #a18cd1; 
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(161, 140, 209, 0.4); border-radius: 10px; }

/* ========================================== */
/* --- 长期目标：动态 DDL 与双动作按钮样式 --- */
/* ========================================== */

/* 动态 DDL 容器（使用透明 Input 覆盖在 Badge 上实现无缝点击） */
.ddl-container { position: relative; display: inline-flex; align-items: center; }
.ddl-input-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ddl-badge.empty { background: transparent; border: 1px dashed #a18cd1; color: #a18cd1; }
.ddl-container:hover .ddl-badge { background: rgba(161, 140, 209, 0.2); transform: translateY(-1px); }

/* 右上角操作区对齐 */
.project-actions { display: flex; gap: 8px; align-items: center; }
.btn-icon { background: none; border: none; padding: 4px; cursor: pointer; border-radius: 6px; transition: 0.2s; font-size: 16px; display: flex; justify-content: center; align-items: center;}
.btn-icon:hover { transform: scale(1.15); }

/* 完成按钮 ✅ */
.btn-complete { filter: grayscale(100%); opacity: 0.6; }
.btn-complete:hover { filter: grayscale(0%); opacity: 1; background: rgba(46, 204, 113, 0.1); }

/* 删除/取消按钮 🗑️ */
.btn-delete { filter: grayscale(100%); opacity: 0.5; }
.btn-delete:hover { filter: grayscale(0%); opacity: 1; background: rgba(231, 76, 60, 0.1); }