.compound-card{
background:#fff;
border:1px solid #e8edf5;
border-radius:24px;
padding:24px;
margin:26px 0 30px;
box-shadow:0 8px 20px rgba(16,24,40,.05);
}

.compound-card h3,
.compound-chart-box h3{
font-size:1.48rem;
line-height:1.42;
font-weight:900;
color:#101828;
margin:0 0 20px;
}

.compound-preset{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-bottom:20px;
}

.compound-preset button{
min-height:48px;
padding:10px 12px;
font-size:.98rem;
line-height:1.35;
border-radius:14px;
background:#f4faff;
color:#2563eb;
border:1px solid #dceeff;
font-weight:900;
}

.compound-preset button:hover{
background:#2563eb;
color:#fff;
}

.compound-select{
width:100%;
height:64px;
border:1px solid #d9e4f2;
border-radius:16px;
font-size:1.25rem;
font-weight:800;
padding:0 14px;
box-sizing:border-box;
background:#fff;
color:#101828;
font-family:inherit;
}

.compound-select:focus{
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

.compound-result{
margin-top:24px;
background:#f4faff;
border:1px solid #dceeff;
border-radius:20px;
padding:26px;
text-align:center;
line-height:1.65;
font-size:1.1rem;
font-weight:600;
color:#475467;
}

.compound-result .big{
display:block;
color:#2563eb;
font-size:2.55rem;
line-height:1.22;
font-weight:900;
margin:8px 0;
}

.compound-summary-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin:20px 0 28px;
}

.compound-summary-card{
background:#fff;
border:1px solid #e8edf5;
border-radius:20px;
padding:18px 14px;
box-shadow:0 5px 14px rgba(16,24,40,.04);
text-align:center;
}

.compound-summary-card span{
display:block;
font-size:1rem;
line-height:1.45;
font-weight:800;
color:#667085;
margin-bottom:8px;
}

.compound-summary-card b{
display:block;
font-size:1.35rem;
line-height:1.25;
font-weight:900;
color:#2563eb;
word-break:break-word;
}

.compound-chart-box{
background:#fff;
border:1px solid #e8edf5;
border-radius:24px;
padding:24px;
margin:28px 0;
box-shadow:0 8px 20px rgba(16,24,40,.05);
}

.compound-chart-wrap{
width:100%;
overflow:hidden;
border-radius:18px;
background:#f8fbff;
border:1px solid #dceeff;
padding:10px;
}

#compoundChart{
width:100%;
height:360px;
display:block;
}

.compound-legend{
display:flex;
justify-content:center;
gap:22px;
flex-wrap:wrap;
margin-top:14px;
font-size:1rem;
font-weight:800;
color:#475467;
}

.compound-legend span{
display:flex;
align-items:center;
gap:8px;
}

.compound-legend i{
display:inline-block;
width:22px;
height:4px;
border-radius:999px;
}

.legend-principal{
background:#98a2b3;
}

.legend-total{
background:#2563eb;
}

.analysis-box{
background:#f4faff;
border:1px solid #dceeff;
border-radius:18px;
padding:18px;
margin-top:20px;
line-height:1.9;
font-size:1.08rem;
color:#475467;
}

.year-box{
overflow-x:auto;
margin-top:20px;
}

.year-table{
width:100%;
border-collapse:collapse;
min-width:560px;
}

.year-table th,
.year-table td{
border-bottom:1px solid #edf2f7;
padding:12px 8px;
text-align:right;
font-size:1rem;
line-height:1.5;
}

.year-table th{
background:#f4faff;
font-weight:900;
color:#344054;
}

.year-table th:first-child,
.year-table td:first-child{
text-align:center;
}

.year-table td:first-child{
font-weight:900;
color:#2563eb;
}

@media(max-width:768px){
.compound-card,
.compound-chart-box{
padding:18px 12px;
margin:24px 0 30px;
}

.compound-card h3,
.compound-chart-box h3{
font-size:1.4rem;
line-height:1.4;
}

.compound-preset{
grid-template-columns:1fr 1fr;
gap:9px;
}

.compound-preset button{
font-size:1rem;
min-height:52px;
}

.compound-select{
height:64px;
font-size:1.2rem;
}

.compound-result{
padding:24px 14px;
font-size:1.13rem;
}

.compound-result .big{
font-size:2.22rem;
}

.compound-summary-grid{
grid-template-columns:1fr 1fr;
gap:10px;
}

.compound-summary-card{
padding:15px 10px;
}

.compound-summary-card span{
font-size:.98rem;
}

.compound-summary-card b{
font-size:1.16rem;
}

#compoundChart{
height:300px;
}

.compound-chart-wrap{
padding:6px;
}

.compound-legend{
font-size:.98rem;
gap:14px;
}

.analysis-box{
font-size:1.12rem;
line-height:1.9;
}

.year-table th,
.year-table td{
font-size:1rem;
}
}