/* Promiso R6 adoption: page layout and state styles; shared palette in promiso-tokens.css. */
/* 泰文字体（T5.4）：自托管 Noto Sans Thai variable font（wght 100~900，单文件）。
   泰文有上下叠字/声调符号，系统默认字体易错位，须专门引入。 */
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body {
  height:100%;
}

body {
  font-family:var(--font);
  font-size:1rem;
  line-height:1.6;
  color:var(--text);
  background:var(--paper);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* 布局容器 */
.page {
  max-width:720px;
  margin:0 auto;
  padding:24px var(--inset) 56px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* 品牌区 */
.brand {
  text-align:center;
}

.brand-logo {
  width:52px;
  height:52px;
  margin:0 auto 12px;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:600;
  color:var(--text-invert);
  background:var(--accent);
  box-shadow:none;
}

.brand-name {
  font-size:24px;
  font-weight:600;
  letter-spacing:normal;
}

.brand-sub {
  font-size:14px;
  color:var(--text-muted);
}

/* 玻璃拟态卡片 */
.card {
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.card-title {
  font-size:22px;
  font-weight:600;
}

.card-subtitle {
  font-size:14px;
  color:var(--text-muted);
  margin:4px 0 20px;
}

/* 按钮 */
.btn {
  min-height:46px;
  padding:0 20px;
  font-size:1rem;
  font-weight:600;
  font-family:var(--font);
  border:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:transform 0.15s, box-shadow 0.2s, background 0.2s, opacity 0.2s;
  width:100%;
}

.btn:active {
  transform:translateY(1px);
}

.btn:disabled {
  opacity:0.6;
  cursor:not-allowed;
}

.btn-primary {
  color:var(--text-invert);
  background:var(--accent);
  box-shadow:none;
}

.btn-primary:hover:not(:disabled) {
  box-shadow:none;
  background:var(--accent);
}

/* 提示 / 错误 */
.hint {
  font-size:.875rem;
  color:var(--text-muted);
}

.error {
  min-height:20px;
  font-size:.875rem;
  color:var(--danger);
}

.loading {
  color:var(--text-muted);
  text-align:center;
  padding:24px 0;
}

/* 页头（向导） */
.wizard-header .brand-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.wizard-header .brand-logo {
  width:44px;
  height:44px;
  margin:0;
  font-size:22px;
  border-radius:var(--radius);
}

.wizard-header .brand-name {
  font-size:18px;
}

.wizard-header .brand-sub {
  font-size:.875rem;
}

.wizard-title {
  font-size:24px;
  font-weight:600;
}

.wizard-subtitle {
  font-size:14px;
  color:var(--text-muted);
  margin-top:2px;
}

/* 版本徽标 */
.version-badge {
  display:inline-block;
  margin-top:8px;
  padding:2px 10px;
  font-size:.875rem;
  font-weight:600;
  color:var(--primary-dark);
  background:var(--wash);
  border-radius:3px;
}

.version-badge:empty {
  display:none;
}

/* ⚠️ [hidden] 兜底：HTML hidden 属性的默认 display:none 会被 .panel/.section 等
   display:flex 类规则覆盖。这里用 !important 强制：凡带 hidden 属性的元素一律不显示。 */
[hidden] {
  display:none !important;
}

/* 同意书 iframe */
.agreement-wrap {
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--paper);
}

.agreement-frame {
  width:100%;
  height:420px;
  border:none;
  display:block;
}

/* 分项勾选 */
.consent-section {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.consent-title {
  font-size:16px;
  font-weight:600;
}

.consent-list {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.consent-item {
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--paper);
  transition:border-color 0.2s, background 0.2s;
}

.consent-item:has(.consent-check:checked) {
  border-color:var(--primary);
  background:var(--wash);
}

.consent-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  user-select:none;
}

.consent-check {
  width:20px;
  height:20px;
  flex-shrink:0;
  accent-color:var(--primary);
}

.consent-text {
  font-size:14px;
}

/* 必需项徽标：靠右，蓝色系小标签 */
.consent-badge {
  margin-left:auto;
  flex-shrink:0;
  font-size:.875rem;
  font-weight:600;
  padding:2px 9px;
  border-radius:3px;
  color:var(--primary-dark);
  background:var(--wash);
  white-space:nowrap;
}

/* 占位页 */
.placeholder {
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ==========================================================================
   初审材料提交页（T4.4）
   ========================================================================== */

/* 上传区 */
.upload-section {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.upload-title {
  font-size:16px;
  font-weight:600;
}

/* 上传卡片 */
.upload-card {
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--paper);
  overflow:hidden;
  transition:border-color 0.2s, box-shadow 0.2s;
}

.upload-card:has(.upload-status-done) {
  border-color:var(--success);
}

/* 预览区：虚线空态 / 缩略图。本身就是上传入口（点击触发选图）。 */
.upload-preview {
  position:relative;
  min-height:168px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  cursor:pointer;
  transition:background 0.2s;
}

.upload-preview:hover {
  background:var(--paper);
}

.upload-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:24px;
  color:var(--text-muted);
}

/* 虚线框占位图标（纯 CSS：圆角虚线框 + 中心加号） */
.upload-icon {
  position:relative;
  width:64px;
  height:64px;
  border:2px dashed var(--primary);
  border-radius:var(--radius);
  opacity:0.75;
}

.upload-icon::before,
.upload-icon::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:var(--primary);
  border-radius:var(--radius);
  transform:translate(-50%, -50%);
}

.upload-icon::before {
  width:22px;
  height:2.5px;
}

.upload-icon::after {
  width:2.5px;
  height:22px;
}

.upload-label {
  font-size:14px;
  font-weight:600;
}

.upload-thumb {
  max-width:100%;
  max-height:240px;
  object-fit:contain;
  display:block;
}

/* 上传按钮行 */
.upload-actions {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-top:1px solid var(--border);
}

.btn-upload {
  flex:1;
  min-height:44px;
  font-size:14px;
  color:var(--primary-dark);
  background:var(--wash);
  border:1px solid var(--primary-pale);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background 0.2s, transform 0.15s;
}

.btn-upload:hover:not(:disabled) {
  background:var(--wash);
}

.btn-upload:active {
  transform:translateY(1px);
}

.btn-upload:disabled {
  opacity:0.6;
  cursor:not-allowed;
}

/* 上传状态徽标 */
.upload-status {
  display:block;
  font-size:.875rem;
  color:var(--text-muted);
  white-space:nowrap;
  padding:8px 14px;
  border-top:1px solid var(--border);
}

.upload-status:empty {
  display:none;
}

.upload-status-done {
  color:var(--success);
  font-weight:600;
}

/* 成功终态 */
.done {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:16px 0;
}

.done-icon {
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  font-weight:600;
  color:var(--text-invert);
  background:var(--paper);
  box-shadow:none;
  animation:done-pop 0.4s ease;
}

.done-title {
  font-size:22px;
  font-weight:600;
}

.done-desc {
  font-size:14px;
  color:var(--text-muted);
}

/* 老客户提示（重复提交时的温馨提醒） */
.done-notice {
  font-size:.875rem;
  color:var(--warning-text, var(--warning));
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  margin-top:4px;
}

@keyframes done-pop {
  0% {
    transform:scale(0.6);
    opacity:0;
  }
  60% {
    transform:scale(1.08);
  }
  100% {
    transform:scale(1);
    opacity:1;
  }
}

/* ==========================================================================
   完整信息补填页（T4.5）
   ========================================================================== */

/* 表单分区 */
.form-section {
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:8px;
}

.form-section + .form-section {
  border-top:1px solid var(--border);
  padding-top:20px;
}

.form-section-title {
  font-size:16px;
  font-weight:600;
  color:var(--text);
}

.form-section-hint {
  font-size:.875rem;
  color:var(--text-muted);
  margin-top:-8px;
}

/* 表单字段 */
.form-field {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;  /* grid 子项防溢出 */
}

.form-label {
  font-size:.875rem;
  font-weight:600;
  color:var(--text-muted);
}

/* 必填字段 label 的红色星号（T4.5 全部可编辑字段必填） */
.form-label.required::after {
  content:" *";
  color:var(--danger);
}

.form-input {
  width:100%;
  min-width:0;  /* 防双列布局下溢出卡片（T4.5 踩坑） */
  min-height:46px;
  padding:0 14px;
  font-size:1rem;
  font-family:var(--font);
  color:var(--text);
  background:var(--paper);
  border:1px solid var(--input-line);
  border-radius:var(--radius-sm);
  outline:none;
  transition:border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.form-input:focus {
  border-color:var(--primary);
  box-shadow:none;
  background:var(--paper);
}

.form-input::placeholder {
  color:var(--accent);
}

/* 下拉选单：去掉原生箭头，用 CSS 画一个，视觉与 input 一致 */
select.form-select {
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2347598a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
  cursor:pointer;
}

/* 只读字段：置灰、不可编辑（身份字段 disabled + 邮编 readonly） */
.form-input:disabled,
.form-input[readonly] {
  color:var(--text-muted);
  background:var(--wash);
  border-color:transparent;
  -webkit-text-fill-color:var(--text-muted);
  opacity:1;
  cursor:not-allowed;
}

/* 双列字段行（名/姓、府/县、分区/邮编 等） */
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* ==========================================================================
   合同签署页（T4.6）
   ========================================================================== */

/* 订单说明卡 */
.sign-info {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--wash);
}

.sign-info-label {
  font-size:.875rem;
  font-weight:600;
  color:var(--text-muted);
}

.sign-info-value {
  font-size:16px;
  font-weight:600;
  color:var(--primary-dark);
  word-break:break-all;
}

.sign-info-hint {
  font-size:.875rem;
  color:var(--text-muted);
}

/* 功能分区 */
.sign-section {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sign-section + .sign-section {
  border-top:1px solid var(--border);
  padding-top:20px;
}

.sign-section-title {
  font-size:16px;
  font-weight:600;
}

.sign-section-hint {
  font-size:.875rem;
  color:var(--text-muted);
  margin-top:-4px;
}

/* 自拍舞台：圆形取景框 */
.selfie-stage,
.retry-stage {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:240px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--paper);
  overflow:hidden;
}

#selfie-video,
#retry-video {
  width:100%;
  max-height:320px;
  object-fit:cover;
  display:block;
}

.selfie-placeholder {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:32px;
  color:var(--text-muted);
  /* 现在它是 <button>：重置默认样式，整块可点击，做成「占位即按钮」。 */
  width:100%;
  align-self:stretch;
  min-height:240px;
  background:transparent;
  border:none;
  font-family:var(--font);
  cursor:pointer;
}

.selfie-placeholder:active {
  transform:scale(0.98);
}

.selfie-placeholder:disabled {
  opacity:0.6;
  cursor:not-allowed;
}

.selfie-placeholder-text {
  font-size:.875rem;
  font-weight:600;
}

/* 自拍占位图标：圆形虚线 + 中心人形 */
.selfie-icon {
  position:relative;
  width:72px;
  height:72px;
  border:2px dashed var(--primary);
  border-radius:50%;
  opacity:0.75;
}

.selfie-icon::before {
  content:"";
  position:absolute;
  top:16px;
  left:50%;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--primary);
  transform:translateX(-50%);
}

.selfie-icon::after {
  content:"";
  position:absolute;
  bottom:12px;
  left:50%;
  width:34px;
  height:20px;
  border-radius:50% 50% 8px 8px;
  background:var(--primary);
  transform:translateX(-50%);
}

.selfie-thumb {
  max-width:100%;
  max-height:320px;
  object-fit:contain;
  display:block;
}

/* 操作按钮行 */
.sign-actions {
  display:flex;
  gap:10px;
}

.sign-actions .btn {
  flex:1;
}

.btn-outline {
  min-height:44px;
  font-size:14px;
  color:var(--primary-dark);
  background:var(--wash);
  border:1px solid var(--primary-pale);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background 0.2s, transform 0.15s;
}

.btn-outline:hover:not(:disabled) {
  background:var(--wash);
}

.btn-outline:active {
  transform:translateY(1px);
}

/* 补填页底部操作按钮行（保存草稿 + 提交资料） */
.profile-actions {
  display:flex;
  gap:10px;
}

.profile-actions .btn {
  flex:1;
}

/* 签名画板 */
.signature-pad-wrap {
  border:1px dashed var(--primary);
  border-radius:var(--radius-sm);
  background:var(--paper);
  overflow:hidden;
}

.signature-pad {
  display:block;
  width:100%;
  touch-action:none;
  cursor:crosshair;
}

/* 重传证件自救区（仅 E421 出现） */
.sign-retry {
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--wash);
  padding:16px;
}

.retry-notice {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.retry-title {
  font-size:14px;
  font-weight:600;
  color:var(--warning);
}

.retry-desc {
  font-size:.875rem;
  color:var(--text-muted);
}

/* 合同预览容器（第 2 步，iframe 外层） */
.contract-frame-wrap {
  width:100%;
  min-height:420px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:.875rem;
  background:var(--wash);
}

.contract-frame-wrap .agreement-frame {
  width:100%;
  height:420px;
}

/* 终态合同编号 */
.sign-contract-no {
  font-size:14px;
  font-weight:600;
  color:var(--primary-dark);
  background:var(--wash);
  border-radius:3px;
  padding:6px 16px;
  word-break:break-all;
}

/* 响应式 */
@media (max-width: 480px) {
  .page {
    padding:24px 14px 48px;
  }

  .card {
    padding:0;
  }

  .agreement-frame {
    height:360px;
  }

  /* 窄屏双列改单列，防输入框挤压溢出（T4.5 踩坑） */
  .form-row {
    grid-template-columns:1fr;
  }
}

/* Shared samples: open sections, predictable field rhythm and natural mobile scrolling. */
.wizard-header{padding:0 0 24px;border-bottom:1px solid var(--line);text-align:left}
.brand-row{gap:16px;flex-wrap:wrap}.brand-name{margin:0}.brand-sub{font-size:.875rem}
.card+.card,.form-section+.form-section,.order-card+.order-card{border-top:1px solid var(--line);padding-top:28px}
.form-section{padding-bottom:28px}.form-field{margin-bottom:20px}.form-row{gap:20px}
.form-input{min-height:48px;border-color:var(--input-line);font-size:1rem;background:var(--paper)}
.btn{padding:11px 18px;min-height:48px;font-size:1rem;line-height:1.6}.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-ghost,.btn-outline{background:transparent;border:1px solid var(--input-line);color:var(--accent)}
.form-actions,.actions{gap:12px;flex-wrap:wrap}.signature-pad,.signature-canvas{background:var(--paper);border:1px solid var(--input-line)}
@media(max-width:600px){.form-row,.form-grid{grid-template-columns:minmax(0,1fr)}.page{width:100%;padding-inline:var(--inset)}.brand-row{gap:12px}}

/* 成功态只保留页头分隔。 */
#panel-form[hidden]+#panel-done{border-top:0}
#panel-done .done-icon img{width:48px;height:48px}