.compound-card{
--accent:#4f46e5;
background:#fff;
border:1px solid #d8d6f8;
border-top:5px solid var(--accent);
border-radius:24px;
padding:24px;
margin:26px -30px 30px;
box-shadow:0 8px 18px rgba(16,24,40,.045);
}
.compound-card h3,.compound-chart-box h3{font-size:1.48rem;line-height:1.42;font-weight:900;color:#101828;margin:0 0 20px;display:flex;align-items:center;gap:13px}
.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:var(--accent);box-shadow:0 0 0 4px rgba(79,70,229,.14)}
.compound-result{margin-top:24px;background:#edecfc;background:color-mix(in srgb,var(--accent) 10%,#fff);border:1px solid #cecbf8;border-color:color-mix(in srgb,var(--accent) 28%,#fff);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:var(--accent);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{--accent:#0891b2;background:#fff;border:1px solid #c7e8ef;border-top:5px solid var(--accent);border-radius:24px;padding:24px;margin:28px -30px;box-shadow:0 8px 18px rgba(16,24,40,.045)}
.compound-chart-wrap{width:100%;overflow:hidden;border-radius:18px;background:#e6f4f7;background:color-mix(in srgb,var(--accent) 10%,#fff);border:1px solid #b9dfe8;border-color:color-mix(in srgb,var(--accent) 28%,#fff);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 -6px 30px;border-radius:18px}
.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}
}
.compound-card{--accent:#d97706;border-color:#f6e1c8;border-top-color:#d97706}
.compound-card .card-num{box-shadow:0 4px 10px rgba(217,119,6,.45)}
.compound-card .compound-preset button{background:#fdf7f0;border-color:#f4d9b9;color:#9a5a16}
.compound-card .compound-preset button:hover{background:#d97706;border-color:#d97706;color:#fff}
.compound-card .percent-input:focus,.compound-card .compound-select:focus{border-color:#d97706;box-shadow:0 0 0 4px rgba(217,119,6,.14)}
.compound-card .percent-addon{background:#f9e9d7;color:#9a5a16}
body .compound-card .compound-result.result-coffee{background:#fbf1e6;border:1px solid #f4d9b9;color:#4a3524;box-shadow:none}
body .compound-card .compound-result.result-coffee .big{color:#c96f05}
.compound-summary-card{background:#fffaf5;border-color:#ecd7c3;box-shadow:none}
.compound-summary-card b{color:#c96f05}
.analysis-box{background:#fffaf5;border-color:#ecd7c3;color:#5a4634}
.analysis-box b,.year-table td:first-child{color:#9a5a16}