/* Container */
  #skills { border-radius: 1rem; scroll-margin-top: 72px; }

  .skills-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) ); gap: 1.25rem; }
  .skill-card { background: #fff; border-radius: 16px; padding: 1.25rem; box-shadow: 0 6px 24px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.06); }
  .skill-card h4 { margin-bottom: .75rem; font-weight: 700; }

  /* Animated bars */
  .bar { --value: 0; position: relative; background: linear-gradient( to right, rgba(0,0,0,.08), rgba(0,0,0,.08) ); border-radius: 999px; height: 20px; overflow: hidden; margin: .85rem 0 1.1rem; }
  .bar::before { content: ""; position: absolute; inset: 0; width: calc(var(--value) * 1%); background: linear-gradient(90deg, #ebe5e0, #9daad4); border-radius: inherit; transform: translateZ(0); transition: width 1.2s ease; }
  .bar::after { content: attr(data-label); position: absolute; left: 3%; font-size: .9rem; font-weight: 700; color: #333; }

  /* Tags */
  details > summary { cursor: pointer; user-select: none; font-weight: 600; }
  .tag-groups { display: grid; grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) ); gap: 1rem; margin-top: 1rem; }
  .tag-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; padding: .9rem; box-shadow: 0 4px 18px rgba(0,0,0,.04); }
  .tag-card h5 { margin: 0 0 .5rem; font-weight: 700; font-size: 1rem; }
  .tags { display: flex; flex-wrap: wrap; gap: .5rem; }
  .tags span { background: #f3f6ff; border: 1px solid #e3e9ff; color: #2a2e44; padding: .3rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 600; }

  /* Light/Dark friendly */
  @media (prefers-color-scheme: dark) {
    #skills.bg-light { background: #101317 !important; }
    .skill-card, .tag-card { background: #0b0e12; border-color: #1a2230; box-shadow: none; }
    .bar { background: #1a2230; }
    .bar::after { color: #efefef; }
    .tags span { background: #0f1520; border-color: #1a2230; color: #dfe7ff; }
  }