:root {
  --q-bg: #f2f4f9;
  --q-surface: #ffffff;
  --q-text: #1b2033;
  --q-text2: #6a7288;
  --q-text3: #9aa2b6;
  --q-border: #e6e9f2;
  --q-primary: #4f6ef7;
  --q-primary2: #3d5af1;
  --q-radius: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(1200px 500px at 50% -160px, #e8edff 0%, #f2f4f9 60%);
  color: var(--q-text); font-size: 14px; line-height: 1.55;
  padding: max(14px, env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));
}
.q-wrap { max-width: 560px; margin: 0 auto; }

.q-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 14px; }
.q-title { font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.q-title small { display: block; font-size: 11.5px; font-weight: 400; color: var(--q-text3); margin-top: 2px; letter-spacing: 0; }
.q-link { font-size: 12px; color: var(--q-primary); text-decoration: none; border: 1px solid #dfe5ff; background: #f5f7ff; padding: 5px 10px; border-radius: 9px; }
.q-link:hover { background: #eef1ff; }

.q-card {
  background: var(--q-surface); border-radius: var(--q-radius); padding: 16px;
  box-shadow: 0 18px 40px -28px rgba(31, 41, 75, .5), 0 1px 2px rgba(31,41,75,.04);
}

.qgroup { margin-bottom: 14px; }
.qgroup > label { display: block; font-size: 12px; font-weight: 600; color: var(--q-text2); margin-bottom: 6px; letter-spacing: .2px; }
.qhint { font-size: 11.5px; color: var(--q-text3); margin-top: 5px; }

.qinput, .qselect, .qtextarea {
  width: 100%; border: 1px solid var(--q-border); border-radius: 12px; padding: 10px 12px;
  font-size: 14px; font-family: inherit; color: var(--q-text); background: #fbfcff;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
  -webkit-appearance: none; appearance: none;
}
.qselect {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7288' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 34px;
}
.qtextarea { min-height: 84px; resize: vertical; }
.qinput:focus, .qselect:focus, .qtextarea:focus { outline: none; border-color: #b9c6ff; background: #fff; box-shadow: 0 0 0 3px rgba(79,110,247,.1); }

.qrow { display: flex; gap: 8px; }
.qrow > * { flex: 1; min-width: 0; }

/* 空间分段选择 */
.qchips { display: flex; gap: 6px; flex-wrap: wrap; }
.qchip {
  border: 1px solid var(--q-border); background: #fafbff; color: var(--q-text2);
  border-radius: 11px; padding: 7px 11px; font-size: 12.5px; cursor: pointer; font-family: inherit;
  transition: all .16s ease;
}
.qchip:hover { border-color: #cfd9ff; color: var(--q-primary); }
.qchip.active { background: linear-gradient(135deg, #6f8dff, #4f6ef7); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px rgba(79,110,247,.85); }

/* 图片上传 */
.qphoto-btn {
  width: 100%; border: 1.5px dashed #d8dded; background: #fbfcff; color: var(--q-text2);
  border-radius: 13px; padding: 13px; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: all .16s ease;
}
.qphoto-btn:hover, .qphoto-btn:active { border-color: #b9c6ff; background: #f4f7ff; color: var(--q-primary); }
.qphoto-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.qphoto-item { position: relative; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; background: #eef1f8; }
.qphoto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qphoto-item button {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(17,22,40,.62); color: #fff; font-size: 12px; line-height: 1; cursor: pointer;
}

.qsubmit {
  width: 100%; margin-top: 4px; border: none; border-radius: 14px; padding: 13px;
  font-size: 15px; font-weight: 600; color: #fff; font-family: inherit; cursor: pointer;
  background: linear-gradient(135deg, #6f8dff, #4f6ef7);
  box-shadow: 0 14px 26px -14px rgba(79,110,247,.9);
  transition: transform .12s ease, box-shadow .16s ease;
}
.qsubmit:active { transform: translateY(1px) scale(.995); }
.qsubmit:disabled { opacity: .6; cursor: default; }

.qtoast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(16px);
  background: rgba(22,27,45,.92); color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: all .24s cubic-bezier(.2,.9,.3,1.1); z-index: 99;
  max-width: calc(100vw - 40px); text-align: center;
}
.qtoast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.qtoast.err { background: rgba(190,45,50,.95); }

/* 日期时间原生控件微调 */
input[type="date"], input[type="time"] { min-height: 42px; }

@media (min-width: 640px) {
  body { padding-top: 34px; }
  .q-card { padding: 20px; }
}