/* =========================================================
 * 商标注册页面 form.css（保守无感优化版）
 * - 重复/冲突合并
 * - 仅必要的小幅修复（不改交互）
 * - 按功能分块并注释
 * =======================================================*/

/* -------------------------------------------------------
 * 0. 文件头与基础可见性
 * ----------------------------------------------------- */
@charset "utf-8";

[v-cloak] { display: none; }

/* 架构容器的渐显（提升感知，无阻塞） */
.container {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.container.loaded { opacity: 1; }

:root {
  --primary-color: #3c7ee5;
  --primary-color-rgb: 60, 126, 229;
}

/* 页面级通用变量（供 tabs/title 等使用） */
.whole-wrapper {
  /* 基础灰色边框的 50% 明度/透明度 */
  --border-color-gray: rgba(220, 223, 230, 0.5);
}

/* 1440px 容器：主内容区限宽居中，适应调整 */
.whole-wrapper.container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* -------------------------------------------------------
 * 1. 全局加载态（首屏遮罩）
 * ----------------------------------------------------- */
.loading-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: #fff; display: flex; justify-content: center; align-items: center;
  z-index: 9999;
}
.loading-spinner {
  width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3369E3;
  border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* -------------------------------------------------------
 * 2. 页面级结构
 * ----------------------------------------------------- */
.register-index { padding-bottom: 30px; }

.reg-banner {
  height: 200px; padding: 65px 0 0 145px;
  background: linear-gradient(90deg,#3369E3 0%,#008a64 100%); color: #fff;
}
.reg-banner h1 {
  height: 42px; line-height: 40px; margin-bottom: 18px;
  font-size: 38px; font-weight: 500;
}
.reg-banner .subtit { font-size: 16px; }
.reg-banner .subtit .btn {
  width: auto; padding: 0 10px; line-height: 30px; margin-left: 15px;
  border: 2px solid #fff; border-radius: 4px; color: #fff; text-align: center;
  font-size: 16px; letter-spacing: 4px;
}
.reg-banner .subtit .btn:hover {
  background: linear-gradient(179deg, rgba(134,127,250,.8), rgba(92,92,222,.8));
}

/* -------------------------------------------------------
 * 3. 顶部流程条（自适应：flex 等分，小屏可换行/缩小）
 * ----------------------------------------------------- */
.flow {
  margin-bottom: 30px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.flow .item {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  background: rgba(var(--primary-color-rgb), 0.75);
  text-align: center;
  position: relative;
  box-sizing: border-box;
}
.flow .item.on { background: var(--primary-color, #3c7ee5); }
.flow .item.on + .last:before { border-left-color: var(--primary-color, #3c7ee5); }
.flow .tri-item {
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 40px;
  position: relative;
}
.flow .tri-item:before {
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 20px solid var(--primary-color, #3c7ee5);
  border-bottom: 20px solid transparent;
  background: transparent;
  z-index: 2;
}
.flow .tri-item:after {
  content:"";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 20px solid var(--color-flow-arrow-light, #EBF1FF);
  border-left: 20px solid transparent;
  border-bottom: 20px solid var(--color-flow-arrow-light, #EBF1FF);
  background: transparent;
  z-index: 1;
}
.flow .tri-item.last:after { border-top-color: var(--primary-color, #3c7ee5); border-bottom-color: var(--primary-color, #3c7ee5); }
.flow .tri-item.last:before { border-left-color: var(--primary-color, #3c7ee5); }
.flow-item-wrapper:first-child + .tri-item.last:after {
  border-top-color: #EBF1FF;
  border-bottom-color: #EBF1FF;
}
.flow-item-wrapper:first-child + .tri-item.last:before {
  border-left-color: var(--primary-color, #3c7ee5);
}

@media (max-width: 900px) {
  .flow .tri-item { flex: 0 0 16px; width: 16px; min-width: 16px; }
  .flow .tri-item:before { border-left-width: 14px; border-top-width: 16px; border-bottom-width: 16px; }
  .flow .tri-item:after { border-left-width: 14px; border-top-width: 16px; border-bottom-width: 16px; }
  .flow .item { font-size: 14px; }
  .flow .flow-item-wrapper { min-width: 80px; }
}

@media (max-width: 600px) {
  .flow .item { font-size: 12px; height: 36px; line-height: 36px; }
  .flow .tri-item { height: 36px; flex: 0 0 12px; width: 12px; min-width: 12px; }
  .flow .tri-item:before { border-left-width: 10px; border-top-width: 14px; border-bottom-width: 14px; }
  .flow .tri-item:after { border-left-width: 10px; border-top-width: 14px; border-bottom-width: 14px; }
}

/* -------------------------------------------------------
 * 4. 左/右主列布局（表单区 + 类目区）
 *    right-mode 固定宽度，left-mode 自适应填满剩余区域
 * ----------------------------------------------------- */
.classify-items-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0; /* 左边间距 0 */
  padding-right: 24px;
  box-sizing: border-box;
  max-width: 100%;
}
.classify-items-wrapper .right-mode.pull-left,
.classify-items-wrapper .left-mode.pull-right {
  float: none;
}
.right-mode {
  flex: 0 0 450px;
  order: 1;
  width: 450px;
  max-width: 450px;
  max-height: 1105px;
  padding: 20px; margin-top: 10px;
  border: 2px solid rgba(224,227,232,.5); border-radius: 4px; box-shadow: 0 10px 20px rgba(0,0,0,.05);
}
.left-mode {
  flex: 1;
  min-width: 0;
  order: 2;
  width: auto;
  border-radius: 4px; box-shadow: 0 10px 20px rgba(0,0,0,.05);
}

@media (max-width: 1200px) {
  .classify-items-wrapper { padding-left: 0; padding-right: 20px; }
}

@media (max-width: 768px) {
  .classify-items-wrapper { padding-left: 0; padding-right: 12px; gap: 12px; }
}

.right-mode .quick-form .el-form-item__content { line-height: 40px; }
.right-mode .quick-form { height: 40px; }
.right-mode .quick-form .el-input { width: 300px; height: 40px !important; }
.right-mode .quick-form .el-input .el-input__inner { height: 40px !important; line-height: 40px !important; box-sizing: border-box; }
.right-mode .quick-form .el-input__icon { line-height: 40px; }
.right-mode .quick-form .el-button { margin-left: 5px; height: 40px !important; line-height: 38px !important; padding: 0 15px !important; }
.right-mode .cls-tit {
  height: 50px; line-height: 50px; padding: 0 10px; margin-top: 15px;
  background: #fafafa; border: 2px solid rgba(236,236,236,.5); font-size: 16px;
}
.right-mode .cls-tit .icons-tri-down { line-height: 20px; margin-top: 16px; }

/* 类目折叠容器（限制高度，避免溢出遮挡） */
.right-mode .collapse-wrap {
  width: 100%; max-height: 1100px; /* 原 height:1100px -> 保守替换 */
  padding: 0 10px 15px; background: #fff;
  border: 2px solid rgba(236,236,236,.5); border-top: 0; overflow: hidden;
}
.right-mode .collapse-wrap .el-scrollbar__bar.is-horizontal { display: none; }

/* 标题与箭头 */
.right-mode .collapse-wrap .el-collapse-item__header {
  height: 40px; line-height: 40px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.right-mode .collapse-wrap .el-collapse-item__header .el-collapse-item__arrow {
  font-size: 16px; line-height: 1; transition: transform .3s ease; transform: rotate(0);
}
.right-mode .collapse-wrap .el-collapse-item.is-active .el-collapse-item__arrow { transform: rotate(90deg); }
.right-mode .collapse-wrap .el-collapse-item { background: #fff; }

.right-mode .collapse-wrap .subcls-tit { width: 350px; height: 40px; line-height: 40px; }
.right-mode .collapse-wrap .subcls-tit.selected { color: #3c7ee5; }
.right-mode .collapse-wrap .subcls-tit .subcls-name {
  display: inline-block; width: 236px; height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.right-mode .collapse-wrap .el-collapse-item__content {
  overflow-y: auto;   /* 允许垂直滚动 */
  max-height: 500px;   /* 限制最大高度，超出部分显示滚动条 */
  padding-right: 10px; /* 添加右侧内边距，确保内容不会被遮挡 */
}


.selected .subcls-tit { color: #3c7ee5; font-weight: bold; }
.subcls-item {
  display: inline-block; width: 100%; height: 22px; line-height: 22px; text-align: left;
  color: #6e6e6e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 14px;
}
p.selected .subcls-item { color: #3c7ee5; font-weight: bold; }
.subcls-item { padding: 0; margin-left: 10px; }

/* -------------------------------------------------------
 * 5. 申请信息表单（左列）
 * ----------------------------------------------------- */
.reg-form { width: 100%; }
.reg-form .upload-form-item { height: 205px; }

.reg-form .applyer-operate .name { margin-right: 15px; font-size: 16px; font-weight: 600; } /* 合并后仅保留一份 */

.register-index .reg-form .add-btn,
.register-index .reg-form .change-btn {
  width: 118px; height: 30px; line-height: 30px; margin-right: 15px; border-radius: 30px;
}
.register-index .reg-form .add-btn .iconfont,
.register-index .reg-form .change-btn .iconfont { margin: -2px 4px 0 0; font-size: 17px; }
.el-form-item__content .iconfont { margin-right: 5px; align-items: center; vertical-align: unset !important; }
.reg-form .add-btn .iconfont { font-size: 15px; }

.reg-form .uploader-btn {
  width: 240px; height: 40px; line-height: 38px; padding: 0;border-radius: 4px;
}
.tm-image-row {
  display: flex;
  align-items: flex-start;
}
.tm-image-row .tm-image-wrapper {
  flex: 0 0 auto;
}
.tm-image-row .upload-notice {
  margin-left: 20px;
  flex: 1 1 auto;
}
.tm-image-actions {
  margin-top: 10px;
}
.reg-form .tm-name-input {
  width: 408px !important;
}
/* 商标名称输入框高度统一为40px，与按钮一致 */
.reg-form .tm-name-input .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
}
.reg-form .tm-name-input.el-input--medium .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
}
.reg-form .tm-name-btn {
  width: auto; 
  min-width: 120px; 
  height: 40px; 
  line-height: 38px; 
  padding: 0 20px; 
  margin-top: 0; 
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
}
.reg-form .applicant-buttons {
  display: inline-flex;
  gap: 10px;
  width: 408px;
}
.reg-form .applicant-btn {
  flex: 1;
  height: 40px;
  line-height: 38px;
  padding: 0;
  margin-top: 0;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
}
/* 选择字体下拉框高度统一为40px，与按钮一致 */
.reg-form .font-select-input {
  height: 40px;
}
.reg-form .font-select-input .el-input__inner,
.reg-form .font-select-input.el-select--small .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
}

/* 选择字体行：下拉框与“展开/关闭设计”按钮同一行且不换行 */
.reg-form .tm-font-row .el-form-item__content {
  overflow: visible;
}
.reg-form .tm-font-select-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
/* 展开设计/关闭设计按钮：复用 plain uploader-btn btn-blue，保证文字可见 */
.reg-form .tm-font-select-row,
.reg-form .tm-font-row .el-form-item__content { overflow: visible !important; }
.reg-form .tm-design-btn,
button.tm-design-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 100px;
  padding: 0 16px;
  height: 40px;
  line-height: 38px;
  color: #3c7ee5 !important;
  font-size: 14px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.reg-form .tm-font-select-row { overflow: visible !important; }
.reg-form .tm-design-btn .tm-design-btn-icon {
  display: inline-block;
  font-size: 12px;
  transition: transform 0.3s;
  color: inherit;
}
.reg-form .tm-design-btn .tm-design-btn-icon.top {
  transform: rotate(180deg);
}

/* 展开设计/关闭设计：独立一行的原生按钮，保证始终可见 */
.reg-form .tm-design-toggle-row {
  min-height: 40px;
}
.reg-form .tm-design-toggle-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 40px;
  line-height: 38px;
  border: 2px solid #3c7ee5;
  border-radius: 4px;
  background: #fff;
  color: #3c7ee5;
  font-size: 14px;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
}
.reg-form .tm-design-toggle-btn:hover {
  background: rgba(60, 126, 229, 0.08);
  color: #5a9cf5;
}
.reg-form .tm-design-toggle-btn .iconfont {
  font-size: 12px;
  transition: transform 0.3s;
}
.reg-form .tm-design-toggle-btn .iconfont.top {
  transform: rotate(180deg);
}

/* 字体粗细和文字方向按钮样式统一，与生成图样按钮一致 */
.reg-form {
  --primary-color: #3c7ee5;
  --primary-color-rgb: 60, 126, 229;
  --primary-color-20: rgba(var(--primary-color-rgb), 0.2);
  --border-color-gray: rgba(220, 223, 230, 0.5);
  counter-reset: tm-section; /* 表单小节序号计数器 */
}
.reg-form .font-weight-group,
.reg-form .direction-group,
.reg-form .tm-type-group,
.reg-form .delegation-type-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.reg-form .font-weight-radio.is-bordered,
.reg-form .direction-radio.is-bordered,
.reg-form .tm-type-radio.is-bordered,
.reg-form .delegation-type-radio.is-bordered {
  height: 40px;
  line-height: 38px;
  border-radius: 4px;
  border: 2px solid var(--border-color-gray);
  padding: 0 20px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  text-align: center;
  white-space: nowrap;
  background-color: transparent;
}
.reg-form .font-weight-radio.is-bordered .el-radio__input,
.reg-form .direction-radio.is-bordered .el-radio__input {
  margin-right: 10px;
}
.reg-form .font-weight-radio.is-bordered .el-radio__label,
.reg-form .direction-radio.is-bordered .el-radio__label {
  line-height: 1;
  text-align: center;
  padding-left: 0;
}
.reg-form .font-weight-radio.is-bordered.is-checked,
.reg-form .direction-radio.is-bordered.is-checked,
.reg-form .tm-type-radio.is-bordered.is-checked,
.reg-form .delegation-type-radio.is-bordered.is-checked {
  border-color: var(--primary-color);
  background-color: var(--primary-color-20);
  color: var(--primary-color);
}
.reg-form .font-weight-radio.is-bordered.is-checked .el-radio__label,
.reg-form .direction-radio.is-bordered.is-checked .el-radio__label,
.reg-form .tm-type-radio.is-bordered.is-checked .el-radio__label,
.reg-form .delegation-type-radio.is-bordered.is-checked .el-radio__label {
  color: var(--primary-color);
}

/* 商标类型：3个选项占满整行剩余空间 */
.reg-form .tm-type-group {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.reg-form .tm-type-radio {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.reg-form .tm-type-radio .tm-type-icon {
  margin-right: 6px;
  vertical-align: middle;
  font-size: 16px;
}

/* 字体粗细：4 个选项占满一行 */
.reg-form .font-weight-group {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.reg-form .font-weight-radio {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

/* 文字方向：2 个选项占满一行 */
.reg-form .direction-group {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.reg-form .direction-radio {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

/* 字体粗细、文字方向选项前的图标 */
.reg-form .font-weight-radio .tm-option-icon,
.reg-form .direction-radio .tm-option-icon {
  margin-right: 6px;
  vertical-align: middle;
  font-size: 16px;
}
/* 竖向：与横向同图标，顺时针旋转 90° */
.reg-form .direction-radio .tm-option-icon.tm-icon-rotate-90 {
  display: inline-block;
  transform: rotate(90deg);
}

/* 脱敏检测结果弹窗：挂载到 body 并置顶，避免分步模式下被隐藏 */
.sensitivity-dialog-wrapper { z-index: 10000 !important; }
.sensitivity-dialog-wrapper + .v-modal { z-index: 9999 !important; }
.sensitivity-dialog.el-dialog { margin-top: 25vh; top: 0; transform: none; z-index: 10000; }
.sensitivity-dialog .el-dialog__header { background-color: rgba(var(--primary-color-rgb, 60, 126, 229), 0.2); padding: 16px 20px; border-bottom: 1px solid rgba(var(--primary-color-rgb, 60, 126, 229), 0.15); }
.sensitivity-dialog .el-dialog__header .el-dialog__title { color: var(--primary-color, #3c7ee5); font-size: 18px; font-weight: 600; }
.sensitivity-dialog .el-dialog__header .el-dialog__headerbtn .el-dialog__close { color: #606266; }
.sensitivity-dialog .sensitivity-loading { padding: 24px; text-align: center; color: #606266; }
.sensitivity-dialog .sensitivity-name { margin-bottom: 12px; font-size: 14px; }
.sensitivity-dialog .sensitivity-name strong { color: #303133; }
.sensitivity-dialog .sensitivity-meta { margin: 6px 0; font-size: 13px; color: #606266; }
.sensitivity-dialog .sensitivity-risk-level { font-weight: 600; color: #303133; }
.sensitivity-dialog .sensitivity-list { list-style: none; padding: 0; margin: 0; }
.sensitivity-dialog .sensitivity-list li { padding: 8px 0; font-size: 14px; color: #606266; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 8px; }
.sensitivity-dialog .sensitivity-list li:last-child { border-bottom: none; }
.sensitivity-dialog .sensitivity-list li i { font-size: 18px; flex-shrink: 0; }
.sensitivity-dialog .sensitivity-list li .el-icon-success { color: #67c23a; }
.sensitivity-dialog .sensitivity-list li .el-icon-warning { color: #e6a23c; }
.sensitivity-dialog .sensitivity-list li.is-risk { color: #e6a23c; }
.sensitivity-dialog .sensitivity-list li.is-risk-confirmed { color: #f56c6c; }
.sensitivity-dialog .sensitivity-list li.is-risk-confirmed .el-icon-warning { color: #f56c6c; }
.sensitivity-dialog .sensitivity-list li.is-risk-uncertain { color: #e6a23c; }
.sensitivity-dialog .sensitivity-list li.is-risk-uncertain .el-icon-warning { color: #e6a23c; }
.sensitivity-dialog .sensitivity-tip { margin-top: 12px; padding: 8px; background: #fdf6ec; color: #e6a23c; font-size: 13px; border-radius: 4px; }
.sensitivity-dialog .sensitivity-tip-info { background: #ecf5ff; color: #409eff; }
.sensitivity-dialog .sensitivity-martyrs-tip { background: #fef0f0; color: #f56c6c; }
.sensitivity-dialog .sensitivity-martyrs-tip a { color: #409eff; text-decoration: none; }
.sensitivity-dialog .sensitivity-martyrs-tip a:hover { text-decoration: underline; }
.sensitivity-dialog .sensitivity-martyrs-btn { padding: 0 4px; vertical-align: baseline; }
.sensitivity-dialog .sensitivity-subtitle { margin: 14px 0 8px; font-size: 14px; font-weight: 600; color: #303133; }
.sensitivity-dialog .sensitivity-inspection-list { list-style: none; padding: 0; margin: 0; border: 1px solid #ebeef5; border-radius: 4px; overflow: hidden; }
.sensitivity-dialog .sensitivity-inspection-item { padding: 10px 12px; font-size: 13px; color: #606266; border-bottom: 1px solid #ebeef5; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.sensitivity-dialog .sensitivity-inspection-item:last-child { border-bottom: none; }
.sensitivity-dialog .sensitivity-inspection-num { flex-shrink: 0; width: 24px; height: 24px; line-height: 24px; text-align: center; background: #f0f2f5; color: #606266; border-radius: 4px; font-weight: 600; }
.sensitivity-dialog .sensitivity-inspection-cat { flex-shrink: 0; font-weight: 500; color: #303133; }
.sensitivity-dialog .sensitivity-inspection-level { flex-shrink: 0; padding: 0 6px; border-radius: 4px; font-size: 12px; }
.sensitivity-dialog .sensitivity-inspection-高 .sensitivity-inspection-level { background: #fef0f0; color: #f56c6c; }
.sensitivity-dialog .sensitivity-inspection-中 .sensitivity-inspection-level { background: #fdf6ec; color: #e6a23c; }
.sensitivity-dialog .sensitivity-inspection-低 .sensitivity-inspection-level { background: #f0f9eb; color: #67c23a; }
.sensitivity-dialog .sensitivity-inspection-reason { flex: 1 1 100%; margin-top: 4px; padding-left: 32px; color: #606266; line-height: 1.5; }
.sensitivity-dialog .sensitivity-inspection-sugg { flex: 1 1 100%; margin-top: 2px; padding-left: 32px; color: #909399; font-size: 12px; line-height: 1.5; }
.sensitivity-dialog .sensitivity-disclaimer { margin-top: 14px; padding: 10px 12px; background: #f5f7fa; color: #909399; font-size: 12px; line-height: 1.6; border-radius: 4px; border-left: 3px solid #dcdfe6; }
.sensitivity-dialog .sensitivity-error { padding: 24px; text-align: center; color: #909399; font-size: 13px; }
.sensitivity-dialog .sensitivity-dialog-footer { display: flex; align-items: center; justify-content: center; width: 100%; position: relative; }
.sensitivity-dialog .sensitivity-dialog-close-btn { width: 200px; height: 40px; }
.sensitivity-dialog .sensitivity-powered-by { position: absolute; right: 0; bottom: 0; font-size: 12px; color: #c0c4cc; }

/* 代理委托书：两个选项总宽度固定 408px（与输入框一致） */
.reg-form .delegation-type-group {
  width: 408px;
}
.reg-form .delegation-type-radio {
  flex: 1 1 0;
  text-align: center;
}
.reg-form .demo-wrap { margin-left: 45px; }
.reg-form .upload-notice { width: 800px; }
.reg-form .upload-notice p {
  line-height: 1.8; color: #666; font-size: 13px; text-align: left; margin-bottom: 8px;
}
.reg-form .popover-icon { margin-left: 10px; font-size: 14px; }

/* 代理委托书上传 + 示例 + 说明一行布局 */
.reg-form .delegation-wrapper {
  display: flex;
  align-items: flex-start; /* 顶部对齐上传框与右侧内容 */
  margin-top: 10px;
}
.reg-form .delegation-upload {
  margin-right: 20px;
}
.reg-form .delegation-row {
  display: flex;
  align-items: flex-start; /* 顶部对齐示例图与说明文字 */
}
.reg-form .delegation-row .demo-wrap {
  margin: 0 20px 0 25px; /* 与上传框间距略缩小，整体更紧凑 */
}
.reg-form .delegation-notice {
  flex: 1 1 auto;
  text-align: left;
}
.reg-form .delegation-notice p {
  margin: 0 0 8px;
  line-height: 1.8;
  color: #666;
  font-size: 13px;
}
.reg-form .delegation-notice .delegation-list {
  margin: 0 0 8px 1.5em;
  padding: 0;
  color: #666;
  font-size: 13px;
  line-height: 1.8;
}
.reg-form .delegation-notice .delegation-list li {
  margin-bottom: 2px;
}

/* 已生成委托书预览 + 修改提示 */
.reg-form .delegation-template-wrapper {
  display: flex;
  align-items: center; /* 垂直居中对齐图片和文字 */
  margin-top: 10px;
}
.reg-form .delegation-template-img {
  border: 1px solid #ddd;
  cursor: pointer;
  margin-top: 4px; /* 与上方内容保持一点间距，不贴边 */
}
.reg-form .delegation-template-info {
  margin-left: 16px;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}
.reg-form .delegation-template-text {
  margin: 0 0 4px;
}
.reg-form .delegation-template-btn {
  height: 40px;
  line-height: 38px;
  width: 240px;
  border-radius: 4px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 小节标题（申请人 / 商标类型 / 商标名称 / 商标说明 / 代理委托书 / 字体设置等） */
.reg-form .tm-field-header {
  position: relative;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 40px; /* 给左侧序号预留空间 */
  border-left: 3px solid var(--primary-color);
  background-color: #fcfdff;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* 小节序号圆圈，提升整体有序感 */
.reg-form .tm-field-header::before {
  counter-increment: tm-section;
  content: counter(tm-section);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;   /* 略放大圆圈，视觉更舒适 */
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-sizing: border-box;
}

/* 登录遮罩（未登录提示） */
.reg-form .login-layer {
  position: absolute; top: 6px; left: 3px; border-radius: 4px; width: 400px; height: 28px;
  line-height: 28px; padding-left: 8px; background: #fff; color: #9b9b9b;
}

/* -------------------------------------------------------
 * 6. 渠道/代理侧栏（右列卡片）
 * ----------------------------------------------------- */
.agent-wrapper { position: relative; width: 260px; }          /* 合并重复，仅保留一份 */
.agent-wrapper .agent { box-shadow: 0 0 20px rgba(0,0,0,.08); }/* 合并重复，仅保留一份 */
.agent-wrapper.customfixtop .agent {
  position: fixed; top: 70px; right: 50%; margin-right: -579px; z-index: 9;
}
.agent-wrapper.customfixbottom .agent { position: absolute; bottom: 0; z-index: 9; }

.agent {
  width: 260px; height: auto; padding: 0 20px 25px; background: #fff;
}
.agent .tit {
  height: 1px; padding-top: 40px; border-bottom: 1px solid rgba(60,126,229,.3);
  font-size: 16px; text-align: center; margin-bottom: 36px;
}
.agent .tit strong { display: inline-block; margin-top: -12px; padding: 0 10px; background: #fff; vertical-align: top; }
.agent .subtit { line-height: 20px; margin: 36px 0 20px; text-align: center; }
.agent .middle-wrapper .avatar,
.agent .middle-wrapper .ewm { width: 120px; }
.agent .middle-wrapper .avatar .img-wrapper,
.agent .middle-wrapper .ewm .img-wrapper {
  width: 100px; height: 100px; line-height: 94px; border: 2px solid #ececec;
}
.agent .middle-wrapper .avatar .btn {
  width: 120px; margin-top: 20px; background: #d1eeec; border: 2px solid #55a9ff; border-radius: 4px;
  color: #3c7ee5; font-size: 12px; line-height: 30px;
}
.agent .middle-wrapper .avatar .btn .iconfont { margin: -2px 5px 0 0; font-size: 14px; }
.agent .middle-wrapper .avatar .btn:hover { background: #55a9ff; color: #fff; }
.agent .middle-wrapper .ewm p { margin-top: 35px; font-size: 12px; }

.ad { float: right; margin-top: 25px; }

/* -------------------------------------------------------
 * 7. 分类搜索与快速选择（右列顶部）
 * ----------------------------------------------------- */
/* 表单区域固定占位，切换「模糊查询/智能推荐」时避免晃动 */
.classify-form-area {
  display: inline-block;
  min-width: 560px;
  min-height: 40px;
  vertical-align: top;
}

.classify-form { display: inline-block; margin-left: 94px; }
.classify-form .el-form-item__label { font-size: 16px; }
.classify-form .el-input-group__append {
  width: 84px; height: 40px; background: #fc6530; border: 2px solid #fc6530; color: #fff;
}
.classify-form .el-input-group__append .el-button { width: 84px; }
.classify-form .search-input-wrap { display: inline-flex; align-items: center; gap: 10px; }
.classify-form .search-input-wrap .search-input { width: 400px; }
.classify-form .search-input-wrap .search-btn-manual { flex-shrink: 0; }
.classify-form .search-input { width: 400px; }
.classify-form .search-input .el-input__icon { line-height: 36px; font-size: 20px; }
.classify-form .el-form-item__content,
.classify-form .el-form-item__label { line-height: 36px; }
.classify-form .el-input__inner { height: 36px; line-height: 36px; }
.type-radio-group { margin: 0 20px; vertical-align: top; }
.type-radio-group .el-radio-button { width: 100px; }
.type-radio-group .el-radio-button .el-radio-button__inner {
  width: 100%; border-color: #3c7ee5; color: #3c7ee5;
}
/* 圆角与旁边 el-button 一致（Element 默认 4px） */
.type-radio-group .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 4px 0 0 4px; box-shadow: none !important;
}
.type-radio-group .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 4px 4px 0;
}
/* 仅保留一份：激活态白字 */
.type-radio-group .el-radio-button.is-active .el-radio-button__inner { color: #fff; }

/* 全类选择、重置：宽度一致（固定宽度） */
.reset-btn { vertical-align: top; width: 100px; min-width: 100px; box-sizing: border-box; }

/* -------------------------------------------------------
 * 8. Tabs / 面板 / 历史选择
 * ----------------------------------------------------- */
.tab-wrapper { width: 980px; margin: 16px 0 0 94px; }
.tab-wrapper .lis { width: 435px; }
.tab-wrapper .lis .item {
  display: inline-block; width: 145px; height: 40px; margin: 0;
  border-bottom: 2px solid #e0e3e8; color: #9b9b9b; text-align: center; font-size: 16px;
}
.tab-wrapper .lis .item.active { border-bottom-color: #fc6530; color: #fc6530; }

.tab-panels { width: 100%; max-width: 100%; margin: 0 0 10px 0; padding: 0 24px; box-sizing: border-box; }
/* 分类网格：1440px 全宽适配，一行 9 列，居中显示、左右留白不贴边 */
.first-panel.cls-panel {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 10px 12px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.first-panel.cls-panel .cls-btn {
  width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .tab-panels { padding-left: 20px; padding-right: 20px; }
  .first-panel.cls-panel { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .tab-panels { padding-left: 12px; padding-right: 12px; }
  .first-panel.cls-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
}
.tab-panels .el-button {
  display: inline-block; width: 100px; height: 30px; line-height: 28px; padding: 0 10px; margin: 0 10px 10px 0;
}
.tab-panels .el-button.selected { border-color: #1b1b1b; color: #1b1b1b; }
.tab-panels .el-button.cur { border-color: #3c7ee5; color: #3c7ee5; }

.history-panels { margin: 20px 0 20px 20px; font-size: 14px; }
.history-panels .label { width: 115px; }
.history-panels .item { width: 868px; margin-left: 115px; }
.history-panels .item a { display: inline-block; margin: 0 15px 10px 0; cursor: pointer; }
.history-panels.active-history .label { width: 150px; }
.history-panels.active-history .item { margin-left: 150px; }
/* 注册过的商标/常用类别：输入框与按钮同高 40px、对齐（覆盖全局 .whole-wrapper .el-button--small 的 30px） */
.history-panels .el-select .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
  box-sizing: border-box;
}
.history-panels .el-select.el-input--small { height: 40px; }
.history-panels .el-select .el-input__icon { line-height: 40px; }
.history-panels .el-button--small {
  height: 40px !important;
  line-height: 38px !important;
  padding: 0 15px !important;
  min-height: 40px !important;
  vertical-align: top;
}
.history-panels .el-select { vertical-align: top; }
/* 注册过的商标下拉：仅底部一条虚线分割；选项悬停/选中状态要明显 */
.history-select-dropdown .el-select-dropdown__wrap {
  border-bottom: 1px dashed #dcdfe6 !important;
  padding-bottom: 6px !important;
}
.history-select-dropdown .el-select-dropdown__list {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.history-select-dropdown .el-select-dropdown__item.hover,
.history-select-dropdown .el-select-dropdown__item:hover {
  background-color: #ecf5ff !important;
  color: var(--color-primary, #3369E3) !important;
}
.history-select-dropdown .el-select-dropdown__item.selected {
  background-color: #ecf5ff !important;
  color: var(--color-primary, #3369E3) !important;
  font-weight: 500;
}

/* -------------------------------------------------------
 * 9. 已选类目与清单（左列大框）
 * ----------------------------------------------------- */
.classify-item,
.pay-submit {
  margin-top: 10px; background: #d1eeec; border: 2px solid rgba(224,227,232,.5); border-radius: 4px;
}
.classify-item .item-tit,
.pay-submit .item-tit {
  height: 65px; line-height: 65px; padding: 0 20px; border-bottom: 2px solid rgba(224,227,232,.5); font-size: 18px;
}
.classify-item .item-tit > div,
.pay-submit .item-tit > div { float: left; width: 50%; }
.classify-item .item-tit > div:first-child,
.pay-submit .item-tit > div:first-child { width: 60%; }
.classify-item .item-tit > div:last-child,
.pay-submit .item-tit > div:last-child { width: 40%; }

.classify-item .info-wrapper {
  height: 400px; padding: 0 20px 10px; margin-left: 6px; overflow: hidden;
}
.classify-item .info-wrapper .info-item { padding-bottom: 10px; }
.classify-item .info-wrapper .info-item:last-child { border-top: none; border-bottom: none; }
.classify-item .info-wrapper .info-item .el-collapse-item__arrow { display: none; }
.classify-item .info-wrapper .info-item .is-active .icons-tri { transform: rotate(0); }
.classify-item .info-wrapper .info-item .el-collapse-item__header,
.classify-item .info-wrapper .info-item .el-collapse-item__wrap { background: none; }

.classify-item .info-wrapper .name { width: 100%; line-height: 49px; }
.classify-item .info-wrapper .name .icons-tri {
  display: inline-block; margin-left: 3px; cursor: pointer; transform: rotate(-90deg); transition: all .3s;
}
.classify-item .info-wrapper .name .icons-close {
  height: 20px; margin-top: 14px; color: #fb5555; font-size: 20px; cursor: pointer;
  display: inline-block; margin-right: 6px;
}

.classify-item .info-wrapper .cls-info { padding-left: 26px; }
.classify-item .info-wrapper .cls-info .cls-no { width: 34px; line-height: 24px; }
.classify-item .info-wrapper .cls-info .subcls-lis { margin-left: 44px; }
.classify-item .info-wrapper .cls-info .subcls-lis .el-tag {
  padding: 0 12px; margin: 0 10px 10px 0; border-radius: 4px; background: #3c7ee5; border: 0; color: #fff; position: relative;
}
.classify-item .info-wrapper .cls-info .subcls-lis .el-tag .el-icon-close {
  position: absolute; width: 100%; height: 24px; line-height: 24px; color: transparent;
}
.classify-item .info-wrapper .cls-info .subcls-lis .el-tag:hover { background: #9b9b9b; text-decoration: line-through; }
.classify-item .info-wrapper .cls-info .subcls-lis .el-tag:hover .el-icon-close { background: none; }
.classify-item .info-wrapper .el-collapse-item__content { padding-bottom: 0; }

.classify-item .item-empty { height: 516px; text-align: center; border-radius: 4px; }
.classify-item .item-empty img { margin-top: 167px; }
.classify-item .item-empty p { margin-top: 20px; color: #3c7ee5; }

/* -------------------------------------------------------
 * 10. 付款与增值服务（左列底部块）
 * ----------------------------------------------------- */
.pay-submit .value-added-service { padding: 20px 0; margin: 0 20px; border-bottom: 2px solid #e0e3e8; }
.pay-submit .value-added-service .label-name { line-height: 36px; }
.pay-submit .value-added-service .check-btns { margin-left: 70px; }

/* 增值服务勾选（保守增强：悬停光效 & 选中可视化） */
.pay-submit .value-added-service .check-btns .el-checkbox {
  margin: 0 0 10px 10px; background: none; border: 2px solid #ff677a;
  background: rgba(255,228,228,.3); border-radius: 4px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 15px; transition: all .4s cubic-bezier(.25,.46,.45,.94);
  cursor: pointer; position: relative; overflow: hidden;
}
/* hover 反色 */
.pay-submit .value-added-service .check-btns .el-checkbox:hover {
  background: rgba(255,103,122,.8); color: #fff; border-color: #ffe4e4;
  box-shadow: 0 5px 15px rgba(255,103,122,.4); transform: translateY(-3px) scale(1.02);
}
/* hover 光带 */
.pay-submit .value-added-service .check-btns .el-checkbox::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transition: left .7s ease;
}
.pay-submit .value-added-service .check-btns .el-checkbox:hover::before { left: 100%; }
/* 选中 */
.pay-submit .value-added-service .check-btns .el-checkbox.is-checked {
  background: rgba(255,103,122,.9); color:#fff; border-color:#ff677a; box-shadow: 0 3px 10px rgba(255,103,122,.5);
}
/* 文本 hover 的反白联动 */
.el-checkbox__label .color-danger:hover {
  color: #fff !important; font-weight: bold !important; padding: 2px 6px; border-radius: 3px; transition: all .3s ease;
}
.el-checkbox__input.is-checked + .el-checkbox__label .color-danger {
  color:#fff !important; font-weight:bold !important; padding:2px 6px; border-radius:3px;
}
/* Element 默认输入隐藏：维持原交互 */
.pay-submit .value-added-service .check-btns .el-checkbox .el-checkbox__input { display: none; }
/* 小提示区 */
.pay-submit .value-added-service .info-item { margin-left: 10px; line-height: 200%; color: #9b9b9b; }

/* 费用与提交区 */
.pay-submit .cost { margin: 20px 0 20px 20px; }
.pay-submit .cost-list { margin: 0 0 30px 20px; }
.pay-submit .submit-btns { margin-left: 20px; margin-bottom: 20px; }
.pay-submit .submit-btns .el-button {
  width: 300px; height: 50px; margin-right: 10px; border-radius: 4px;
}
.pay-submit .submit-btns .submit-btns-row {
  display: flex; flex-wrap: nowrap; gap: 10px; width: 100%;
}
.pay-submit .submit-btns .submit-btns-row .el-button {
  flex: 1 1 0; min-width: 0; width: auto; margin-right: 0;
}
.pay-submit .submit-btns .submit-btns-row .el-button.btn-risk-analysis {
  border: 2px solid var(--primary-color, #3c7ee5);
  color: var(--primary-color, #3c7ee5);
  background-color: rgba(var(--primary-color-rgb, 60, 126, 229), 0.2);
}
.pay-submit .submit-btns .submit-btns-row .el-button.btn-risk-analysis:hover:not(:disabled),
.pay-submit .submit-btns .submit-btns-row .el-button.btn-risk-analysis:focus {
  border-color: var(--primary-color, #3c7ee5);
  background-color: var(--primary-color, #3c7ee5);
  color: #fff !important;
}
.pay-submit .submit-btns .submit-btns-row .el-button.btn-risk-analysis:hover:not(:disabled) span,
.pay-submit .submit-btns .submit-btns-row .el-button.btn-risk-analysis:focus span {
  color: #fff !important;
}
.pay-submit .notice {
  line-height: 24px; margin: 24px 0 20px 20px; color: #798897; font-size: 12px;
}
.pay-submit .notice .index-num {
  display: inline-block; width: 18px; height: 18px; line-height: 18px; margin-right: 14px;
  background: #fb5555; border-radius: 4px; color: #fff; text-align: center;
}

/* -------------------------------------------------------
 * 11. 上传区（图样/委托书）
 * ----------------------------------------------------- */
/* 合并后的 upload-demo（去重合并） */
.upload-demo {
  width: 115px; height: 200px; color: #9da0a6; border: 2px solid #e0e3e8; text-align: center;
  transition: all .3s; position: relative; line-height: 200px; /* 与左侧上传预览高度保持一致 */
}
.upload-demo img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 让示例图片完全贴合容器，必要时裁剪 */
  display: block;
}
.upload-demo .i-upload {
  position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; line-height: 26px;
  margin: -13px 0 0 -13px; background: rgba(0,0,0,.4); border-radius: 50%;
  font-size: 16px; color: #fff; font-weight: 600;
}
.upload-demo .demo-layer {
  position: absolute; left: 1px; top: 1px; width: 99%; height: 99%; background: rgba(0,0,0,.1); cursor: pointer;
}
.upload-btns { width: 130px; line-height: 30px; margin: 120px 0 0 12px; }
.upload-btns .btn { width: 130px; height: 30px; line-height: 28px; border-radius: 4px; }

.isColored-upload .upload-box { margin-right: 15px; }

/* -------------------------------------------------------
 * 12. 小标题通用
 * ----------------------------------------------------- */
.tabs-name {
  position: relative;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding-left: 16px;
  margin: 10px 0 30px;
  border-left: 4px solid #3c7ee5;
  border-bottom: 2px solid var(--border-color-gray);  /* 标题与 tab 同一高度的横线 */
  padding-bottom: 4px;
  font-size: 18px;
  color: #3c7ee5;
}
.tabs-name.is-clickable {
  cursor: pointer;
}
.tabs-name.is-clickable:hover {
  color: #2b5bc0;
}

/* 顶部显示模式切换 + Tab 区域 */
.tm-form-mode-bar {
  margin-top: 10px;
}
/* 显示方式切换行：独占一行，右对齐 */
.tm-form-mode-switch-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 40px;        /* 固定高度，避免切换时上下晃动 */
}
.tm-form-tabs-wrapper {
  margin-top: 10px;
  margin-bottom: 50px;     /* Tabs 与下方内容保持 50px 间距（分步模式下生效） */
}
.tm-form-tabs .el-tabs__header {
  margin-bottom: 0;
}
/* 让分步 Tab 的下边框和标题横线风格一致 */
.tm-form-tabs .el-tabs__nav-wrap::after {
  height: 0;
  border-bottom: 2px solid var(--border-color-gray);
}
/* 激活 Tab 下划线加粗更明显 */
.tm-form-tabs .el-tabs__active-bar {
  height: 2px;
  border-radius: 0;
}
.tm-form-tabs .el-tabs__nav {
  border-radius: 4px 4px 0 0;
}
.tm-form-tabs .el-tabs__item {
  font-size: 16px;
  padding: 0 24px;
  height: 40px;
  line-height: 40px;
}
.tm-form-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tm-form-mode-hint {
  margin-left: 16px;
  font-size: 12px;
  color: #9b9b9b;
  white-space: nowrap;
}
.tm-form-mode-label {
  font-size: 13px;
  color: #666;
}

/* 第二步激活时，第一步标题右侧返回图标（向上箭头） */
.tm-title-back-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  cursor: pointer;
  color: #3c7ee5;
}
.tm-title-back-icon:hover {
  color: #a9aabc;
}

/* Tab 模式下，第一步底部"下一步"按钮区域 */
.tm-step-next-bar {
  margin-top: 40px;
  text-align: right;
}
.tm-step-next-bar .el-button {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}

/* 第二步底部 上一步 / 下一步 导航（分步模式） */
.tm-step-nav-bar {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tm-step-nav-bar .tm-step-prev,
.tm-step-nav-bar .tm-step-next {
  flex: 0 0 auto;
}
.tm-step-nav-bar .tm-step-prev .el-button,
.tm-step-nav-bar .tm-step-next .el-button {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}

/* 第三步左下角"上一步"按钮 */
.tm-step-prev-bar {
  margin-top: 16px;
  text-align: left;
}

/* 流程步骤占满通栏等分，不随文字宽度收缩 */
.flow-item-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.step-time-desc {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  padding: 0 5px;
  word-break: break-all;
  margin-top: 8px;
  display: block;
}
/* 第一第二步之间的时间说明 */
.flow .tri-item:first-of-type {
  position: relative;
  height: auto;
  min-height: 40px;
}
.step-time-desc-between {
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
  padding: 8px 5px;
  word-break: break-all;
  display: block;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 保存按钮使用次色（绿色） */
.el-button--success {
  background-color: var(--color-success, #008D55) !important;
  border-color: var(--color-success, #008D55) !important;
  color: #fff !important;
}
.el-button--success:hover,
.el-button--success:focus {
  background-color: var(--color-success-hover, #008a64) !important;
  border-color: var(--color-success-hover, #008a64) !important;
  color: #fff !important;
}
.el-button--success:active {
  background-color: var(--color-success-active, #007a54) !important;
  border-color: var(--color-success-active, #007a54) !important;
  color: #fff !important;
}

/* 第三步说明块样式 */
.tm-review-step {
  margin-top: 10px;
}
.tm-review-step .tm-review-content {
  padding: 10px 20px 20px;
  font-size: 14px;
  color: #4a5568;
  line-height: 1.8;
}
.tm-review-step .tm-review-content p {
  margin: 4px 0 8px;
}
/* 时间线布局 */
.tm-review-timeline {
  list-style: none;
  margin: 10px auto 12px;   /* 整体时间线居中 */
  padding: 0;
  max-width: 800px;
  position: relative;
}
.tm-review-timeline::before {
  content: "";
  position: absolute;
  left: 15px;               /* 调整位置，让竖线与圆点中心对齐 */
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e3e8;
}
.tm-review-timeline li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}
.tm-review-timeline li::before {
  content: "";
  position: absolute;
  left: 11px;               /* 与上方竖线串联成一条线 */
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #3c7ee5;
}
.tm-review-time {
  font-weight: 600;
  color: #1a253d;
  margin-bottom: 2px;
}
.tm-review-desc {
  color: #4a5568;
}
}

/* -------------------------------------------------------
 * 13. 图像预览大弹框
 * ----------------------------------------------------- */
.bigimg-dialog { z-index: 9999 !important; }
.bigimg-dialog.el-dialog { display: table; width: auto; max-width: 940px; text-align: center; }
.bigimg-dialog.el-dialog img { max-width: 95%; max-height: 640px; }

/* -------------------------------------------------------
 * 14. Element UI 细节统一（输入、表格、单选/多选等）
 * ----------------------------------------------------- */
/* 统一 prepend 最小宽度（冲突合并：80/90 -> 90） */
.el-input-group__prepend { min-width: 90px; }

.dialog-common .el-table td { padding: 0 0; }
.el-radio-button:first-child .el-radio-button__inner { border-radius: 0; box-shadow: none !important; }
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #3c7ee5; box-shadow: -1px 0 0 0 #3c7ee5;
}
.el-radio-button:last-child .el-radio-button__inner { border-radius: 0; }

.whole-wrapper .el-pagination.is-background .btn-next,
.whole-wrapper .el-pagination.is-background .btn-prev,
.whole-wrapper .el-pagination.is-background .el-pager li { background-color: #fff; }

.whole-wrapper .el-form-item.is-required .el-form-item__label:before { content: " "; }

.whole-wrapper .el-button--gray { background: #9b9b9b; border-color: #9b9b9b; color: #fff; }
.whole-wrapper .el-button--gray.is-plain { background: none; border-color: #9b9b9b; color: #9b9b9b; }
.whole-wrapper .el-button--gray.is-plain:hover { background: #9b9b9b; border-color: #9b9b9b; color: #fff; }
.whole-wrapper .el-button--gray:hover { background: #e0e3e8; }

.whole-wrapper .el-button--small {
  padding: 0 15px; display: inline-flex !important; align-items: center; justify-content: center;
  line-height: normal !important; font-size: 14px;
}
.whole-wrapper .el-button--small.no-padding { padding: 0; }

.whole-wrapper .el-select-dropdown .el-scrollbar { padding-bottom: 14px; }
.classify-form .el-input-group__append { height: 36px; }

.el-table thead { color: #3c7ee5; font-weight: 500; }
.el-table th { background-color: #d1eeec; }
.el-table { color: #1b1b1b; }

.el-button--text:focus,
.el-button--text:hover { color: #6398ea; }
.el-button--text:active { color: #3671ce; background-color: transparent; }

.el-textarea .el-input__count { line-height: normal; bottom: 4px; }
.el-scrollbar__wrap { overflow-x: hidden; }
.el-scrollbar .el-scrollbar__wrap { margin-bottom: 0 !important; }

.agree-pact-dialog .el-dialog__body { height: 500px; }

.register-notice { line-height: 26px; }
.info-item-name b { font-weight: bold; }

.create-image-dialog .el-radio { width: 120px; text-align: left; display: block; margin: 0 10px 10px; float: left; }
.create-image-dialog .el-radio-group { margin-top: 4px; }
.classify-form .el-select__caret.el-input__icon { line-height: 36px; }

.components-pages-register-font-style .el-radio-group .el-radio { width: 120px; }
.components-pages-register-font-style .el-radio-group .el-radio:not(:nth-of-type(-n+3)) { margin-top: 10px; }

.el-radio__input.is-checked .el-radio__inner { border-color: #3c7ee5; background: #3c7ee5; }
.el-radio__input.is-checked + .el-radio__label { color: #3c7ee5; }
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner { background-color: #3c7ee5; border-color: #3c7ee5; }
.el-checkbox__input.is-checked + .el-checkbox__label { color: #3c7ee5; }

.el-radio { color: #1b1b1b; cursor: pointer; margin-right: 30px; }
.el-form-item__label { vertical-align: middle; font-size: 14px; color: #1b1b1b; }

.color-danger { color: #fb5555; }
.td-no-padding td { padding: 0; }

/* 输入清除按钮 hover 边框联动 */
.el-input .el-input__clear:hover { color: #9b9b9b; border: 2px solid rgba(155,155,155,.5) !important; }
.el-input .el-input__clear:hover + .el-input__inner { border: 2px solid rgba(155,155,155,.5) !important; }
.el-input__suffix-inner { pointer-events: all; }

/* -------------------------------------------------------
 * 15. 轻提示/加载（toast & loading）
 * ----------------------------------------------------- */
.lx-toast {
  position: fixed; bottom: 100px; left: 50%; box-sizing: border-box; max-width: 80%;
  height: 40px; line-height: 20px; padding: 10px 20px; transform: translateX(-50%);
  text-align: center; z-index: 9999; font-size: 14px; color: #fff; border-radius: 4px;
  background: rgba(0,0,0,.7); animation: show-toast .5s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lx-toast.lx-word-wrap { width: 80%; white-space: inherit; height: auto; }
.lx-toast.lx-toast-top { top: 50px; bottom: inherit; }
.lx-toast.lx-toast-center { top: 50%; margin-top: -20px; bottom: inherit; }
@-webkit-keyframes show-toast { 0% { opacity: 0; } to { opacity: 1; } }
@keyframes show-toast { 0% { opacity: 0; } to { opacity: 1; } }

.lx-load-mark { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; }
.lx-load-box {
  position: fixed; z-index: 3; width: 7.6em; min-height: 7.6em; top: 180px; left: 50%;
  margin-left: -3.8em; background: rgba(0,0,0,.7); text-align: center; border-radius: 4px; color: #fff;
}
.lx-load-content { margin-top: 64%; font-size: 14px; }
.lx-loading, .lx-loading-nocontent { position: absolute; width: 0; left: 50%; top: 38%; }
.lx-loading-nocontent { top: 50%; }

/* -------------------------------------------------------
 * 16. 协议&说明等文本
 * ----------------------------------------------------- */
.agree-pact-dialog p {
  line-height: 24px; text-align: justify; text-indent: 2em; font-size: 1em;
}
.pay-submit .value-added-service .el-radio { width: 170px; }
.pay-submit .cost-num { width: 40%; }
.pay-submit .order-num { width: 60%; }

.form-common .el-input,
.form-common .el-textarea,
.form-common .el-textarea .el-textarea__inner { width: 408px; }

.class-check-span { font-weight: bold; }
.classify-form.el-form--inline .el-form-item:last-child { margin-right: 2px; }
.font-itatic { font-style: italic; }
.quick-form .el-input--medium .el-input__icon { line-height: 32px; }

/* -------------------------------------------------------
 * 17. 其他按钮类
 * ----------------------------------------------------- */
.online-btn {
  width: 120px; height: 30px; margin-top: 20px; background: #d1eeec; border: 2px solid #55a9ff; border-radius: 4px;
  color: #3c7ee5; font-size: 12px; display: block; margin-left: auto; margin-right: auto; text-align: center; line-height: 29px; padding: 0 25px;
}
.online-btn i { margin-right: 2px; float: left; }
.online-btn span { float: left; }

.cls-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 115px; height: 35px; line-height: 33px; padding: 0 10px; margin: 0 10px 10px 0;
  white-space: nowrap; cursor: pointer; background: #FFF; border: 2px solid rgba(220,223,230,.5);
  text-align: center; border-radius: 4px; font-size: 14px; color: #606266; position: relative; overflow: hidden; transition: color .3s ease;
  box-sizing: border-box;
}
/* 分类选中/激活：与悬停效果一致（外框主色 2px + 浅色背景 + 文字主色） */
.cls-btn:hover,
.cls-btn.active,
.cls-btn.hight {
  border: 2px solid var(--color-primary, #3369E3);
  background-color: #ecf5ff;
  color: var(--color-primary, #3369E3);
  font-weight: bold;
}
.cls-btn::after {
  content:""; position: absolute; left: -10px; bottom: 0; width: 0; height: 3px;
  background: linear-gradient(to right,#3369E3,#008A64); transition: width .3s ease;
}
.cls-btn:hover::after { width: calc(100% + 20px); }

/* -------------------------------------------------------
 * 18. 分享大图层（海报）
 * ----------------------------------------------------- */
.showLayer {
  position: absolute; top:0; left:0; width:100%; background: rgba(0,0,0,.5); text-align:center; z-index:3000;
}
.shareLayer { position: absolute; top:0; left:0; width:100%; text-align:center; z-index:3000; height:100vh; }
.share-content {
  position: absolute; z-index: 3008; box-sizing: content-box; width: 523px;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.share-content img { width: 100%; height: auto !important; }
.share-download {
  width: 210px; height: 50px; background: #fff; border-radius: 25px; border: 2px solid #fff; color: #507CF3;
  display: block; margin: 0 auto; text-align: center; line-height: 48px; margin-top: 20px; font-size: 18px;
}
.share-download i { color: #507CF3; }
.imgbox-close {
  position: absolute; top: -15px; right: -15px; height: 30px; width: 30px;
  background: url(/statics/epower/img/imgbox-close.png) top left no-repeat; cursor: pointer; outline: none;
}
.share-close { position: absolute; top: -20px; right: -20px; height: 20px; width: 20px; cursor: pointer; outline: none; }
.share-close i { color: #000; }
.dialog-img-a:hover { cursor: zoom-in; }

/* -------------------------------------------------------
 * 19. 小辅助视觉
 * ----------------------------------------------------- */
.text-strong {
  color: #21C197 !important; display: inline-block; width: 300px; line-height: 200%; padding-left: 20px;
}
.products-copy-er {
  color: #D7264A; cursor: pointer; transition: color .3s;
}
.products-copy-er:hover { color: #008B58; }

/* 覆盖全站分享条在本页的位置，确保在左侧可见（挂载在 #app 下） */
#app .share-layout {
  position: fixed !important;
  /* 纵向在屏幕中线居中 */
  top: 50% !important;
  transform: translateY(-50%);
  /* 相对于视口居中容器左侧，向中间 50px：50% - 675px + 50px = 50% - 625px */
  left: calc(50% - 775px) !important; /* 左移 150px */
  margin-left: 0 !important;
  z-index: 3000 !important;
  /* 背景略微放大 + 阴影增强悬浮感 */
  width: 48px;
  padding: 10px 6px 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  /* ico 与背景整体居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 微信二维码弹层在本页使用“磨砂玻璃”效果（Element UI popover 内部） */
.el-popover .share-layout-wechat-qrcode {
  background-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.el-card {
  border-radius: 4px;
  border: 2px solid rgba(230,235,245,.5);
  background-color: #fff; overflow: hidden; color: #1a253d; transition: .3s;
  box-shadow: 4px 4px 10px rgba(0,0,0,.02), -4px 4px 10px rgba(0,0,0,.02), 0 10px 20px rgba(0,0,0,.02);
}
.el-card.is-always-shadow {
  box-shadow: 4px 4px 12px rgba(0,0,0,.05), -4px 4px 12px rgba(0,0,0,.05), 0 10px 20px rgba(0,0,0,.05);
}
.tm-font-picker { margin: 6px 0 8px; display: inline-flex; align-items: center; gap: 6px; }
.tm-font-picker .ml6 { margin-left: 6px; }
.btn-blue.plain { border: 2px solid #3c7ee5; }

/* 字体下拉菜单选项前的空心/主色圆圈（动态颜色） */
.tm-font-select-dropdown .el-select-dropdown__item {
  position: relative;
  padding-left: 44px; /* 给圆圈和序号留出空间 */
  background-color: #ffffff; /* 奇数行默认白底 */
}
/* 偶数行浅灰底，形成单双行区分 */
.tm-font-select-dropdown .el-select-dropdown__item:nth-child(even) {
  background-color: #f7f8fc;
}
.tm-font-select-dropdown .el-select-dropdown__item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--primary-color); /* 空心圆圈，使用主色 */
  background-color: transparent;
  box-sizing: border-box;
}

/* 序号仅在下拉列表中显示（视觉上在名称前，通过绝对定位实现） */
.tm-font-select-dropdown .el-select-dropdown__item::after {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-color); /* 与圆圈主色保持一致 */
  font-size: 12px;
}
.tm-font-select-dropdown .el-select-dropdown__item:nth-child(1)::after { content: "1."; }
.tm-font-select-dropdown .el-select-dropdown__item:nth-child(2)::after { content: "2."; }
.tm-font-select-dropdown .el-select-dropdown__item:nth-child(3)::after { content: "3."; }
.tm-font-select-dropdown .el-select-dropdown__item:nth-child(4)::after { content: "4."; }
.tm-font-select-dropdown .el-select-dropdown__item:nth-child(5)::after { content: "5."; }
.tm-font-select-dropdown .el-select-dropdown__item:nth-child(6)::after { content: "6."; }

.tm-font-select-dropdown .el-select-dropdown__item.selected::before {
  background-color: var(--primary-color); /* 选中时填充为主色 */
  border: 2px solid var(--primary-color); /* 圆环同样使用主色 */
}
/* 选中项整行背景使用主色的20%不透明度 */
.tm-font-select-dropdown .el-select-dropdown__item.selected {
  background-color: rgba(var(--primary-color-rgb), 0.2) !important;
}

/* -------------------------------------------------------
 * 20. 全宽提示块（复用站内风格）
 * ----------------------------------------------------- */
.notice-wide-wrap { margin-top: 10px; }
.notice-wide {
  background: #EBF1FF; border: 2px solid #D1DFFF; border-left: 6px solid #3369E3;
  padding: 16px 18px; border-radius: 4px;
}
.notice-wide .index-num {
  display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 2px; background: #ff5959; color: #fff; font-size: 12px; margin-right: 8px;
}
.notice-wide li { margin: 6px 0; color: #4a5568; line-height: 1.6; }
@media (max-width: 768px) { .notice-wide { padding: 12px; } }
.link-like{
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 2px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.link-like:hover{ text-decoration: underline;font-weight:700px; }
/* 通用弹窗美化 - 底部按钮固定 */
.el-dialog .el-dialog__header {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

/* 弹窗整体 */
.el-dialog {
    display: flex;
    flex-direction: column;
    max-height: 80vh;   /* 最大高度不超过屏幕 */
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* 内容区域滚动 */
.el-dialog__body {
    flex: 1;             /* 占满剩余空间 */
    overflow-y: auto;    /* 超出内容滚动 */
    padding: 20px;
}

/* 按钮区域固定显示 */
.el-dialog__footer {
    text-align: center;   /* 按钮居中 */
    padding: 15px 20px;
    flex-shrink: 0;       /* 固定高度，不随内容滚动 */
}

/* 按钮宽度 */
.el-dialog__footer .el-button {
    min-width: 120px;
}