.skills-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
}

.skills-tab {
    padding: 10px 16px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-main);
    font-weight: 700;
}

.skills-tab:hover,
.skills-tab.is-active {
    border-color: var(--brand-red);
    background: var(--brand-red-soft);
    color: var(--brand-red);
}

.skills-layout,
.skill-category-panel,
.skill-card {
    display: grid;
    gap: 16px;
}

.skills-layout {
    margin-top: 24px;
}

.skill-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.skill-details-grid details {
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.skill-details-grid summary {
    cursor: pointer;
    font-weight: 700;
}

.skill-history,
.skill-evidence {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding-left: 20px;
}

.skill-history span,
.skill-history p {
    display: block;
    margin-top: 4px;
    color: var(--text-soft);
}

.skill-review-form {
    display: grid;
    gap: 8px;
}

.skill-review-form textarea {
    min-height: 72px;
}

@media (max-width: 720px) {
    .skill-details-grid {
        grid-template-columns: 1fr;
    }
}