/* 全局 Grid 布局 */
:root {
    --primary: #2563eb;
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --text-main: #1e293b;
    --border: #e2e8f0;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-page);
    color: var(--text-main);
    margin: 0;
    overflow-x: hidden;
}

.app-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 20px;
}

.header-content h1 {
    margin: 0;
    font-size: 1.4rem;
    letter-spacing: 0.2px;
}

.header-content p {
    margin: 6px 0 0 0;
    color: #64748b;
    font-size: 0.95rem;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* 顶部输入区 */
.control-panel {
    background: var(--bg-card);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.input-wrapper { flex: 2; min-width: 300px; }
.settings-wrapper { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 15px; }

/* MathLive 输入框样式定制 */
math-field {
    font-size: 1.5rem;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    width: 100%;
    background: #fff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
math-field:focus-within {
    outline: 2px solid var(--primary);
    border-color: transparent;
}

/* 图表网格 */
.charts-grid {
    display: grid;
    /* 防止移动端因 min-width 过大导致横向溢出 */
    grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
    gap: 20px;
    margin-top: 20px;
}

.chart-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.plot-container {
    width: 100%;
    height: 400px; /* 必须给高度，否则 Plotly 塌陷 */
}

@media (max-width: 640px) {
    .container { padding: 12px; }
    .control-panel { padding: 16px; gap: 14px; }
    .charts-grid { grid-template-columns: 1fr; gap: 14px; }
    .plot-container { height: 320px; }
}

@media (max-width: 420px) {
    .plot-container { height: 280px; }
}