:root { 
  --brand-color: #c0392b; 
  --paper-bg: #f4f1ea; 
  --ink-black: #2c3e50; 
  --power-red: #ff0000; 
}
body { 
  background: #dcd6c3; 
  font-family: "Source Han Serif CN", "Songti SC", serif; 
  margin: 0; 
  padding: 15px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  user-select: none; 
}
.controls { 
  width: 100%; 
  max-width: 360px; 
  display: flex; 
  gap: 8px; 
  margin-bottom: 20px; 
}
.btn-main { 
  flex: 1; 
  height: 44px; 
  border-radius: 4px; 
  border: 1px solid var(--brand-color); 
  background: #fff; 
  color: var(--brand-color); 
  font-weight: bold; 
  font-size: 12px; 
  cursor: pointer; 
}
#preview-area { 
  width: 100%; 
  max-width: 360px; 
  display: flex; 
  flex-direction: column; 
  gap: 30px; 
}
.card-ui { 
  background: var(--paper-bg); 
  padding: 30px 20px; 
  border: 2px solid #e0dccf; 
  position: relative; 
  border-top: 10px solid var(--brand-color); 
  box-sizing: border-box; 
}
.t-main { 
  text-align: center; 
  color: var(--ink-black); 
  font-size: 24px; 
  font-weight: 900; 
  margin: 0; 
  letter-spacing: 4px; 
}
.t-sub { 
  text-align: center; 
  font-size: 11px; 
  color: #fff; 
  margin: 15px auto 25px; 
  font-weight: bold; 
  background: var(--brand-color); 
  padding: 3px 15px; 
  width: fit-content; 
}
.row { 
  display: flex; 
  align-items: center; 
  height: 40px; 
  border-bottom: 1px dashed #d1ccc0; 
  overflow: hidden; 
}
.f-name { 
  font-size: 15px; 
  color: #333; 
  width: 90px; 
  font-weight: bold; 
  white-space: nowrap; 
  overflow: hidden; 
}
.num-box { 
  width: 36px; 
  height: 36px; 
  line-height: 36px; 
  text-align: center; 
  font-size: 19px; 
  font-weight: 900; 
  color: var(--brand-color); 
  cursor: pointer; 
}
.num-box.state-2 { 
  background: var(--brand-color); 
  color: transparent !important; /* 隐藏可能残存的数字文字 */
  border-radius: 4px; 
  display: inline-block;
}
.num-box.state-3 { 
  border: 2.5px solid var(--power-red); 
  border-radius: 50%; 
}
.icon-view { 
  color: var(--power-red); 
  font-size: 18px; 
  margin-left: 6px; 
  font-weight: 900; 
  min-width: 20px; 
  text-align: center; 
}
.f-note { 
  font-size: 14px; 
  color: var(--power-red); 
  margin-left: 6px; 
  font-weight: bold; 
}
.btn-save { 
  width: 100%; 
  background: var(--ink-black); 
  color: #fff; 
  padding: 14px; 
  font-weight: bold; 
  margin-top: 20px; 
  border: none; 
  cursor: pointer; 
}
#save-overlay { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.9); 
  display: none; 
  z-index: 10000; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
}
#save-overlay img { 
  max-width: 85%; 
}
.picker-overlay { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,0.8); 
  display: none; 
  z-index: 9999; 
  justify-content: center; 
  align-items: center; 
}
.picker-content { 
  background: var(--paper-bg); 
  padding: 25px; 
  border-radius: 10px; 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 15px; 
}
.opt-btn { 
  width: 60px; 
  height: 60px; 
  border: 1px solid #d1ccc0; 
  border-radius: 4px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 22px; 
  color: var(--brand-color); 
  cursor: pointer; 
}