/* ═══ Kuaisou MMS — Index Page v2 ═══ */

.index-header { padding: 28px 0; margin-bottom: 40px; border-bottom: none }
.index-header h1 { font-size: 32px; font-weight: 800; color: var(--text-1); letter-spacing: -.8px; line-height: 1.2 }
.index-header p { font-size: 14px; color: var(--text-3); margin-top: 6px }

.section-title {
  font-size: 16px; font-weight: 700; color: var(--text-2);
  margin: 40px 0 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  letter-spacing: .3px; text-transform: uppercase;
  font-size: 12px;
}

.topic-cloud a {
  display: inline-block; padding: 6px 18px; margin: 4px;
  background: var(--bg-card); color: var(--mms-blue);
  border: 1px solid var(--border); border-radius: var(--mms-radius-l);
  font-size: 14px; font-weight: 500;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: all .3s var(--mms-ease);
  position: relative; overflow: hidden;
}
.topic-cloud a::before { content: ''; position: absolute; inset: 0; background: var(--shine); pointer-events: none }
.topic-cloud a:hover {
  background: var(--mms-blue); color: #fff;
  border-color: var(--mms-blue);
  box-shadow: 0 4px 16px var(--mms-blue-glow);
  transform: translateY(-2px);
  text-decoration: none;
}

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--mms-radius-m); padding: 22px;
  position: relative; overflow: hidden;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-s);
  transition: all .35s var(--mms-ease);
}
.card::before { content: ''; position: absolute; inset: 0; background: var(--shine); pointer-events: none }
.card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-m);
  background: var(--bg-card-hover);
  transform: translateY(-3px);
}
.card h2 { font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.4 }
.card h2 a { color: var(--text-1); text-decoration: none }
.card h2 a:hover { color: var(--mms-blue); opacity: 1 }
.card .desc { color: var(--text-3); font-size: 14px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.card .meta { color: var(--text-4); font-size: 12px; margin-top: 14px; font-variant-numeric: tabular-nums }

@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr } .index-header h1 { font-size: 28px } }