/* Cyberlab page extra styles (extracted verbatim from cyberlabs.html) */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.lab-card {
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-l);
  padding: 1.75rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}

.lab-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.lab-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}

.lab-card--red   .lab-card__icon { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: var(--danger); }
.lab-card--blue  .lab-card__icon { background: var(--accent-lo); border: 1px solid var(--accent-mid); color: var(--accent); }
.lab-card--purple .lab-card__icon { background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.25); color: #a78bfa; }
.lab-card--cyan  .lab-card__icon { background: var(--cyan-lo); border: 1px solid rgba(6,182,212,0.2); color: var(--cyan); }

.lab-card__tag {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.625rem; border-radius: 99px;
  margin-bottom: 0.875rem; display: inline-block;
}

.lab-card--red   .lab-card__tag { background: rgba(239,68,68,0.1); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }
.lab-card--blue  .lab-card__tag { background: var(--accent-lo); color: var(--accent); border: 1px solid var(--accent-mid); }
.lab-card--purple .lab-card__tag { background: rgba(139,92,246,0.1); color: #a78bfa; border: 1px solid rgba(139,92,246,0.2); }
.lab-card--cyan  .lab-card__tag { background: var(--cyan-lo); color: var(--cyan); border: 1px solid rgba(6,182,212,0.2); }

.lab-card__title {
  font-size: 1.0625rem; font-weight: 700; color: var(--text-hi);
  margin-bottom: 0.625rem; letter-spacing: -0.01em;
}

.lab-card__desc {
  font-size: 0.9rem; color: var(--text-mid); line-height: 1.7;
}

.lab-card__modules {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem;
}

.lab-module {
  font-family: var(--font-mono); font-size: 0.62rem;
  padding: 0.2rem 0.5rem; border-radius: 4px;
  background: var(--bg-surface); color: var(--text-lo);
  border: 1px solid var(--border-sub);
}

.track-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.track-card { border: 1px solid var(--border-sub); border-radius: var(--radius-l); overflow: hidden; }

.track-card__header {
  padding: 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}

.track-card--red    .track-card__header { background: rgba(239,68,68,0.08);   border-bottom: 1px solid rgba(239,68,68,0.15); }
.track-card--blue   .track-card__header { background: rgba(37,99,235,0.08);   border-bottom: 1px solid rgba(37,99,235,0.15); }
.track-card--purple .track-card__header { background: rgba(139,92,246,0.08); border-bottom: 1px solid rgba(139,92,246,0.15); }

.track-card__header-icon {
  width: 42px; height: 42px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.track-card--red    .track-card__header-icon { background: rgba(239,68,68,0.15);  color: var(--danger); }
.track-card--blue   .track-card__header-icon { background: rgba(37,99,235,0.15);  color: var(--accent); }
.track-card--purple .track-card__header-icon { background: rgba(139,92,246,0.15); color: #a78bfa; }

.track-card__label {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 0.15rem;
}

.track-card--red    .track-card__label { color: var(--danger); }
.track-card--blue   .track-card__label { color: var(--accent); }
.track-card--purple .track-card__label { color: #a78bfa; }

.track-card__name { font-size: 1rem; font-weight: 700; color: var(--text-hi); }

.track-card__body { background: var(--bg-card); padding: 1.375rem 1.5rem; }

.track-card__desc {
  font-size: 0.875rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 1rem;
}

.track-skill-list { display: flex; flex-direction: column; gap: 0.5rem; }

.track-skill {
  display: flex; align-items: center; gap: 0.625rem;
  font-size: 0.875rem; color: var(--text-mid);
}

.track-skill::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}

.track-card--red    .track-skill::before { background: var(--danger); }
.track-card--blue   .track-skill::before { background: var(--accent); }
.track-card--purple .track-skill::before { background: #a78bfa; }

.cyberlab-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border-sub);
  border: 1px solid var(--border-sub); border-radius: var(--radius-l); overflow: hidden;
}

.cyberlab-stat { background: var(--bg-surface); padding: 2rem 1.5rem; text-align: center; }

.cyberlab-stat__num {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.35rem;
}

.cyberlab-stat__label {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-lo);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  max-width: 960px;
}

.how-card {
  background: var(--bg-card); border: 1px solid var(--border-sub);
  border-radius: var(--radius-l); padding: 1.5rem;
}

.how-card__num {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 800;
  color: var(--accent); margin-bottom: 0.875rem; line-height: 1;
}

.how-card__title {
  font-size: 0.9375rem; font-weight: 700; color: var(--text-hi); margin-bottom: 0.5rem;
}

.how-card__desc { font-size: 0.875rem; color: var(--text-mid); line-height: 1.65; }

@media (max-width: 900px) {
  .track-grid { grid-template-columns: 1fr; }
  .cyberlab-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cyberlab-stats { grid-template-columns: 1fr 1fr; }
}