/* 业务系统入口区样式 — 三张系统卡（AI 知识库问答 / AI 项目管理 / AI 数据治理）
   依赖 variables.css 设计 token 与 base.css 的 .card / .btn。
   本文件仅服务 #systems 区块，不动全局。 */

.sys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.sys {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* 卡头：图标 + 标签/标题 */
.sys__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.sys__ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  font-size: var(--fs-2xl);
  color: #fff;
}
.sys__ico--rag { background: var(--grad-brand); }
.sys__ico--pm  { background: var(--grad-deep); }
.sys__ico--sdg { background: linear-gradient(120deg, var(--color-cyan), var(--color-blue)); }
.sys__title h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--color-deep);
  line-height: var(--lh-tight);
  margin-top: 2px;
}

.sys__lead {
  color: var(--color-text-soft);
  font-size: var(--fs-base);
}

/* 特点列表 */
.sys__feats {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto; /* 撑开，使登录栏在等高卡片中底部对齐 */
}
.sys__feats li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.6;
}
.sys__feats li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--color-cyan);
}
.sys__feats b { color: var(--color-deep); }

/* 登录栏（实现工作项 #272 业务系统栏目登录按钮重设计）
   取代原左对齐渐变大按钮：全宽等宽、三卡严格底对齐；
   验收反馈迭代：小号「登录系统」字 + 圆形登录图标（门+箭头），
   平时软底色安静不抢卖点，hover 才亮品牌渐变、图标右移。 */
.sys__login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-soft);
  transition: var(--ease);
}
.sys__login-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-deep);
  transition: var(--ease);
}
.sys__login-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-line);
  color: var(--color-blue);
  transition: var(--ease);
}
.sys__login-ico svg { width: 16px; height: 16px; }
.sys__login:hover {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.sys__login:hover .sys__login-label { color: #fff; }
.sys__login:hover .sys__login-ico {
  border-color: transparent;
  transform: translateX(3px);
}

/* 悬浮：整卡轻抬升 */
.sys { transition: var(--ease); }
.sys:hover {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* 响应式：平板及以下单列（登录栏天然全宽，无需小屏特判） */
@media (max-width: 860px) {
  .sys-grid { grid-template-columns: 1fr; }
}