/* ============================================================
   Helpme AI 智能开发板块页专属样式
   基调复用 css/style.css + css/backend.css：酷黑 + 蓝紫渐变 + 圆角细边框 + 悬停上浮
   ============================================================ */

@import url('backend.css');

/* ---------- 卡片统一弹性布局：按钮沉底对齐 ---------- */
.frame-card {
  display: flex;
  flex-direction: column;
}

.frame-card .frame-tags {
  margin-bottom: 10px;
}

.frame-card .entry-btn {
  margin-top: 4px;
  align-self: flex-start;
}

/* ---------- AI 编程工具专区卡片（更醒目的渐变描边） ---------- */
.tool-card {
  background: linear-gradient(145deg, rgba(var(--accent-2-rgb), 0.12), rgba(var(--accent-1-rgb), 0.12));
  border: 1px solid rgba(var(--accent-2-rgb), 0.45);
}

.tool-card:hover {
  border-color: var(--accent-2);
  box-shadow: 0 12px 32px rgba(var(--accent-2-rgb), 0.22);
}

.tool-card .frame-name {
  font-size: 17px;
  font-weight: 800;
}

/* ---------- 路线切换条（AI 应用 / AI 大模型开发 两个页面互跳） ---------- */
.path-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
}
.path-switch-label {
  color: var(--text-muted);
  font-size: 14px;
}
.path-switch-item {
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.path-switch-item:hover {
  border-color: var(--accent-2);
  transform: translateY(-1px);
}
.path-switch-item.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff;
}