/* ── Skills Page Styles ── */
.skills-section-title { font-size:clamp(1.4rem,2vw,1.9rem); font-weight:900; letter-spacing:-0.8px; margin-bottom:24px; }
.skills-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; margin-bottom:70px; }
.skill-card { background:var(--card); border:1.5px solid var(--border); border-radius:18px; padding:28px; position:relative; overflow:hidden; transition:all 0.4s var(--ease); cursor:none; }
.skill-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--accent),#E8833D); transform:scaleX(0); transform-origin:left; transition:transform 0.4s var(--ease); }
.skill-card:hover { border-color:var(--accent); transform:translateY(-6px); box-shadow:0 16px 40px rgba(212,83,74,0.12); }
.skill-card:hover::before { transform:scaleX(1); }
.skill-icon { font-size:2rem; margin-bottom:14px; }
.skill-name { font-size:1rem; font-weight:800; margin-bottom:6px; }
.skill-desc { font-size:0.84rem; color:var(--muted); line-height:1.65; margin-bottom:18px; font-weight:500; }
.skill-level { display:flex; justify-content:space-between; margin-bottom:8px; }
.skill-level span { font-size:0.73rem; color:var(--muted); font-weight:600; }
.skill-level strong { font-size:0.73rem; color:var(--accent); font-weight:800; }
.skill-bar-wrap { background:rgba(44,24,16,0.07); border-radius:4px; height:5px; overflow:hidden; }
.skill-bar { height:100%; background:linear-gradient(90deg,var(--accent),#E8833D); border-radius:4px; width:0; transition:width 1.2s var(--ease); }
.tools-section { margin-bottom:70px; }
.tools-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.tool-pill { display:flex; align-items:center; gap:8px; padding:10px 18px; background:var(--card); border:1.5px solid var(--border); border-radius:40px; font-size:0.83rem; color:var(--muted); transition:all 0.3s var(--ease); cursor:none; font-weight:600; }
.tool-pill:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 14px rgba(212,83,74,0.1); }
.tool-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.learning-section { margin-bottom:40px; }
.learning-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:24px; }
.learning-card { background:var(--card); border:1.5px solid var(--border); border-radius:14px; padding:22px; transition:all 0.3s var(--ease); }
.learning-card:hover { border-color:var(--accent2); transform:translateY(-4px); box-shadow:0 8px 20px rgba(92,158,84,0.12); }
.lc-icon { font-size:1.5rem; margin-bottom:10px; }
.lc-name { font-size:0.88rem; font-weight:700; margin-bottom:6px; }
.lc-status { font-size:0.74rem; color:var(--accent2); display:flex; align-items:center; gap:6px; font-weight:700; }
.lc-status::before { content:''; width:6px; height:6px; background:var(--accent2); border-radius:50%; animation:pulse2 1.8s ease-in-out infinite; }
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:0.3}}

/* ── Dark theme overrides ── */
[data-theme="dark"] .skill-bar-wrap { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .skill-bar { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
[data-theme="dark"] .skill-card::before { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
[data-theme="dark"] .skill-card:hover { box-shadow: 0 16px 40px rgba(108,99,255,0.15); }
[data-theme="dark"] .learning-card:hover { box-shadow: 0 8px 20px rgba(0,217,160,0.12); }
[data-theme="dark"] .tool-pill:hover { box-shadow: 0 4px 14px rgba(108,99,255,0.12); }