* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden 属性必须优先生效,防止被作者样式(如 .head .cover 的 display:block)覆盖 */
[hidden] { display: none !important; }

:root {
  --primary: #3d5a99;
  --primary-dark: #2b3a67;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #f4f6fa;
  color: #1f2733;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.loading-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 4px solid #e4e9f2;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 10;
}
body.loading .loading-spinner { display: block; }

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

.head {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(31, 39, 51, 0.15);
  text-align: center;
}

.head .logo {
  display: block;
  height: 56px;
  max-width: 160px;
  margin: 0 auto 12px;
  object-fit: contain;
}

.head .cover {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 16px;
}

.head h1 { font-size: 22px; font-weight: 700; }
.head .desc { margin-top: 8px; font-size: 14px; opacity: 0.85; }

.form { background: #fff; border-radius: 14px; padding: 8px 24px 24px; box-shadow: 0 2px 8px rgba(31, 39, 51, 0.06); }

/* 加载骨架屏(防 CLS:与真实表单同高,加载完成直接替换) */
#form-skeleton {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(31, 39, 51, 0.06);
  min-height: 360px;
  padding: 28px 24px;
}
#form-skeleton .sk-line {
  height: 15px;
  border-radius: 999px;
  margin-bottom: 22px;
  background: linear-gradient(90deg, #eef1f6 25%, #e4e9f2 37%, #eef1f6 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease infinite;
}
#form-skeleton .sk-line:last-child { margin-bottom: 0; }
@keyframes sk-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.q { padding: 20px 0; border-bottom: 1px solid #eef1f6; }
.q:last-of-type { border-bottom: none; }

.q-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.req { color: #e5484d; margin-left: 3px; }

.opts { display: flex; flex-direction: column; gap: 10px; }
.opts-img { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.opt {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; cursor: pointer;
  padding: 10px 14px;
  border: 1px solid #e4e9f2;
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.opt:hover { border-color: var(--primary); background: #f7f9fd; }
.opt.checked { border-color: var(--primary); background: #f7f9fd; box-shadow: 0 0 0 1px var(--primary) inset; }
.opt input { width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; }

.opt-with-img {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  text-align: center;
  font-size: 13px;
}
.opt-with-img input { position: absolute; opacity: 0; pointer-events: none; }
.opt-with-img img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  background: #eef1f6;
}

.q textarea,
.q input.text-answer {
  width: 100%;
  border: 1px solid #e4e9f2;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.q textarea:focus,
.q input.text-answer:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(61, 90, 153, 0.12); }
.q input.text-answer { height: 46px; }
.input-unit { display: inline-block; margin-top: 6px; font-size: 13px; color: #5a6675; }

.slider-row { display: flex; align-items: center; gap: 14px; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--primary); }
.slider-row input[type="range"].untouched { opacity: 0.55; }
.slider-val {
  min-width: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  background: #f7f9fd;
  border-radius: 8px;
  padding: 4px 8px;
}
.slider-bounds {
  display: flex; justify-content: space-between;
  font-size: 12px; color: #5a6675; margin-top: 4px;
}
.scale-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  color: #5a6675;
  font-size: 12px;
}
.scale-labels span:last-child { text-align: right; }

.q input[type="date"] {
  width: 100%;
  max-width: 260px;
  border: 1px solid #e4e9f2;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  background: #fff;
}
.q input[type="date"]:focus { border-color: var(--primary); }

.star-row { display: flex; gap: 4px; flex-wrap: wrap; }
.star-choice { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; border-radius: 10px; }
.star-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star {
  font-size: 34px;
  color: #d8dee8;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.star-choice.on .star { color: #f5a623; }
.star-choice:has(input:focus-visible) { outline: 3px solid rgba(61, 90, 153, 0.28); outline-offset: 1px; }

.nps-row { display: grid; grid-template-columns: repeat(11, minmax(40px, 1fr)); gap: 5px; }
.nps-choice { position: relative; display: grid; place-items: center; min-width: 40px; height: 44px; border: 1px solid #dbe1eb; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 700; color: #435063; background: #fff; }
.nps-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nps-choice:has(input:checked) { border-color: var(--primary); color: #fff; background: var(--primary); }
.nps-choice:has(input:focus-visible) { outline: 3px solid rgba(61, 90, 153, 0.28); outline-offset: 1px; }

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.matrix-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.matrix-scroll .matrix-table { min-width: 480px; }
.matrix-table th, .matrix-table td {
  border: 1px solid #eef1f6;
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
}
.matrix-table th { background: #f7f9fd; font-weight: 600; color: #4a5568; }
.matrix-table .matrix-label { text-align: left; font-weight: 500; }
.matrix-table input[type="radio"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.matrix-table tr.matrix-row-invalid th,
.matrix-table tr.matrix-row-invalid td { background: #fff2f2; }

.other-text {
  min-width: 100px;
  flex: 1;
  height: 36px;
  margin-left: 4px;
  padding: 6px 9px;
  border: 1px solid #dbe1eb;
  border-radius: 7px;
  font: inherit;
}
.opt input.other-text { width: auto; height: 36px; flex-shrink: 1; accent-color: initial; }
.other-text:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(61, 90, 153, 0.12); }
.other-text:disabled { background: #f1f3f7; cursor: not-allowed; }
.choice-hint { margin-top: 8px; color: #5a6675; font-size: 12px; }
.q-error { margin: 0 0 10px; color: #c92a2a; font-size: 13px; font-weight: 600; }

.q.invalid .q-title { color: #e5484d; }
.q.invalid { animation: shake 0.3s; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.submit {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.submit:disabled { opacity: 0.6; cursor: not-allowed; }
.submit:not(:disabled):hover { opacity: 0.92; }

.done, .error {
  background: #fff;
  border-radius: 14px;
  padding: 56px 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(31, 39, 51, 0.06);
}
.done-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #e8f7ee;
  color: #1f9d55;
  font-size: 30px;
  line-height: 56px;
}
.done h2, .error h2 { font-size: 19px; margin-bottom: 8px; }
.done p, .error p { font-size: 14px; color: #5a6675; }

/* ---- 品牌:回声波纹 ---- */
.brand-logo {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 10px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.head {
  position: relative;
  overflow: hidden;
}
.head::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(127, 163, 217, 0.28) 0%, transparent 32%),
    radial-gradient(circle at 15% 80%, rgba(127, 163, 217, 0.2) 0%, transparent 28%),
    radial-gradient(circle at 70% 90%, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
  pointer-events: none;
}
.head > * { position: relative; }

/* 提交按钮涟漪 */
.submit { position: relative; overflow: hidden; }
.submit::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.submit:not(:disabled):hover::after {
  animation: ripple 0.7s ease-out;
}
@keyframes ripple {
  from { width: 0; height: 0; opacity: 1; }
  to { width: 320px; height: 320px; opacity: 0; }
}

/* 完成页回声波纹 */
.done-icon { position: relative; }
.done-icon::before, .done-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #1f9d55;
  opacity: 0;
  animation: echoWave 1.6s ease-out infinite;
}
.done-icon::after { animation-delay: 0.5s; }
@keyframes echoWave {
  0% { transform: scale(0.85); opacity: 0.7; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---- 答题进度条 ---- */
.progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(31, 39, 51, 0.06);
}
.progress-bar {
  flex: 1;
  height: 8px;
  background: #eef1f6;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary));
  border-radius: 999px;
  transition: width 0.25s ease;
}
.progress-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .nps-row { grid-template-columns: repeat(6, 1fr); }
  .nps-choice { min-width: 0; }
  .slider-row { gap: 8px; }
  .slider-val { min-width: 64px; font-size: 14px; }
  .opt { align-items: flex-start; flex-wrap: wrap; }
  .opt input.other-text { width: auto; flex-basis: calc(100% - 32px); margin-left: 28px; }
}