/* --- 全局与字体设置 --- */
body {
    margin: 0;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    font-size: 16px; /* 基准字体大小 */
}

/* --- 容器与布局 --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 15px;
    padding: clamp(15px, 3vw, 30px); /* 响应式内边距 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.simulation-area {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* --- 标题与文本 --- */
h1 {
    text-align: center;
    color: #333;
    margin-bottom: 10px;
    font-size: clamp(1.6rem, 4vw, 2.2rem); /* 响应式字体大小 */
}

.subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 20px;
    font-size: clamp(0.8rem, 2vw, 1rem);
}

/* --- 模拟区域与画布 --- */
#fieldCanvas {
    border: 2px solid #333;
    border-radius: 8px;
    background: #f8f9fa;
    cursor: crosshair;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    flex-grow: 1; /* 占据可用空间 */
    max-width: 100%; /* 防止溢出 */
    height: auto;
    aspect-ratio: 4 / 3; /* 保持画布的宽高比 */
}

/* --- 控制面板 --- */
.controls {
    min-width: 250px;
    flex-shrink: 0; /* 防止控制面板被压缩 */
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.control-group h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.1rem;
    border-bottom: 2px solid #667eea;
    padding-bottom: 5px;
}

/* --- 按钮样式 --- */
button {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0.7;
}

button.active {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

button:not(.active):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    opacity: 0.9;
}

.btn-positive { background: #ff6b6b; color: white; }
.btn-negative { background: #4ecdc4; color: white; }
.btn-clear, .btn-toggle { opacity: 1; }
.btn-clear { background: #95a5a6; color: white; }
.btn-toggle { background: #f39c12; color: white; }


/* --- 其他UI元素 --- */
.checkbox-group { display: flex; align-items: center; margin: 10px 0; }
.checkbox-group input { margin-right: 8px; }
.checkbox-group label { user-select: none; }

.info-panel { background: #e8f4f8; padding: 15px; border-radius: 5px; margin-top: 20px; border-left: 4px solid #667eea; }
.charge-info { font-size: 0.8rem; color: #666; margin-top: 10px; }

.legend { display: flex; flex-wrap: wrap; justify-content: space-around; margin-top: 15px; font-size: 0.8rem; }
.legend-item { display: flex; align-items: center; gap: 5px; padding: 2px 5px; }
.legend-color { width: 15px; height: 3px; border-radius: 2px; }
.field-line { background: #0066cc; }
.equipotential { background: #ff9900; }
.positive-charge { background: #ff6b6b; }
.negative-charge { background: #4ecdc4; }

/* --- 页脚 --- */
footer {
    text-align: center;
    padding: 20px 10px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.75rem, 2vw, 0.9rem);
}

/* --- 响应式设计 --- */
@media (max-width: 768px) {
    body {
        padding: 10px; /* 减小移动端边距 */
    }

    .simulation-area {
        flex-direction: column;
    }
    
    #fieldCanvas {
        width: 100%;
        height: auto; /* 高度自动，由aspect-ratio决定 */
    }

    .controls {
        width: 100%;
        min-width: unset; /* 取消最小宽度 */
        box-sizing: border-box; /* 确保padding不影响总宽度 */
    }
}