/*
 * ==============================================
 * Steps css
 * ==============================================
 */

/*
 * --------------------------------------
 * zh-CN
 */
.zh-CN .prereq:before{
   content:"前提条件";
	font-weight:bold;
}
.zh-CN .steps:before{
   content:"操作步骤";
	font-weight:bold;
}
.zh-CN .result:before{
    content:"结果说明";
	font-weight:bold;
}
.zh-CN .stepxmp:before{
    content:"示例";
	font-weight:bold;
}
.zh-CN .example:before{
    content:"示例";
	font-weight:bold;
}
.zh-CN .postreq:before{
    content:"后续处理";
	font-weight:bold;
}


/*
 * --------------------------------------
 * en-US
 */
.en-US .prereq:before{
    content:"Before You Start";
	font-weight:bold;
}
.en-US .steps:before{
    content:"Steps";
	font-weight:bold;
}
.en-US .result:before{
    content:"Result";
	font-weight:bold;
}
.en-US .stepxmp:before{
    content:"Example";
	font-weight:bold;
}
.en-US .example:before{
    content:"Example";
	font-weight:bold;
}
.en-US .postreq:before{
    content:"What to do next";
	font-weight:bold;
}


/*
 * --------------------------------------
 * nl-NL
 */
.nl-NL .prereq:before{
   content:"Voordat u begint";
	font-weight:bold;
}
.nl-NL .steps:before{
   content:"Stappen";
	font-weight:bold;
}
.nl-NL .result:before{
    content:"Resultaat";
	font-weight:bold;
}
.nl-NL .stepxmp:before{
    content:"Voorbeeld";
	font-weight:bold;
}
.nl-NL .example:before{
    content:"Voorbeeld";
	font-weight:bold;
}
.nl-NL .postreq:before{
    content:"Wat nu te doen";
	font-weight:bold;
}

/*
 * --------------------------------------
 * fr-FR
 */
.fr-FR .prereq:before{
   content:"Avant de commencer";
	font-weight:bold;
}
.fr-FR .steps:before{
   content:"Procédure";
	font-weight:bold;
}
.fr-FR .result:before{
    content:"Résultat";
	font-weight:bold;
}
.fr-FR .stepxmp:before{
    content:"Exemple";
	font-weight:bold;
}
.fr-FR .example:before{
    content:"Exemple";
	font-weight:bold;
}
.fr-FR .postreq:before{
    content:"Que faire ensuite";
	font-weight:bold;
}

/*
 * --------------------------------------
 * de-DE
 */
.de-DE .prereq:before{
   content:"Bevor Sie beginnen";
	font-weight:bold;
}
.de-DE .steps:before{
   content:"Schritte";
	font-weight:bold;
}
.de-DE .result:before{
    content:"Ergebnis";
	font-weight:bold;
}
.de-DE .stepxmp:before{
    content:"Beispiel";
	font-weight:bold;
}
.de-DE .example:before{
    content:"Beispiel";
	font-weight:bold;
}
.de-DE .postreq:before{
    content:"Was folgt als Nächstes";
	font-weight:bold;
}

/*
 * --------------------------------------
 * hu-HU
 */
.hu-HU .prereq:before{
   content:"A kezdés előtt";
	font-weight:bold;
}
.hu-HU .steps:before{
   content:"Lépések";
	font-weight:bold;
}
.hu-HU .result:before{
    content:"Eredmény";
	font-weight:bold;
}
.hu-HU .stepxmp:before{
    content:"Példa";
	font-weight:bold;
}
.hu-HU .example:before{
    content:"Példa";
	font-weight:bold;
}
.hu-HU .postreq:before{
    content:"Következő lépések";
	font-weight:bold;
}

/*
 * --------------------------------------
 * it-IT
 */
.it-IT .prereq:before{
   content:"Prima di iniziare";
	font-weight:bold;
}
.it-IT .steps:before{
   content:"Procedura";
	font-weight:bold;
}
.it-IT .result:before{
    content:"Risultati";
	font-weight:bold;
}
.it-IT .stepxmp:before{
    content:"Esempio";
	font-weight:bold;
}
.it-IT .example:before{
    content:"Esempio";
	font-weight:bold;
}
.it-IT .postreq:before{
    content:"Come continuare";
	font-weight:bold;
}

/*
 * --------------------------------------
 * pt-BR
 */
.pt-BR .prereq:before{
   content:"Antes de Iniciar";
	font-weight:bold;
}
.pt-BR .steps:before{
   content:"Etapas";
	font-weight:bold;
}
.pt-BR .result:before{
    content:"Resultado";
	font-weight:bold;
}
.pt-BR .stepxmp:before{
    content:"Exemplo";
	font-weight:bold;
}
.pt-BR .example:before{
    content:"Exemplo";
	font-weight:bold;
}
.pt-BR .postreq:before{
    content:"O que fazer em seguida";
	font-weight:bold;
}

/*
 * --------------------------------------
 * es-MX
 */
.es-MX .prereq:before{
   content:"Antes de comenzar";
	font-weight:bold;
}
.es-MX .steps:before{
   content:"Pasos";
	font-weight:bold;
}
.es-MX .result:before{
    content:"Resultado";
	font-weight:bold;
}
.es-MX .stepxmp:before{
    content:"Ejemplo";
	font-weight:bold;
}
.es-MX .example:before{
    content:"Ejemplo";
	font-weight:bold;
}
.es-MX .postreq:before{
    content:"Qué hacer a continuación";
	font-weight:bold;
}

/*
 * --------------------------------------
 * es-ES
 */
.es-ES .prereq:before{
   content:"Antes de comenzar";
	font-weight:bold;
}
.es-ES .steps:before{
   content:"Pasos";
	font-weight:bold;
}
.es-ES .result:before{
    content:"Resultado";
	font-weight:bold;
}
.es-ES .stepxmp:before{
    content:"Ejemplo";
	font-weight:bold;
}
.es-ES .example:before{
    content:"Ejemplo";
	font-weight:bold;
}
.es-ES .postreq:before{
    content:"Qué hacer a continuación";
	font-weight:bold;
}

/*
 * --------------------------------------
 * tr-TR
 */
.tr-TR .prereq:before{
   content:"Başlamadan Önce";
	font-weight:bold;
}
.tr-TR .steps:before{
   content:"Adımlar";
	font-weight:bold;
}
.tr-TR .result:before{
    content:"Sonuç";
	font-weight:bold;
}
.tr-TR .stepxmp:before{
    content:"Örnek";
	font-weight:bold;
}
.tr-TR .example:before{
    content:"Örnek";
	font-weight:bold;
}
.tr-TR .postreq:before{
    content:"Sonra ne yapmalı";
	font-weight:bold;
}

/*
 * --------------------------------------
 * ru-RU
 */
.ru-RU .prereq:before{
   content:"Перед началом работы";
	font-weight:bold;
}
.ru-RU .steps:before{
   content:"Порядок действий";
	font-weight:bold;
}
.ru-RU .result:before{
    content:"Результат";
	font-weight:bold;
}
.ru-RU .stepxmp:before{
    content:"Пример";
	font-weight:bold;
}
.ru-RU .example:before{
    content:"Пример";
	font-weight:bold;
}
.ru-RU .postreq:before{
    content:"Что далее";
	font-weight:bold;
}

/*
 * --------------------------------------
 * pl-PL
 */
.pl-PL .prereq:before{
   content:"Zanim zaczniesz";
	font-weight:bold;
}
.pl-PL .steps:before{
   content:"Kroki";
	font-weight:bold;
}
.pl-PL .result:before{
    content:"Wynik";
	font-weight:bold;
}
.pl-PL .stepxmp:before{
    content:"Przykład";
	font-weight:bold;
}
.pl-PL .example:before{
    content:"Przykład";
	font-weight:bold;
}
.pl-PL .postreq:before{
    content:"Co dalej";
	font-weight:bold;
}

/*
 * --------------------------------------
 *
 */

/* 2026-08-11 更新点：支持通过 outputclass=flow-timeline 将普通有序列表和 Steps 显示为时间流卡片。 */
ol.ol:is(.flow-timeline, .timeline),
ol.steps:is(.flow-timeline, .timeline) {
	 margin: 32px 0 32px 14px;
	 padding: 0;
	 color: var(--font-color-topic-content);
	 list-style: none;
}

ol.steps:is(.flow-timeline, .timeline)::before {
	 display: block;
	 margin: 0 0 16px -14px;
	 color: var(--font-color-section-title3);
	 font-size: 14px;
	 line-height: 24px;
}

ol.ol:is(.flow-timeline, .timeline) > li,
ol.steps:is(.flow-timeline, .timeline) > li {
	 position: relative;
	 margin: 0 !important;
	 padding: 0 0 24px 32px;
	 list-style: none;
}

ol.ol:is(.flow-timeline, .timeline) > li:last-child,
ol.steps:is(.flow-timeline, .timeline) > li:last-child {
	 padding-bottom: 0;
}

ol.ol:is(.flow-timeline, .timeline) > li::before,
ol.steps:is(.flow-timeline, .timeline) > li::before {
	 content: counter(list-item);
	 position: absolute;
	 top: 0;
	 left: -14px;
	 z-index: 1;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 28px;
	 height: 28px;
	 border-radius: 50%;
	 color: var(--font-color-section-title3);
	 background-color: #F0F2F5;
	 font-size: 14px;
	 font-weight: 600;
	 line-height: 28px;
	 box-sizing: border-box;
}

ol.ol:is(.flow-timeline, .timeline) > li:not(:last-child)::after,
ol.steps:is(.flow-timeline, .timeline) > li:not(:last-child)::after {
	 content: "";
	 position: absolute;
	 top: 32px;
	 bottom: 8px;
	 left: 0;
	 width: 1px;
	 background-color: #E8E8E8;
}

/* 2026-08-11 更新点：纵向时间轴末项保留略短于卡片高度的渐隐尾线，避免流程在节点处突兀结束。 */
ol.ol:is(.flow-timeline, .timeline) > li:last-child::after,
ol.steps:is(.flow-timeline, .timeline) > li:last-child::after {
	 content: "";
	 position: absolute;
	 top: 32px;
	 bottom: 8px;
	 left: 0;
	 width: 1px;
	 background: linear-gradient(to bottom, #E8E8E8 0%, #E8E8E8 calc(100% - 32px), rgba(232, 232, 232, 0) 100%);
}

ol.ol:is(.flow-timeline, .timeline) > li > .ph:first-child,
ol.steps:is(.flow-timeline, .timeline) > li > .cmd {
	 display: block;
	 margin: 0 0 8px;
	 color: var(--font-color-section-title);
	 font-size: 18px;
	 font-weight: 600;
	 line-height: 28px;
}

/* 2026-08-18 更新点：timeline 标题链接继承标题颜色并取消下划线，保持普通链接点击行为。 */
ol.ol:is(.flow-timeline, .timeline) > li > .ph:first-child a,
ol.steps:is(.flow-timeline, .timeline) > li > .cmd a,
ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > .ph:first-child a,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .cmd a {
	 color: inherit;
	 text-decoration: none;
}

/* 2026-08-18 更新点：普通 Timeline 节点悬浮或 ph 标题链接聚焦时，显示 pointer 箭头。 */
ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li > .ph:first-child a::after {
	 content: "";
	 display: inline-block;
	 width: 20px;
	 height: 20px;
	 margin-left: 4px;
	 background-color: currentColor;
	 vertical-align: -4px;
	 opacity: 0;
	 transform: translateX(-4px);
	 transition: opacity 160ms ease, transform 160ms ease;
	 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") center / contain no-repeat;
	 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li:hover > .ph:first-child a::after,
ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li > .ph:first-child a:focus-visible::after {
	 opacity: 1;
	 transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	 ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li > .ph:first-child a::after {
		 transition: none;
	 }
}

/* 2026-08-19 更新点：普通 Timeline 中除首个 ph 标题外，所有直属内容块均生成卡片，支持 p、ol、ul 等标记。 */
ol.ol:is(.flow-timeline, .timeline) > li > :not(.ph:first-child),
ol.steps:is(.flow-timeline, .timeline) > li > .info {
	 margin: 0 0 8px !important;
	 padding: 12px 16px;
	 border: var(--border-normal);
	 border-radius: 10px;
	 color: var(--font-color-topic-content);
	 background-color: var(--background-color-normal);
	 line-height: 24px;
	 box-sizing: border-box;
}

/* ol、ul 需要为列表符号预留比普通内容卡片更宽的起始侧内边距。 */
ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child):is(ol, ul) {
	 padding-inline-start: 36px;
}

ol.ol:is(.flow-timeline, .timeline) > li > :not(.ph:first-child):last-child,
ol.steps:is(.flow-timeline, .timeline) > li > .info:last-child {
	 margin-bottom: 0 !important;
}

ol.steps:is(.flow-timeline, .timeline) > li > .info > :first-child {
	 margin-top: 0 !important;
}

ol.steps:is(.flow-timeline, .timeline) > li > .info > :last-child {
	 margin-bottom: 0 !important;
}

/* 2026-08-11 更新点：增加 outputclass=flow-timeline-horizontal，桌面端使用包含末端连线的完整横向轴线，移动端自动切换为纵向时间流。 */
ol.ol:is(.flow-timeline-horizontal, .timeline-h),
ol.steps:is(.flow-timeline-horizontal, .timeline-h) {
	 position: relative;
	 display: grid;
	 grid-auto-flow: column;
	 grid-auto-columns: minmax(220px, 1fr);
	 align-items: start;
	 column-gap: 24px;
	 margin: 32px 0;
	 padding: 0 0 8px;
	 color: var(--font-color-topic-content);
	 list-style: none;
	 overflow-x: auto;
	 scroll-snap-type: x proximity;
	 scrollbar-width: thin;
	 -webkit-overflow-scrolling: touch;
	 counter-reset: flow-timeline-horizontal-item;
}

ol.steps:is(.flow-timeline-horizontal, .timeline-h) {
	 padding-top: 40px;
}

ol.steps:is(.flow-timeline-horizontal, .timeline-h)::before {
	 position: absolute;
	 top: 0;
	 left: 0;
	 display: block;
	 color: var(--font-color-section-title3);
	 font-size: 14px;
	 line-height: 24px;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li {
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 min-width: 0;
	 margin: 0 !important;
	 padding: 44px 0 0;
	 list-style: none;
	 scroll-snap-align: start;
	 counter-increment: flow-timeline-horizontal-item;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li::before,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li::before {
	 content: counter(flow-timeline-horizontal-item);
	 position: absolute;
	 top: 0;
	 left: 0;
	 z-index: 1;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 28px;
	 height: 28px;
	 border-radius: 50%;
	 color: var(--font-color-section-title3);
	 background-color: #F0F2F5;
	 font-size: 14px;
	 font-weight: 600;
	 line-height: 28px;
	 box-sizing: border-box;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li::after,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li::after {
	 content: "";
	 position: absolute;
	 top: 14px;
	 right: 0;
	 left: 32px;
	 height: 1px;
	 background-color: #E8E8E8;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li:not(:last-child)::after,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li:not(:last-child)::after {
	 right: -20px;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > .ph:first-child,
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .cmd {
	 display: block;
	 margin: 0 0 8px;
	 color: var(--font-color-section-title);
	 font-size: 18px;
	 font-weight: 600;
	 line-height: 28px;
}

ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child),
ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .info {
	 width: 100%;
	 margin: 0 !important;
	 padding: 12px 16px;
	 border: var(--border-normal);
	 border-radius: 10px;
	 color: var(--font-color-topic-content);
	 background-color: var(--background-color-normal);
	 line-height: 24px;
	 box-sizing: border-box;
}

/* 2026-08-19 更新点：横向时间流的多个直属内容块始终纵向排列，并分别占满所在时间节点。 */
ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child):not(:last-child) {
	 margin-bottom: 8px !important;
}

ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .info > :first-child {
	 margin-top: 0 !important;
}

ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .info > :last-child {
	 margin-bottom: 0 !important;
}

/* 2026-08-11 更新点：悬浮时间流的 li 或 step 时，对应数字圆点使用蓝色高亮背景。 */
ol:is(.ol, .steps):is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li::before {
	 transition: color 0.2s ease, background-color 0.2s ease;
}

ol:is(.ol, .steps):is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li:hover::before {
	 color: #FFFFFF;
	 background-color: #2188FF;
}

/* 2026-08-11 更新点：增加 timeline、timeline-h 和 cards-h 简写，其中 cards-h 仅用于纵向时间流的多卡片横排。 */
ol.ol:is(.flow-timeline, .timeline).cards-h {
	 counter-reset: flow-timeline-cards-item;
}

ol.ol:is(.flow-timeline, .timeline).cards-h > li {
	 counter-increment: flow-timeline-cards-item;
}

ol.ol:is(.flow-timeline, .timeline).cards-h > li::before {
	 content: counter(flow-timeline-cards-item);
}

ol.ol:is(.flow-timeline, .timeline).cards-h > li:has(> :not(.ph:first-child) ~ :not(.ph:first-child)) {
	 display: flex;
	 flex-direction: row;
	 flex-wrap: wrap;
	 justify-content: flex-start;
	 gap: 8px;
}

ol.ol:is(.flow-timeline, .timeline).cards-h > li:has(> :not(.ph:first-child) ~ :not(.ph:first-child)) > .ph:first-child {
	 flex: 0 0 100%;
}

/* 2026-08-19 更新点：多卡片支持所有直属内容块，最多三列且换行后保持左对齐；仅一个内容块时仍占满整行。 */
ol.ol:is(.flow-timeline, .timeline).cards-h > li:has(> :not(.ph:first-child) ~ :not(.ph:first-child)) > :not(.ph:first-child) {
	 flex: 0 1 calc((100% - 16px) / 3);
	 width: auto;
	 min-width: min(180px, 100%);
	 max-width: calc((100% - 16px) / 3);
	 margin: 0 !important;
}

ol.ol:is(.flow-timeline, .timeline).cards-h > li:has(> :not(.ph:first-child) ~ :not(.ph:first-child)):not(:has(> :not(.ph:first-child) ~ :not(.ph:first-child) ~ :not(.ph:first-child))) > :not(.ph:first-child) {
	 flex-basis: calc((100% - 8px) / 2);
	 max-width: calc((100% - 8px) / 2);
}

@media only screen and (max-width: 768px) {
	 ol.ol:is(.flow-timeline, .timeline),
	 ol.steps:is(.flow-timeline, .timeline) {
		 margin: 24px 0 24px 12px;
	 }

	 ol.steps:is(.flow-timeline, .timeline)::before {
		 margin: 0 0 12px -12px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li,
	 ol.steps:is(.flow-timeline, .timeline) > li {
		 padding: 0 0 18px 28px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li:last-child,
	 ol.steps:is(.flow-timeline, .timeline) > li:last-child {
		 padding-bottom: 0;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li::before,
	 ol.steps:is(.flow-timeline, .timeline) > li::before {
		 left: -12px;
		 width: 24px;
		 height: 24px;
		 font-size: 12px;
		 line-height: 24px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li:not(:last-child)::after,
	 ol.steps:is(.flow-timeline, .timeline) > li:not(:last-child)::after {
		 top: 28px;
		 bottom: 6px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li:last-child::after,
	 ol.steps:is(.flow-timeline, .timeline) > li:last-child::after {
		 top: 28px;
		 bottom: 6px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li > .ph:first-child,
	 ol.steps:is(.flow-timeline, .timeline) > li > .cmd {
		 margin-bottom: 6px;
		 font-size: 16px;
		 line-height: 24px;
	 }

	 ol.ol:is(.flow-timeline, .timeline) > li > :not(.ph:first-child),
	 ol.steps:is(.flow-timeline, .timeline) > li > .info {
		 padding: 10px 12px;
		 border-radius: 8px;
		 font-size: 13px;
		 line-height: 20px;
	 }

	 ol.ol:is(.flow-timeline, .timeline, .flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child):is(ol, ul) {
		 padding-inline-start: 32px;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h),
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) {
		 display: block;
		 margin: 24px 0 24px 12px;
		 padding: 0;
		 overflow: visible;
		 scroll-snap-type: none;
	 }

	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) {
		 padding-top: 0;
	 }

	 ol.steps:is(.flow-timeline-horizontal, .timeline-h)::before {
		 position: static;
		 display: block;
		 margin: 0 0 12px -12px;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li {
		 display: block;
		 min-width: 0;
		 padding: 0 0 18px 28px;
		 scroll-snap-align: none;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li:last-child,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li:last-child {
		 padding-bottom: 0;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li::before,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li::before {
		 top: 0;
		 left: -12px;
		 width: 24px;
		 height: 24px;
		 font-size: 12px;
		 line-height: 24px;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li::after,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li::after {
		 display: none;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li:not(:last-child)::after,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li:not(:last-child)::after {
		 display: block;
		 top: 28px;
		 right: auto;
		 bottom: 6px;
		 left: 0;
		 width: 1px;
		 height: auto;
	 }

	 /* 2026-08-11 更新点：横向时间轴在移动端转为纵向后，末项同样显示渐隐尾线。 */
	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li:last-child::after,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li:last-child::after {
		 display: block;
		 top: 28px;
		 right: auto;
		 bottom: 6px;
		 left: 0;
		 width: 1px;
		 height: auto;
		 background: linear-gradient(to bottom, #E8E8E8 0%, #E8E8E8 calc(100% - 32px), rgba(232, 232, 232, 0) 100%);
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > .ph:first-child,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .cmd {
		 margin-bottom: 6px;
		 font-size: 16px;
		 line-height: 24px;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child),
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .info {
		 width: auto;
		 margin-bottom: 8px !important;
		 padding: 10px 12px;
		 border-radius: 8px;
		 font-size: 13px;
		 line-height: 20px;
	 }

	 ol.ol:is(.flow-timeline-horizontal, .timeline-h) > li > :not(.ph:first-child):last-child,
	 ol.steps:is(.flow-timeline-horizontal, .timeline-h) > li > .info:last-child {
		 margin-bottom: 0 !important;
	 }

	 ol.ol:is(.flow-timeline, .timeline).cards-h > li:has(> :not(.ph:first-child) ~ :not(.ph:first-child)) {
		 display: block;
	 }

	 ol.ol:is(.flow-timeline, .timeline).cards-h > li > :not(.ph:first-child) {
		 width: auto;
		 min-width: 0;
		 max-width: none;
		 margin-bottom: 8px !important;
	 }

	 ol.ol:is(.flow-timeline, .timeline).cards-h > li > :not(.ph:first-child):last-child {
		 margin-bottom: 0 !important;
	 }
}


/*
 * --------------------------------------
 *
 */