/* ═══════════════════════════════════════════
   SKILLS PAGE
   ═══════════════════════════════════════════ */
body { display:flex; flex-direction:column; min-height:100vh; }
main { flex:1; }

.skills-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:60vh; padding:6rem 1.5rem 3rem; text-align:center;
}

/* Loading */
.skills-loading p {
  margin-top:1rem; color:var(--sf-text-muted); font-size:0.95rem;
}

/* Paywall */
.skills-paywall { gap:1.2rem; }
.paywall-icon { font-size:3rem; color:var(--sf-accent); }
.skills-paywall h2 { font-size:1.6rem; color:#fff; }
.skills-paywall p { max-width:440px; color:var(--sf-text-muted); font-size:0.95rem; }

/* Catalog */
.skills-catalog {
  align-items:stretch; justify-content:flex-start;
  max-width:1200px; margin:0 auto; padding-top:5rem;
}

.skills-header {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem;
}
.skills-header h1 { font-size:1.6rem; color:#fff; }

.skills-search-wrap {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.5rem 1rem; border-radius:var(--sf-radius-full);
  border:1px solid var(--sf-border); background:rgba(255,255,255,0.03);
  min-width:220px;
}
.skills-search-wrap .material-icons-outlined { color:var(--sf-text-muted); font-size:1.1rem; }
.skills-search-input {
  background:none; border:none; color:var(--sf-text); font-size:0.9rem;
  font-family:var(--font-display); outline:none; width:100%;
}
.skills-search-input::placeholder { color:var(--sf-text-dim); }

.skills-pills {
  display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem;
}

.skills-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1.2rem;
}

/* Skill Card */
.skill-card {
  background:var(--sf-surface);
  border:1px solid var(--sf-border);
  border-radius:var(--sf-radius);
  padding:1.5rem;
  display:flex; flex-direction:column; gap:0.8rem;
  transition:border-color 0.3s, transform 0.3s;
}
.skill-card:hover {
  border-color:var(--sf-border-hover);
  transform:translateY(-2px);
}

.skill-card-header {
  display:flex; align-items:center; justify-content:space-between;
}
.skill-card-body h3 { font-size:1rem; color:#fff; margin-bottom:0.3rem; }
.skill-card-body p { font-size:0.82rem; color:var(--sf-text-muted); line-height:1.5; }

.skill-card-meta {
  display:flex; gap:1rem; font-size:0.78rem; color:var(--sf-text-dim);
}
.skill-card-meta .meta-item { display:flex; align-items:center; gap:0.25rem; }
.skill-card-meta .material-icons-outlined { font-size:0.9rem; }

.skill-download-btn {
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
  padding:0.6rem 1rem; border-radius:var(--sf-radius-sm);
  border:1px solid var(--sf-border); background:rgba(255,255,255,0.03);
  color:var(--sf-text); font-size:0.82rem; font-weight:600;
  cursor:pointer; transition:all 0.25s; font-family:var(--font-display);
  margin-top:auto;
}
.skill-download-btn:hover {
  border-color:var(--sf-accent); color:var(--sf-accent);
  background:rgba(34,211,238,0.06);
}
.skill-download-btn.downloaded {
  border-color:rgba(52,211,153,0.3); color:var(--sf-accent-4);
  background:rgba(52,211,153,0.08);
}
.skill-download-btn .material-icons-outlined { font-size:1rem; }

.skills-empty {
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  padding:3rem 1rem; color:var(--sf-text-muted);
}
.skills-empty .material-icons-outlined { font-size:2.5rem; }

/* Skills page footer */
.skills-catalog ~ footer,
.skills-paywall ~ footer,
.skills-loading ~ footer {
  text-align:center; padding:2rem; font-size:0.8rem; color:var(--sf-text-dim);
}