/* ============================================================================
   晓黎 FDE 演示站 —— 场景入口页
   ----------------------------------------------------------------------------
   设计依据（外部最佳实践，2026-10-21 检索）：
     * "Gate them after they're hooked, not before" —— 演示不该先给登录墙
     * "Choose-your-own-adventure demos" —— 让访客自己选场景路径
     * SAP / Oracle 的 demo 环境都是「一组命名 demo 用户 + 角色表」
     * 一键登录（auto-fill credentials）是成熟模式

   所以这里不是「登录页」，是「场景选择页」：
     老板打开链接 -> 看到我们在哪些场景能干什么 -> 点一下 -> 直接进对应角色。

   设计判断（trust-first / B2B 决策者）：
     VARIANCE 4 / MOTION 3 / DENSITY 4。
     信息要够（老板要理解场景），但不能乱。卡片式分区，单一强调色。

   色值仍只消费晓黎 token。
   ========================================================================= */

/* ── 隐藏原生的登录表单与所有兄弟区块（这个页面取代它们）──────────────── */
.for-login > .page-card-head,
.for-login > .login-content.page-card,
.for-signup, .for-forgot, .for-email-link, .for-login-with-email-link,
.for-reset-password, .login-divider, .social-logins, .signup-message,
.login-footer, .new-account, .page-card-actions {
  display: none !important;
}

/* ── 整页容器 ──────────────────────────────────────────────────────────── */
body.for-login {
  background: var(--xl-paper) !important;
}
.for-login {
  display: block !important;
  min-height: 100dvh;
  padding: 0 !important;
  background: var(--xl-paper) !important;
}

.xl-entry {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 28px 64px;
}

/* ── 头部 ──────────────────────────────────────────────────────────────── */
.xl-entry-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--xl-line);
  margin-bottom: 34px;
}
.xl-entry-head img {
  height: 58px;
  width: auto;
  flex: none;
}
.xl-entry-title h1 {
  margin: 0 0 5px;
  font-size: 25px;
  font-weight: 700;
  color: var(--xl-navy);
  letter-spacing: .01em;
}
.xl-entry-title p {
  margin: 0;
  font-size: 13.5px;
  color: var(--xl-slate);
  line-height: 1.6;
}

/* ── 演示环境声明（醒目但不吵）─────────────────────────────────────────── */
.xl-entry-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--xl-mist);
  border-left: 3px solid var(--xl-amber);
  border-radius: 6px;
  padding: 13px 16px;
  margin-bottom: 34px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--xl-slate);
}
.xl-entry-notice b { color: var(--xl-navy); }

/* ── 分区标题 ──────────────────────────────────────────────────────────── */
.xl-entry-section {
  margin-bottom: 36px;
}
.xl-entry-section > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--xl-navy);
  letter-spacing: .01em;
}
.xl-entry-section > h2::before {
  content: "";
  width: 3px;
  height: 15px;
  background: var(--xl-amber);
  border-radius: 2px;
  flex: none;
}
.xl-entry-section > .xl-sec-desc {
  margin: 0 0 18px 13px;
  font-size: 13px;
  color: var(--xl-steel);
  line-height: 1.7;
}

/* ── 场景卡片网格 ──────────────────────────────────────────────────────── */
/* 固定 2 列：auto-fill 在 4 张卡时会排成 3+1，留一个大洞很难看。
   2 列最稳（1440 宽下每张约 560px，信息放得下也不空）。 */
.xl-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
/* AI 那张单独一行时不要撑满，保持与上面同宽 */
.xl-cards.xl-cards-single {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xl-cards.xl-cards-single > .xl-card:only-child {
  grid-column: span 1;
}

.xl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--xl-line);
  border-radius: 10px;
  padding: 20px 20px 18px;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden;
  transition: border-color 180ms cubic-bezier(.2,.7,.3,1),
              box-shadow 180ms cubic-bezier(.2,.7,.3,1),
              transform 180ms cubic-bezier(.2,.7,.3,1);
}
.xl-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0;
  background: var(--xl-amber);
  transition: height 260ms cubic-bezier(.2,.7,.3,1);
}
.xl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px rgba(18, 59, 114, .22);
  border-color: var(--xl-amber);
}
.xl-card:hover::before { height: 100%; }

.xl-card-role {
  display: inline-block;
  align-self: flex-start;
  background: var(--xl-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 11px;
}
.xl-card h3 {
  margin: 0 0 7px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--xl-navy);
  line-height: 1.4;
}
.xl-card .xl-card-desc {
  margin: 0 0 14px;
  font-size: 12.8px;
  color: var(--xl-slate);
  line-height: 1.7;
  flex: 1;
}

/* 卡片里的「AI 在哪」清单 */
.xl-card-atoms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 15px;
  min-height: 22px;   /* 没有 AI 原子的卡也占位，保证卡片等高 */
}
.xl-atom {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  background: #FFF3D6;
  color: #8A5D00;
  white-space: nowrap;
}
.xl-atom.plain {
  background: var(--xl-mist);
  color: var(--xl-slate);
}

.xl-card-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 13px;
  border-top: 1px solid var(--xl-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--xl-navy);
}
.xl-card-go .xl-arrow {
  transition: transform 180ms cubic-bezier(.2,.7,.3,1);
}
.xl-card:hover .xl-card-go .xl-arrow { transform: translateX(4px); }

/* ── 账号一览（给要自己登录的人）───────────────────────────────────────── */
.xl-accounts {
  border: 1px solid var(--xl-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.xl-accounts table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.8px;
}
.xl-accounts th {
  background: var(--xl-mist);
  color: var(--xl-navy);
  text-align: left;
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--xl-line);
  white-space: nowrap;
}
.xl-accounts td {
  padding: 10px 14px;
  border-bottom: 1px solid #F1F4F2;
  color: var(--xl-slate);
}
.xl-accounts tr:last-child td { border-bottom: none; }
.xl-accounts code {
  background: var(--xl-mist);
  color: var(--xl-navy);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}
.xl-accounts .xl-login-link {
  color: var(--xl-navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--xl-amber);
}

/* ── 页脚 ──────────────────────────────────────────────────────────────── */
.xl-entry-foot {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--xl-line);
  font-size: 12px;
  color: var(--xl-steel);
  line-height: 1.8;
}

/* ── 入场动效（错峰）───────────────────────────────────────────────────── */
@keyframes xl-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.xl-card { animation: xl-card-in 300ms cubic-bezier(.2,.7,.3,1) both; }
.xl-card:nth-child(1) { animation-delay: 0ms; }
.xl-card:nth-child(2) { animation-delay: 50ms; }
.xl-card:nth-child(3) { animation-delay: 100ms; }
.xl-card:nth-child(4) { animation-delay: 150ms; }
.xl-card:nth-child(5) { animation-delay: 200ms; }
.xl-card:nth-child(6) { animation-delay: 250ms; }

.xl-entry-head { animation: xl-card-in 340ms cubic-bezier(.2,.7,.3,1) both; }

/* ============================================================================
   v2：按 AI 能力原子分类的卡片
   ----------------------------------------------------------------------------
   负责人指出「不同场景可能是同一个流程，只是数据不同，会造成重复」。
   核实属实，所以主分类轴从「角色」换成「AI 能力原子」。
   卡片必须回答四问，这是 v1 缺的、也是「看得出 AI」的关键。
   ========================================================================= */

.xl-acards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.xl-acard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--xl-line);
  border-radius: 10px;
  padding: 18px 20px 16px;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden;
  transition: border-color 180ms cubic-bezier(.2,.7,.3,1),
              box-shadow 180ms cubic-bezier(.2,.7,.3,1),
              transform 180ms cubic-bezier(.2,.7,.3,1);
}
.xl-acard::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0;
  background: var(--xl-amber);
  transition: height 260ms cubic-bezier(.2,.7,.3,1);
}
.xl-acard:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px rgba(18, 59, 114, .22);
  border-color: var(--xl-amber);
}
.xl-acard:hover::before { height: 100%; }

/* 规划中的原子：视觉上明确降级，不假装能点 */
.xl-acard-planned {
  background: var(--xl-paper);
  border-style: dashed;
}
.xl-acard-planned:hover { transform: none; box-shadow: none; border-color: var(--xl-line); }
.xl-acard-planned:hover::before { height: 0; }
.xl-acard-planned h3 { color: var(--xl-steel); }

.xl-acard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.xl-atom-code {
  display: inline-block;
  background: var(--xl-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.xl-badge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  font-weight: 600;
}
.xl-badge.live {
  background: #E7F3EA;
  color: #1E6B36;
  border: 1px solid #BEDDC7;
}
.xl-badge.live::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #1E6B36;
  margin-right: 5px;
  vertical-align: 1px;
}
.xl-badge.planned {
  background: var(--xl-mist);
  color: var(--xl-steel);
  border: 1px solid var(--xl-line);
}

.xl-acard h3 {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 700;
  color: var(--xl-navy);
  line-height: 1.4;
}
.xl-acard-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--xl-steel);
  line-height: 1.6;
}

/* 四问清单 —— 卡片的核心内容 */
.xl-four {
  margin: 0 0 13px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.xl-four > div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  align-items: baseline;
}
.xl-four dt {
  font-size: 11.5px;
  color: var(--xl-steel);
  font-weight: 600;
  white-space: nowrap;
}
.xl-four dd {
  margin: 0;
  font-size: 12.5px;
  color: var(--xl-slate);
  line-height: 1.65;
}
.xl-four dd.xl-ai {
  color: var(--xl-navy);
  font-weight: 600;
  background: #EEF4FB;
  border-radius: 4px;
  padding: 5px 9px;
  margin: -3px 0;
}
.xl-four dd.xl-fail { color: #8A5D00; }

.xl-acard-inds {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 13px;
}
.xl-ind {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--xl-mist);
  color: var(--xl-slate);
  white-space: nowrap;
}

.xl-acard-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--xl-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--xl-navy);
}
.xl-acard-planned .xl-acard-go { color: var(--xl-steel); font-weight: 500; }
.xl-acard-go .xl-arrow { transition: transform 180ms cubic-bezier(.2,.7,.3,1); }
.xl-acard:hover .xl-acard-go .xl-arrow { transform: translateX(4px); }

/* ── 行业维度说明 ──────────────────────────────────────────────────────── */
.xl-inds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.xl-ind-card {
  background: #fff;
  border: 1px solid var(--xl-line);
  border-radius: 8px;
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.xl-ind-card b {
  font-size: 14px;
  color: var(--xl-navy);
  font-weight: 700;
}
.xl-ind-card code {
  font-size: 11.5px;
  color: var(--xl-steel);
  background: var(--xl-mist);
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.6;
}

/* ── 看板横幅 ──────────────────────────────────────────────────────────── */
.xl-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(105deg, var(--xl-navy) 0%, #1B4E8C 100%);
  border-radius: 12px;
  padding: 24px 28px;
  color: #fff;
}
.xl-banner-txt h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.xl-banner-txt p {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.82);
  line-height: 1.65;
}
.xl-banner-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--xl-amber);
  color: #3D2A00 !important;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 7px;
  text-decoration: none !important;
  transition: transform 160ms cubic-bezier(.2,.7,.3,1),
              box-shadow 160ms cubic-bezier(.2,.7,.3,1);
}
.xl-banner-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(246,168,0,.6);
}
.xl-banner-btn .xl-arrow { transition: transform 180ms cubic-bezier(.2,.7,.3,1); }
.xl-banner-btn:hover .xl-arrow { transform: translateX(3px); }

/* ── 角色入口（降级为次要）─────────────────────────────────────────────── */
.xl-roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.xl-role {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--xl-line);
  border-radius: 8px;
  padding: 13px 15px;
  text-decoration: none !important;
  transition: border-color 160ms, background 160ms;
}
.xl-role:hover { border-color: var(--xl-navy); background: #F7FAFD; }
.xl-role b { font-size: 13.5px; color: var(--xl-navy); font-weight: 700; }
.xl-role span { font-size: 11.5px; color: var(--xl-steel); line-height: 1.5; }

/* 原子卡片入场（错峰，比 v1 稍慢一点，信息量大） */
.xl-acard { animation: xl-card-in 320ms cubic-bezier(.2,.7,.3,1) both; }
.xl-acard:nth-child(1) { animation-delay: 0ms; }
.xl-acard:nth-child(2) { animation-delay: 45ms; }
.xl-acard:nth-child(3) { animation-delay: 90ms; }
.xl-acard:nth-child(4) { animation-delay: 135ms; }
.xl-acard:nth-child(5) { animation-delay: 180ms; }
.xl-acard:nth-child(6) { animation-delay: 225ms; }
.xl-acard:nth-child(7) { animation-delay: 270ms; }
.xl-ind-card, .xl-banner, .xl-role { animation: xl-card-in 320ms cubic-bezier(.2,.7,.3,1) both; }

/* ── Agent 操作台 hero ───────────────────────────────────────────────────
   Agent 操作台跟 X01..X10 不是一类东西：那些是「AI 算完给你看」的原子，
   这个是「AI 真的动手改库」的操作台。所以给它单独的视觉重量，
   放在最前面，配色也比普通 banner 重一档（深靛蓝，跟侧栏一致）。 */
.xl-entry-hero { margin-top: 26px; }
.xl-entry-hero > h2 {
  font-size: 19px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(18, 59, 114, .12);
}
.xl-banner-agent {
  background: linear-gradient(135deg, #123B72 0%, #1b4d8f 100%);
  border-color: transparent;
}
.xl-banner-agent .xl-banner-txt h3 { color: #fff; }
.xl-banner-agent .xl-banner-txt p { color: rgba(255, 255, 255, .82); }
.xl-banner-agent .xl-banner-btn {
  background: #F6A800;
  color: #1b2333;
  font-weight: 600;
}
.xl-banner-agent .xl-banner-btn:hover { background: #ffb81f; }
.xl-hint-line {
  margin-top: 10px;
  font-size: 12.5px;
  color: #7a8494;
  line-height: 1.7;
}
.xl-hint-line b { color: #123B72; }

/* ── 移动端 ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .xl-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl-inds { grid-template-columns: 1fr; }
  .xl-banner { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 720px) {
  .xl-entry { padding: 30px 16px 44px; }
  .xl-entry-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .xl-entry-head img { height: 46px; }
  .xl-entry-title h1 { font-size: 20px; }
  .xl-cards, .xl-cards.xl-cards-single,
  .xl-acards { grid-template-columns: 1fr; }
  .xl-accounts { overflow-x: auto; }
  .xl-four > div { grid-template-columns: 1fr; gap: 3px; }
  .xl-banner-btn { width: 100%; justify-content: center; }
}

/* ── 尊重系统设置 ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .xl-card, .xl-entry-head, .xl-acard, .xl-ind-card, .xl-banner, .xl-role {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .xl-card, .xl-card::before, .xl-card-go .xl-arrow,
  .xl-acard, .xl-acard::before, .xl-acard-go .xl-arrow,
  .xl-banner-btn, .xl-role { transition: none !important; }
}