.radar-container {
    margin: 2rem 0;
    text-align: center;
}

.radar-chart {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.radar-grid {
    fill: none;
    stroke: #D4C9B8;
    stroke-width: 1;
}

.radar-axis {
    stroke: #D4C9B8;
    stroke-width: 0.5;
    stroke-dasharray: 4 2;
}

.radar-data {
    stroke-width: 2;
    fill-opacity: 0.15;
}

.radar-data.budgie {
    fill: #7BAE5E;
    stroke: #7BAE5E;
}

.radar-data.cockatiel {
    fill: #E8A838;
    stroke: #E8A838;
}

.radar-data.lovebird {
    fill: #D46B8C;
    stroke: #D46B8C;
}

.radar-label {
    font-size: 12px;
    fill: #5C4D3F;
    text-anchor: middle;
    font-weight: 500;
}

.radar-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.legend-item {
    font-size: 0.85rem;
    font-weight: 500;
    padding-left: 1.2rem;
    position: relative;
}

.legend-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.legend-item.budgie::before {
    background: #7BAE5E;
}

.legend-item.cockatiel::before {
    background: #E8A838;
}

.legend-item.lovebird::before {
    background: #D46B8C;
}

.comparison-table {
    margin-top: 3rem;
}

.table-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

thead th {
    background: #F7F2EA;
    color: #C68B6B;
    font-weight: 600;
    padding: 0.8rem 0.6rem;
    text-align: center;
    border-bottom: 2px solid #D4C9B8;
}

thead th:first-child {
    text-align: left;
}

tbody td {
    padding: 0.6rem;
    border-bottom: 1px solid #EDE4D3;
    text-align: center;
}

tbody td:first-child {
    font-weight: 500;
    text-align: left;
    color: #5C4D3F;
}

tbody tr:hover {
    background: #F7F2EA;
}

.related-links {
    list-style: none;
    padding: 0;
}

.related-links li {
    margin-bottom: 0.6rem;
}

.related-links a {
    color: #C68B6B;
    text-decoration: none;
    font-weight: 500;
}

.related-links a:hover {
    text-decoration: underline;
}