.skills-view {
  min-height: 0;
  overflow-y: auto;
  padding: 36px max(24px, calc((100% - 1050px) / 2)) 60px;
}
.skills-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.skills-heading .eyebrow { margin: 0 0 7px; }
.skills-heading h3 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.035em; }
.skills-heading p:not(.eyebrow) { max-width: 680px; margin: 10px 0 0; color: #8d98aa; line-height: 1.55; }
.secondary-button {
  border: 1px solid #303744;
  border-radius: 11px;
  padding: 9px 12px;
  background: #161b23;
  color: #dce3ed;
}
.secondary-button:hover { background: #1c222c; }
.skills-permission {
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid #29303b;
  border-radius: 11px;
  background: #11161d;
  color: #7f8b9d;
  font-size: .76rem;
}
.skills-list { display: grid; gap: 14px; }
.skill-card {
  padding: 18px;
  border: 1px solid #252c36;
  border-radius: 15px;
  background: #11161d;
}
.skill-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.skill-card h4 { margin: 0; color: #eef2f7; font-size: 1rem; }
.skill-version { color: #657185; font-size: .7rem; }
.skill-description { margin: 8px 0 12px; color: #9aa5b6; line-height: 1.55; }
.skill-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.skill-chip { padding: 4px 7px; border-radius: 999px; background: #1d2430; color: #9eabba; font-size: .68rem; }
.skill-chip.enabled { background: rgba(72,214,162,.11); color: #71ddb4; }
.skill-chip.disabled { background: rgba(255,126,126,.09); color: #dca0a0; }
.skill-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.skill-target {
  min-width: 220px;
  border: 1px solid #303744;
  border-radius: 9px;
  padding: 8px 10px;
  background: #0d1117;
  color: #dce3ed;
}
.skill-action {
  border: 1px solid #303744;
  border-radius: 9px;
  padding: 8px 10px;
  background: #171d26;
  color: #cdd5e1;
}
.skill-action.enable { border-color: rgba(72,214,162,.32); }
.skill-action.disable { border-color: rgba(255,126,126,.28); }
.skill-action:disabled, .skill-target:disabled { opacity: .38; cursor: not-allowed; }
.skills-empty { color: #7c8799; padding: 28px 0; }

@media (max-width: 780px) {
  .skills-view { padding-inline: 18px; }
  .skills-heading { flex-direction: column; }
  .skill-actions { align-items: stretch; }
  .skill-target { min-width: 0; width: 100%; }
}