body { 
    background-color: #f8f9fa; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
}
.container { 
    margin-top: 2rem; 
    max-width: 1200px; 
}
#chart-container, #kline-chart-container, #weekly-chart-container { 
    width: 100%; 
    min-width: 100%;
    height: 600px; /* Adjusted height */
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease-in-out;
}

.card { 
    border-radius: 0.5rem; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.form-label { 
    font-weight: 500; 
}
.btn-success { 
    background-color: #198754; 
    border-color: #198754; 
}
.alert { 
    padding: 1rem; 
}
#status-message { 
    display: none; 
}
.nav-tabs .nav-link { 
    color: #495057; 
    border-width: 1px 1px 2px 1px;
    border-style: solid;
    border-color: transparent;
    border-top-left-radius: .5rem; 
    border-top-right-radius: .5rem; 
    padding: .75rem 1.25rem; 
    font-weight: 500; 
    transition: all 0.2s ease-in-out;
}
.nav-tabs .nav-link.active { 
    color: #0d6efd; 
    background-color: #ffffff; 
    border-color: #dee2e6 #dee2e6 #0d6efd; 
}
.nav-tabs .nav-link:hover { 
    border-color: #e9ecef #e9ecef #0d6efd; 
}
#query-form { 
    margin-top: 1rem; 
}
#stock-code-input { 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}
#chart-container:hover, #kline-chart-container:hover { 
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); 
}
h1 { 
    color: #343a40; 
    font-weight: 300; 
    letter-spacing: -0.5px; 
}
h5.card-title { 
    font-weight: 600; 
    color: #343a40; 
}
.text-muted { 
    font-size: 0.9rem; 
}
.card-text { 
    color: #6c757d; 
}
.form-control:focus { 
    border-color: #86b7fe; 
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); 
}
.btn { 
    transition: all 0.2s ease-in-out; 
}
.btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}
.tab-content { 
    border: 1px solid #dee2e6; 
    border-top: none; 
    padding: 1.5rem; 
    background-color: #ffffff; 
    border-radius: 0 0 0.5rem 0.5rem; 
}
.tab-pane { 
    animation: fadeIn 0.5s; 
}
@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}
#average-amplitude-container { 
    font-size: 0.95rem; 
    color: #333; 
}
#backtest-chart-container {
    width: 100%;
    height: 480px;
    background-color: #ffffff;
    border-radius: 0.5rem;
}
.metric-card {
    background: #fdfdfd;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.metric-title {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.metric-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #212529;
}
.text-profit {
    color: #ef232a !important; /* 红涨 */
}
.text-loss {
    color: #14b143 !important; /* 绿跌 */
}
.table-trade-records {
    max-height: 320px;
    overflow-y: auto;
}
#optimize-chart-container {
    width: 100%;
    background-color: #ffffff;
    border-radius: 0.5rem;
}
.btn-apply-rec {
    font-size: 0.85rem;
    font-weight: 600;
}