/* ===== Skills: one panel, title on top, bar rows below ===== */
.panel{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:1.6rem 1.6rem .8rem}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem 1.5rem;padding-bottom:1.1rem;margin-bottom:.4rem;border-bottom:1px solid var(--line)}
.panel-head h2{margin:0;font-size:clamp(1.7rem,4vw,2.3rem)}
.panel-head p{color:var(--muted);font-size:.92rem}

.sk-row{display:grid;grid-template-columns:minmax(10rem,15rem) 1fr 8rem;align-items:center;gap:1.2rem;padding:1rem .7rem;border-radius:12px;color:inherit;text-decoration:none;transition:background .2s}
.sk-row+.sk-row{border-top:1px solid rgba(56,77,72,.5)}
a.sk-row:hover{background:rgba(56,77,72,.35)}
.sk-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .6rem;min-width:0}
.sk-name b{font:800 1.15rem var(--display);color:var(--cream);letter-spacing:-.02em}
.sk-name small{font-size:.8rem;color:var(--muted)}
.sk-name .cnt{display:inline-flex;align-items:center;gap:.25rem;font-size:.8rem;color:var(--acc)}
.sk-name .cnt svg{width:13px;height:13px;transition:transform .3s}
a.sk-row:hover .cnt svg{transform:translate(2px,-2px)}
.sk-lvl{text-align:right;color:var(--soft);font-size:.92rem}

/* bars */
.bar{display:block;height:6px;border-radius:9px;background:var(--slate);overflow:hidden}
.bar i{display:block;position:relative;overflow:hidden;height:100%;background:var(--acc);border-radius:9px;transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.vis .bar i{transform:scaleX(var(--v))}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%)}
.vis .bar i::after{animation:sweep 1.2s ease 1.2s 1}
@keyframes sweep{to{transform:translateX(100%)}}