@voplus/morpho-csp 11.2.6 → 11.2.7

package/es/style/clda-form-theme.css

@@ -0,0 +1,1068 @@
+/**
+ * CLDA 表单共享样式层（SGP / BVI / AGM / Company General / Appoint Representative 五套表单复用）。
+ *
+ * 约定：
+ * 1. 所有规则都收在 `.incorporation-form-common-style` 作用域内，只影响这五套表单，
+ *    不会外溢到其它模块；
+ * 2. 只放「跨表单一致」的版式（卡片、标题、引言、校验提示、内部使用区、行内编辑图标），
+ *    表单独有的结构样式仍留在各自的 index.css；
+ * 3. 只使用 CSS 变量（来自 @voplus/morpho-theme 令牌）与纯 CSS，不依赖 Tailwind 的 @apply
+ *    —— 本包构建产物是 `tsc + copyfiles`，CSS 原样发布，未经 PostCSS 编译，@apply 会失效。
+ */
+
+.incorporation-form-common-style {
+	/* ============ 表单容器 ============ */
+	&.incorporation-sgp-form,
+	&.incorporation-bvi-form,
+	&.incorporation-agm-form,
+	&.company-general-from-review,
+	&.appoint-representative-from-review {
+		max-width: 1000px;
+		margin: 0 auto;
+	}
+
+	/* ============ 卡片：内边距 18px（antd 默认 24px） ============ */
+	.self-registration-section > .ant-card-body {
+		padding: 18px;
+	}
+
+	/* ============ 分区标题：下划线 + 图标 14px ============ */
+	.self-registration-section {
+		.section-title {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: 8px;
+			padding-bottom: 13px;
+			border-bottom: 1px solid var(--border-color);
+			color: var(--purple-primary-color);
+			font-size: 15px;
+			font-weight: 700;
+			line-height: 22px;
+
+			> svg {
+				font-size: 14px;
+				margin-right: 0;
+			}
+		}
+	}
+
+	/* 标题右侧带 info 图标 / 计数的容器：图标紧跟标题，计数靠右 */
+	.clda-interpretation-card-title {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		gap: 8px;
+
+		> div:first-child {
+			display: inline-flex;
+			align-items: center;
+			gap: 8px;
+
+			> svg {
+				font-size: 14px;
+				margin-right: 0;
+			}
+		}
+
+		> svg {
+			margin-right: 0;
+		}
+
+		.title-actions {
+			margin-left: auto;
+			display: inline-flex;
+			align-items: center;
+			gap: 8px;
+		}
+	}
+
+	/* 标题右侧的计数（股东数 / 董事数） */
+	.clda-count {
+		color: #8a90a0;
+		font-size: 11.5px;
+		font-weight: 600;
+		white-space: nowrap;
+	}
+
+	/* ---------- 分组 ---------- */
+	.grp {
+		display: grid;
+		grid-template-columns: 100px minmax(0, 1fr);
+		gap: 6px 12px;
+		margin-top: 10px;
+	}
+
+	.grp > .gk {
+		font-size: 11.5px;
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		color: #3d4352;
+		padding-top: 2px;
+	}
+
+	.grp > .gv {
+		font-size: 13.5px;
+		font-weight: 500;
+		color: #3d4352;
+		line-height: 21px;
+		overflow-wrap: anywhere;
+	}
+
+	/* 无组标题变体：取消「标题列」占位，值直接占满整行
+	   （用双类名，确保压过 .new-officer-info-item 等同类单类名规则） */
+	.grp.grp--no-title {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.blk.blk--no-title {
+		margin-top: 0;
+		padding-top: 0;
+		border-top: 0;
+	}
+
+	.gv-inline {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 5px 22px;
+	}
+
+	.gv-grid2 {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 5px 22px;
+	}
+
+	.f .k {
+		font-size: 11px;
+		font-weight: 500;
+		letter-spacing: 0.03em;
+		text-transform: uppercase;
+		/* 提高对比度：#5f6b7d 在白底仅 3.76:1，改为 5.4:1 */
+		color: #5f6b7d;
+		margin-right: 7px;
+	}
+
+	.f .v {
+		font-size: 13.5px;
+		font-weight: 500;
+		color: #3d4352;
+
+		&.dim {
+			color: #b6bcc8;
+		}
+	}
+
+	.v-line {
+		display: block;
+	}
+
+	/* Internal Use Only 分组：暖色小标题 + 虚线分隔，与普通字段区分 */
+	.grp.internal {
+		margin-top: 12px;
+		padding-top: 12px;
+		border-top: 1px dashed #e2e6ee;
+
+		> .gk {
+			color: #8a6a1f;
+		}
+	}
+
+	.internal-form {
+		grid-column: 1 / -1;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 10px 18px;
+	}
+
+	/* ============ 编辑态的块 / 字段网格（ContactFields 等组件复用） ============ */
+	.blk + .blk {
+		margin-top: 14px;
+		padding-top: 14px;
+		border-top: 1px dashed #e2e6ee;
+	}
+
+	.blk-k {
+		display: flex;
+		align-items: center;
+		gap: 7px;
+		margin-bottom: 9px;
+		color: #3d4352;
+		font-weight: 700;
+		font-size: 11.5px;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+	}
+
+	.blk.internal .blk-k {
+		color: #8a6a1f;
+	}
+
+	.fgrid {
+		display: grid;
+		gap: 11px 14px;
+
+		&.c1 {
+			grid-template-columns: minmax(0, 1fr);
+		}
+
+		&.c2 {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+
+		&.c3 {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+		}
+	}
+
+	.field {
+		min-width: 0;
+
+		label {
+			display: block;
+			margin-bottom: 5px;
+			color: #5f6b7d;
+			font-weight: 500;
+			font-size: 11px;
+			letter-spacing: 0.03em;
+			text-transform: uppercase;
+		}
+	}
+
+	/* 块内复用的 antd 控件（Address / IdentityChange）统一为同一套字段样式 */
+	.blk {
+		.ant-form-item {
+			margin-bottom: 11px;
+		}
+
+		.ant-form-item-label {
+			padding-bottom: 5px;
+		}
+
+		.ant-form-item-label > label {
+			height: auto;
+			color: #5f6b7d;
+			font-weight: 500;
+			font-size: 11px;
+			letter-spacing: 0.03em;
+			text-transform: uppercase;
+		}
+
+		.ant-form-item-control-input {
+			min-height: auto;
+		}
+
+		.ant-row {
+			row-gap: 0;
+		}
+
+		.ant-input,
+		.ant-input-number,
+		.ant-select-single,
+		.ant-picker {
+			height: 32px;
+			border-radius: var(--border-radius, 5px);
+			font-size: 13px;
+		}
+
+		.ant-select-selector {
+			border-radius: var(--border-radius, 5px) !important;
+		}
+	}
+
+	/* 底部动作栏：与内容用分隔线隔开，按钮右对齐 */
+	.edit-bar {
+		display: flex;
+		justify-content: flex-end;
+		gap: 9px;
+		margin-top: 14px;
+		padding-top: 12px;
+		border-top: 1px solid var(--border-color-split, #f0f0f0);
+	}
+
+	/* ============ 行内动作图标（编辑 / 删除）= 人员行样式，全表单统一 ============
+	   所有明细行（人员行、银行开户、配股、转让、更名、拆股、高管详情）共用同一套
+	   尺寸与配色：26×26 命中区、13px 图标、默认 #c3c8d2，悬停分别为主题蓝 / 删除红。 */
+	.action-button {
+		display: flex;
+		align-items: center;
+		flex: none;
+		gap: 2px;
+		white-space: nowrap;
+
+		> span {
+			display: grid;
+			place-items: center;
+			width: 26px;
+			height: 26px;
+			color: #c3c8d2;
+			font-size: 13px;
+			border-radius: var(--border-radius, 5px);
+			cursor: pointer;
+			transition: color 0.14s ease, background 0.14s ease;
+		}
+
+		.edit-icon:hover {
+			color: var(--purple-primary-color, #1a4fb3);
+			background: #f0f7ff;
+		}
+
+		.delete-icon:hover {
+			color: var(--delete-color, #ee6868);
+			background: #fff1f1;
+		}
+	}
+
+	/* ============ 必填标识 ============ */
+	.required-fields {
+		color: #ff0000;
+		vertical-align: text-top;
+		font-weight: bold;
+		font-size: 14px;
+		line-height: 19px;
+	}
+
+	/* ============ 引言（各表单顶部说明块） ============ */
+	.incorporation-form-interpretation {
+		&::before {
+			content: "";
+			display: block;
+			width: 100%;
+			height: 13px;
+			background: var(--purple-primary-color);
+			border-radius: 5px 5px 0 0;
+		}
+
+		.introduction-information {
+			color: #3d4352;
+			font-weight: 600;
+			font-size: 13px;
+			line-height: 1.85;
+
+			p {
+				margin: 0;
+			}
+
+			> br {
+				display: none;
+			}
+
+			ul {
+				margin: 10px 0 0;
+				padding-left: 20px;
+				list-style: disc;
+
+				li {
+					margin-bottom: 7px;
+					list-style: disc;
+
+					&::marker {
+						color: #b6bcc8;
+					}
+				}
+			}
+
+			.tip-icon {
+				margin: 0 4px;
+				font-size: 12px;
+			}
+		}
+	}
+
+	/* ============ 校验提示 ============ */
+	.non-empty-check-prompt {
+		margin-top: 12px;
+		padding-top: 10px;
+		border-top: 1px solid var(--border-color-split);
+		color: #a84141;
+		font-weight: 600;
+		font-size: 13px;
+		line-height: 19px;
+
+		> span {
+			vertical-align: text-top;
+		}
+
+		.warning {
+			display: inline-block;
+			margin-top: 10px;
+			color: #a84141;
+			font-size: 12.5px;
+			font-weight: 600;
+		}
+	}
+
+	/* ============ 子标题（Internal Use / DPO / 内部块） ============ */
+	.sub-title {
+		margin-bottom: 8px;
+		color: #3d4352;
+		font-weight: 700;
+		font-size: 12.5px;
+		line-height: 18px;
+	}
+
+	/* ============ 内部使用区：虚线分隔 + 标签胶囊 ============ */
+	.internal-use-section {
+		margin-top: 14px;
+		padding-top: 14px;
+		border-top: 1px dashed #e2e6ee;
+
+		&.secretary-list {
+			margin-top: 0;
+			padding-top: 0;
+			border-top: 0;
+		}
+
+		.ant-divider {
+			display: none;
+		}
+
+		.mention-list,
+		.ant-select-selection-overflow {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 8px;
+		}
+
+		.unit-reference-node,
+		.ant-select-selection-item {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			padding: 4px 12px;
+			border: 1px solid #dbe7f7;
+			border-radius: 999px;
+			background: #f0f7ff;
+			color: var(--purple-primary-color);
+			font-size: 12.5px;
+			font-weight: 600;
+		}
+
+		.ant-checkbox-wrapper {
+			color: #3d4352;
+			font-size: 13.5px;
+		}
+
+		.halvingline {
+			margin: 16px 0;
+		}
+	}
+
+	/* ============ 列表区块容器 ============ */
+	.officer-list {
+		margin-bottom: 16px;
+
+		.ant-card {
+			margin-bottom: 0;
+		}
+	}
+
+	/* ============ InlineEdit：与人员行动作图标统一 ============ */
+	.morpho-inline-edit {
+		> .content-container > .content.clickable {
+			cursor: pointer;
+		}
+
+		.edit-icon,
+		.delete-icon,
+		.buttons {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 26px;
+			height: 26px;
+			padding: 0;
+			border-radius: var(--border-radius);
+			color: #c3c8d2;
+			font-size: 13px;
+			transition: color 0.14s ease, background 0.14s ease;
+
+			svg {
+				margin: 0;
+				filter: none;
+			}
+		}
+
+		.edit-icon:hover,
+		.buttons:hover {
+			color: var(--purple-primary-color);
+			background: #f0f7ff;
+		}
+
+		.delete-icon:hover {
+			color: var(--delete-color);
+			background: #fff1f1;
+		}
+	}
+
+	/* ============ 提交区 ============ */
+	.incorporation-form-submit {
+		margin-bottom: 16px;
+	}
+
+	.incorporation-form-submitted {
+		padding: 0 18px;
+		text-align: right;
+		color: #6b7280;
+		font-size: 13px;
+	}
+
+	/* ============ 新增/移除高管详情（Company General 与 Appoint Representative 共用） ============ */
+	.new-officer-select {
+		margin-bottom: 15px;
+	}
+
+	.new-officer-details-list {
+		margin-bottom: 20px;
+
+		.new-officer-details-item {
+			.halvingline {
+				margin-bottom: 40px;
+			}
+
+			.new-officer-title {
+				display: flex;
+				align-items: center;
+
+				.new-officer-title-info {
+					flex: 1;
+
+					.ant-input-affix-wrapper {
+						border-radius: var(--border-radius);
+					}
+				}
+
+				.new-officer-name {
+					font-size: 12.5px;
+					line-height: 18px;
+					font-weight: 700;
+				}
+
+				/* 图标样式见共享类 .action-button */
+			}
+
+			.basic-info {
+				display: flex;
+				line-height: 0;
+				margin-top: 10px;
+
+				.shares-input {
+					flex: 1;
+					display: flex;
+					align-items: center;
+					margin-right: 3em;
+
+					.ant-input-number {
+						width: 100%;
+					}
+
+					.ant-input-number-disabled {
+						color: #3d4352;
+						background-color: transparent;
+						cursor: auto;
+					}
+
+					.ant-input-number-prefix {
+						color: #000;
+					}
+
+					.ant-input-number-affix-wrapper {
+						width: 100%;
+						border-radius: var(--border-radius);
+					}
+
+					.ant-input-number-affix-wrapper-disabled {
+						padding: 0;
+					}
+				}
+
+				.ant-input-affix-wrapper {
+					flex: 1;
+					border-radius: var(--border-radius);
+					margin-right: 3em;
+				}
+
+				.ant-input-affix-wrapper-disabled {
+					color: #3d4352;
+					cursor: auto;
+					padding: 4px 0 !important;
+
+					.ant-input[disabled] {
+						color: #3d4352;
+						cursor: auto;
+					}
+				}
+			}
+
+			.new-officer-info-content {
+				display: flex;
+				flex-direction: column;
+
+				> div:nth-child(2) {
+					margin-bottom: 10px;
+				}
+
+				.new-officer-info-item {
+					flex: 1;
+					position: relative;
+					padding-right: 3em;
+
+					.buttons {
+						position: absolute;
+						right: 30px;
+						top: 0;
+					}
+
+					.new-officer-item-name {
+						padding-bottom: 16px;
+						font-size: 12.5px;
+						font-weight: bold;
+
+						svg {
+							margin-right: 5px;
+						}
+					}
+
+					.new-officer-info-address {
+						padding-bottom: 16px;
+					}
+
+					.morpho-inline-edit {
+						width: 80%;
+					}
+				}
+			}
+		}
+	}
+
+	/* ============ 表单 label 对比度（antd Form.Item） ============ */
+	.ant-form-item-label {
+		padding-bottom: 5px;
+
+		> label {
+			color: #3d4352;
+			font-size: 12.5px;
+			font-weight: 600;
+		}
+	}
+
+	/* ============ 高管详情行（New Representative / New Officer Detail） ============ */
+	.new-officer-details-item {
+		padding: 16px 0 17px;
+		border-bottom: 1px solid var(--border-color-split);
+
+		&:last-child {
+			border-bottom: 0;
+		}
+
+		.new-officer-title {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: 6px 10px;
+
+			.new-officer-title-info {
+				flex: 1;
+				min-width: 0;
+			}
+
+			.new-officer-name {
+				color: #1f2330;
+				font-size: 15px;
+				font-weight: 700;
+				letter-spacing: -0.005em;
+				/* 长姓名（如 Siti Nurhaliza Binte Osman）换行而不是撑破行 */
+				overflow-wrap: anywhere;
+			}
+
+			/* 图标样式见共享类 .action-button */
+		}
+
+		.new-officer-position {
+			margin-top: 12px;
+
+			.ant-form-item {
+				margin-bottom: 10px;
+			}
+
+			.ant-select-multiple {
+				width: 100%;
+			}
+		}
+
+		.basic-info {
+			display: flex;
+			gap: 12px;
+			margin-top: 4px;
+
+			.ant-input,
+			.ant-input-affix-wrapper {
+				height: 32px;
+				border-radius: var(--border-radius);
+			}
+		}
+
+		.new-officer-info-content {
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+			margin-top: 12px;
+		}
+
+		/* Address / Identify Info：复用共享的 .grp / .gk / .gv 骨架，
+		   这里只保留行内的紧凑间距 */
+		.new-officer-info-item {
+			margin-top: 6px;
+		}
+
+		/* 底部 Cancel / Save 动作栏（行级，横跨整行） */
+		.new-officer-edit-bar {
+			display: flex;
+			justify-content: flex-end;
+			gap: 9px;
+			margin-top: 12px;
+			padding-top: 10px;
+			border-top: 1px solid var(--border-color-split);
+		}
+
+		/* 行分隔线取代 Divider */
+		.halvingline {
+			display: none;
+		}
+	}
+
+	/* ============ Section 标题栏（标题 + Add Item） ============ */
+	.section-header {
+		/* 填满标题行的可用宽度，才能让标题与按钮真正两端对齐
+		   （.section-title 是 flex 容器，flex 项默认按内容宽度收缩） */
+		flex: 1 1 100%;
+		min-width: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 10px;
+
+		> div:first-child {
+			flex: 1;
+			min-width: 0;
+			color: var(--purple-primary-color);
+			font-size: 15px;
+			font-weight: 700;
+			line-height: 22px;
+		}
+	}
+
+	/* 虚线 Add 按钮的样式见下方「Add 按钮」共享分组（.clda-add-btn） */
+
+	/* ============ 地址区块（BVI Trading/Record Address、Company General Registered/Index Address、
+	   SGP Registered Address、New Officer Detail Address 共用） ============ */
+	.address-display {
+		color: #3d4352;
+		font-size: 13.5px;
+		font-weight: 500;
+		line-height: 21px;
+
+		.ant-row {
+			display: block;
+		}
+
+		.ant-col {
+			display: block;
+			width: 100%;
+		}
+
+		.value-line {
+			display: block;
+		}
+	}
+
+	.address-editor {
+		.address-editor-fields {
+			.ant-form-item {
+				margin-bottom: 11px;
+			}
+
+			.ant-form-item-label {
+				padding-bottom: 5px;
+			}
+
+			.ant-form-item-label > label {
+				width: auto;
+				max-width: 100%;
+				white-space: nowrap;
+				height: auto;
+				color: #5f6b7d;
+				font-size: 11px;
+				font-weight: 500;
+				letter-spacing: 0.03em;
+				text-transform: uppercase;
+			}
+
+			.ant-input,
+			.ant-select-single,
+			.ant-picker {
+				height: 32px;
+				border-radius: var(--border-radius);
+				font-size: 13px;
+			}
+
+			.ant-select-selector {
+				border-radius: var(--border-radius) !important;
+			}
+		}
+
+		.edit-bar {
+			display: flex;
+			justify-content: flex-end;
+			gap: 9px;
+			margin-top: 12px;
+			padding-top: 10px;
+			border-top: 1px solid var(--border-color-split);
+		}
+	}
+
+	/* Identity 类的横向表单（IdentityChange）：改成两列字段块 */
+	.identity-fields {
+		.ant-form {
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			gap: 11px 14px;
+		}
+
+		.ant-form-item {
+			margin-bottom: 0;
+		}
+
+		.ant-form-item-row {
+			display: block;
+		}
+
+		.ant-form-item-label {
+			width: auto;
+			padding-bottom: 5px;
+			text-align: left;
+
+			> label {
+				width: auto;
+				white-space: nowrap;
+				color: #5f6b7d;
+				font-size: 11px;
+				font-weight: 500;
+				letter-spacing: 0.03em;
+				text-transform: uppercase;
+			}
+		}
+
+		.ant-form-item-control {
+			width: 100%;
+		}
+
+		.ant-input,
+		.ant-select-single,
+		.ant-picker {
+			height: 32px;
+			border-radius: var(--border-radius);
+			font-size: 13px;
+		}
+	}
+
+	/* ============ 明细列表（Bank Opening / Transfer / Issue Shares / Officer 等） ============ */
+	.bank-opening-contact-item,
+	.company-general-allotment-info,
+	.company-general-transfer-info,
+	.divide-column-item,
+	.company-general-officer-info {
+		padding: 16px 0 17px;
+		border-bottom: 1px solid var(--border-color-split);
+
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+
+	.bank-opening-column-list,
+	.company-general-allotment-list,
+	.company-general-transfer-list,
+	.divide-column-list,
+	.new-officer-details-list {
+		> :last-child {
+			border-bottom: 0;
+		}
+	}
+
+	.bank-opening-column-item-header,
+	.Redonmination-column-item-header,
+	.company-general-allotment-header,
+	.company-general-transfer-header,
+	.divide-column-item-header {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		margin-bottom: 10px;
+
+		> div:first-child:not(.action-button) {
+			flex: 1;
+			min-width: 0;
+		}
+
+		/* 图标样式见共享类 .action-button，这里只负责推到行尾 */
+		.action-button {
+			margin-left: auto;
+		}
+	}
+
+	/* 明细标题：与人员行组标题/姓名同层级
+	   （.bank-opening-contact-title 只用于 Bank Opening 的「New Authorised Signatory」，
+	    样式由 BankOpeningList/index.css 自己维护） */
+	.company-general-allotment-title,
+	.company-general-transfer-title,
+	.divide-column-item-header .divide-column-item-title,
+	.company-general-transferee-name,
+	.company-general-officer-header .officer-name {
+		color: #1f2330;
+		font-size: 14.5px;
+		font-weight: 700;
+		letter-spacing: -0.005em;
+	}
+
+	/* 明细内的字段标签/值（antd Row/Col 结构） */
+	.bank-opening-column-list,
+	.company-general-allotment-content,
+	.company-general-transferor-content,
+	.company-general-transferee,
+	.divide-column-item-content {
+		color: #3d4352;
+		font-size: 13.5px;
+		font-weight: 500;
+		line-height: 21px;
+
+		.ant-col {
+			color: #3d4352;
+		}
+	}
+
+	/* ============ Company General 明细行：统一的上下留白 + 行分隔线 ============
+	   银行开户 / 拆合股 / 转让 / 配股 / 更名 / 高管等明细行共用同一套行距：
+	   行内上下留白 14/16px，行间用 1px 分隔线（最后一行不画），
+	   因此各组件里不再需要 margin-bottom / Divider 等临时补丁。 */
+	.bank-opening-column-item,
+	.bank-opening-contact-item,
+	.divide-column-item,
+	.Redonmination-column-item,
+	.company-general-allotment-info,
+	.company-general-transfer-info,
+	.company-general-officer-info {
+		margin-bottom: 0;
+		padding: 14px 0 16px;
+		border-bottom: 1px solid var(--border-color-split);
+
+		&:last-child {
+			border-bottom: 0;
+		}
+
+		/* 编辑态：字段行与 Save/Cancel 之间的呼吸空间（.edit-bar 自身的间距见上） */
+		.edit-bar {
+			margin-top: 12px;
+		}
+	}
+
+	/* 明细行内的 Divider 由行分隔线取代 */
+	.halvingline {
+		display: none;
+	}
+
+	/* ============ 按钮与列表锚点（原 style/common.css 迁入） ============ */
+	.ant-btn {
+		height: 30px;
+		padding: 2px 15px;
+	}
+
+	/* Add 按钮（列表底部 / Section 标题栏共用）：虚线按钮，样式只在这里维护 */
+	.add-shareholder-btn,
+	.add-director-btn,
+	.add-director-fee-btn,
+	.add-ceo-btn,
+	.add-secretary-btn,
+	.clda-add-btn {
+		height: 32px;
+		padding: 0 14px;
+		border: 1px dashed #b9cbe4;
+		border-radius: var(--border-radius);
+		background: #fff;
+		color: var(--purple-primary-color);
+		font-weight: 600;
+		font-size: 13px;
+		line-height: 30px;
+
+		&:hover {
+			border-color: var(--purple-primary-color) !important;
+			background: #f0f7ff !important;
+			color: var(--purple-primary-color) !important;
+		}
+	}
+
+	/* 列表底部的 Add 按钮与上方列表留出间距（标题栏里的 .clda-add-btn 不需要） */
+	.add-shareholder-btn,
+	.add-director-btn,
+	.add-director-fee-btn,
+	.add-ceo-btn,
+	.add-secretary-btn {
+		margin-top: 14px;
+	}
+
+	/* 列表包裹层：容器查询锚点（宽度取实际可用宽度，兼容 DefaultView / PropertiesView 侧栏），
+	   同时负责最后一行不画分隔线 */
+	.clda-list {
+		container-type: inline-size;
+		container-name: cldacontact;
+
+		> .clda-contact-list:last-child {
+			border-bottom: 0;
+		}
+	}
+
+	/*
+	 * info 图标：统一 --default-color（设计稿）。
+	 * 这里只覆盖直接用 `<span className="tip-icon">` 写在前言等处的图标；
+	 * `<Tip>` 组件自带等价样式（controls/Tips/Tip.css 的 .sr-tip-icon），
+	 * 因为它还要在 CLDA 作用域之外（Shopping Cart）渲染，改值请两处同步。
+	 */
+	.tip-icon {
+		display: inline-flex;
+		align-items: center;
+		color: var(--default-color);
+		font-size: 13px;
+		line-height: 1;
+		cursor: help;
+
+		&:hover {
+			color: var(--primary-color);
+		}
+	}
+}
+
+/* 窄容器：高管详情行的动作栏按钮等宽、字段网格单列 */
+@container cldasection (max-width: 420px) {
+	/* 注意：这里必须带 .new-officer-details-item 才能压过基础规则（同源、3 个类名） */
+	.incorporation-form-common-style .new-officer-details-item {
+		.new-officer-edit-bar {
+			justify-content: stretch;
+
+			.ant-btn {
+				flex: 1;
+			}
+		}
+
+		.grp {
+			grid-template-columns: minmax(0, 1fr);
+		}
+
+		.identity-fields .ant-form,
+		.fgrid.c2 {
+			grid-template-columns: minmax(0, 1fr);
+		}
+	}
+}