body {
color: #1f2a3a;
}
.config-wrapper {
}

.config-header {
margin-bottom:10px
border-bottom: 1px solid #e9edf2;
padding-bottom:10px;
}

.config-header h2 {
font-size:18px;
font-weight: 600;
letter-spacing: -0.01em;
color: #0b1a2b;
display: flex;
align-items: center;
gap: 10px;
}

.config-header h2 span {
background: #eef2f6;
border-radius: 100px;
font-weight: 500;
padding: 4px 12px;
color: #3a4a5e;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px 30px;
}
.full-row {
  grid-column: 1 / -1;
}
.config-item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
background: #f9fbfd;
border-radius:10px;
padding:6px 10px;
border: 1px solid #eef2f6;
transition: box-shadow 0.15s ease, border-color 0.15s;
margin-bottom:10px;
}

.config-item:hover {
border-color: #cdd9e6;
box-shadow: 0 4px 10px -2px rgba(0, 20, 40, 0.06);
}

/* 左侧标签区 (原 td 第一列) */
.config-label {
flex: 0 0 160px;
font-weight: 500;
color: #2c3e52;
padding-top: 8px;      /* 与输入框顶部对齐 */
letter-spacing: 0.01em;
display: flex;
align-items: center;
gap: 6px;
}

/* 右侧控制区 (原 td 第二列) */
.config-control {
flex: 1 1 300px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
min-width: 0;          /* 防止 flex 溢出 */
}

/* 输入框通用样式 */
.hst-input {
background: white;
border: 1px solid #cfddee;
border-radius: 10px;
padding:6px 10px;
line-height: 1.4;
color: #1a2b3c;
transition: 0.2s;
outline: none;
font-family: inherit;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.hst-input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
/* 复选框包装 */
.checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
background: #f2f6fc;
padding: 6px 14px 6px 10px;
border-radius: 10px;
font-size: 0.9rem;
color: #24425e;
border: 1px solid #dee8f2;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;margin-left:10px;
}

.checkbox:hover {
background: #e9f0fa;
}

.checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #2563eb;
margin: 0;
cursor: pointer;
}

.checkbox label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}

/* 说明文字 */
.remark {
font-size: 0.85rem;
color: #63778b;
background: #edf2f8;
padding: 5px 12px;
border-radius: 10px;
line-height: 1.3;
white-space: nowrap;
display: inline-block;
}

/* 纯文本展示 (店铺ID、注册时间、有效期等) */
.text-value {
background: #ffffff;
border: 1px solid #e2eaf2;
border-radius: 10px;
padding: 8px 16px;
font-size: 0.95rem;
color: #1c3b5c;
font-weight: 500;
display: inline-block;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
word-break: break-word;
}

/* 链接 / 伪按钮样式 */
.payrequest-link {
color: #2563eb;
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
padding: 8px 16px;
border-radius: 40px;
background: #eef4ff;
transition: background 0.15s;
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid transparent;
}

.payrequest-link:hover {
background: #d9e6ff;
text-decoration: none;
border-color: #b8cef0;
}

/* 支付状态气泡 (dics 输出会保留样式，这里给一个通用样式) */
.paystat-badge {
display: inline-flex;
align-items: center;
background: #e6f7ec;
color: #0c6b3b;
padding: 5px 14px;
border-radius: 40px;
font-size: 0.9rem;
font-weight: 500;
}

/* 用于支付方式 radio 等的包裹 (模拟 dics 输出) */
.dics-radio-wrapper {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}

/* 针对 “消费单名称” 这类内联文字 */
.inline-hint {
font-size: 0.92rem;
color: #3b4e62;
background: #eef4fa;
padding: 6px 12px;
border-radius: 20px;
white-space: nowrap;
}

/* 响应式 */
@media (max-width: 700px) {
.config-wrapper {
padding: 1.5rem;
}
.config-item {
flex-direction: column;
gap: 12px;
padding: 16px;
}
.config-label {
flex: 0 0 auto;
padding-top: 0;
font-size: 0.9rem;
color: #3f5a78;
text-transform: uppercase;
letter-spacing: 0.02em;
font-weight: 600;
}
.config-control {
flex: 1 1 auto;
width: 100%;
}
.w500, .w300 {
width: 100%;
}
.checkbox {
white-space: normal;
}
.remark {
white-space: normal;
}
}

/* 模拟模板中可能使用的 dics 生成的 radio 组 (保持美观) */
.fake-radio-group {
display: flex;
flex-wrap: wrap;
gap: 18px;
background: #ffffff;
padding: 6px 12px;
border-radius: 40px;
border: 1px solid #e2eaf2;
}
.fake-radio-group label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
color: #1e3a5f;
}

/* 支付状态演示 */
.paystat-demo {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

/* 修正一些小图标间距 */
.config-control i, .config-control em {
font-style: normal;
}

/* 针对原有 em.checkbox 标签重构，但保留结构变体 */
.checkbox em {
font-style: normal;
}

/* 自定义复选框组合：仿原来的 label 内嵌 checkbox */
.checkbox label {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
cursor: pointer;
}

/* 处理原文件末尾多余的 </td> 带来的影响，我们已经全部重构为 div */
.config-item .config-control > .remark {
margin-left: 10px;
}

/* ---------------- 底部说明区块 ---------------- */
.config-notice {
    margin-top: 18px;
    background: #f0f6ff;
    border: 1px solid #d6e4ff;
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    padding: 14px 18px;
    color: #1e3a5f;
    font-size: 0.92rem;
    line-height: 1.65;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.config-notice-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a4b8c;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.config-notice-title .notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    flex-shrink: 0;
}

.config-notice-body p {
    margin: 0 0 6px 0;
}

.config-notice-body p:last-child {
    margin-bottom: 0;
}

.config-notice-body strong {
    color: #1a4b8c;
    font-weight: 600;
}

.submit-row {
  display: flex;
  flex-direction: column;   /* 按钮在上，说明在下 */
  align-items: center;      /* 水平居中 */
  border:none;background:none;margin-top:10px;
}

/* 按钮本身居中且样式微调 */
.submit-row .hst-btn {
  min-width: 140px;
}

/* 说明区块占满整行宽度（在居中容器里） */
.submit-row .config-notice {
  margin-top: 0;
}