.skills-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }

.skills-legend { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; font-family: 'Orbitron', monospace; font-size: 0.7rem; letter-spacing: 1px; }
.legend-item { display: flex; align-items: center; gap: 0.4rem; color: var(--dim); }

.skill-group-title { font-family: 'Orbitron', monospace; font-size: 0.7rem; letter-spacing: 3px; color: var(--blue); text-transform: uppercase; margin-bottom: 1.5rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--border); }

.skill-item { margin-bottom: 1.3rem; }
.skill-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.skill-name-text { font-size: 0.9rem; color: var(--text-bright); font-weight: 500; }

.skill-origin { font-size: 0.65rem; font-family: 'Orbitron', monospace; letter-spacing: 1px; padding: 0.15rem 0.5rem; border: 1px solid var(--border); color: var(--dim); }
.skill-origin.school { border-color: rgba(0,180,255,0.3); color: var(--blue); }
.skill-origin.self   { border-color: rgba(0,229,255,0.3); color: var(--cyan); }
.skill-origin.thm    { border-color: rgba(0,255,159,0.3); color: var(--green); }

.skill-bar-bg { height: 3px; background: rgba(0,180,255,0.1); overflow: hidden; }
.skill-bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue2), var(--blue)); box-shadow: 0 0 8px var(--blue); width: 0; transition: width 1.4s cubic-bezier(0.4,0,0.2,1); }
.skill-bar-fill.self-learned { background: linear-gradient(90deg, #0088bb, var(--cyan)); box-shadow: 0 0 8px var(--cyan); }

@media (max-width: 768px) { .skills-cols { grid-template-columns: 1fr; gap: 2rem; } }