* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  background: #f5f7fa;
  color: #1f2329;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
.page { max-width: 720px; margin: 0 auto; padding: 16px 14px 60px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.brand-title { font-size: 21px; font-weight: 600; }
.brand-sub { display: block; font-size: 12px; color: #8a9099; font-weight: 400; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav a {
  padding: 5px 11px; border: 1px solid #dce6ff; border-radius: 999px;
  color: #2f6bff; font-size: 12px; text-decoration: none; background: #fff;
}

.card {
  background: #fff; border-radius: 12px; padding: 18px 16px;
  margin-bottom: 14px; box-shadow: 0 1px 3px rgba(30, 45, 80, .05);
}
.card-title { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.card-hint { display: block; font-size: 12px; color: #8a9099; line-height: 1.6; }

.field-label { display: block; margin: 18px 0 7px; font-size: 14px; font-weight: 500; }
.required { color: #e54545; margin-left: 3px; }
.optional-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 5px;
  background: #f1f4f9; color: #8a9099; font-size: 11px; font-weight: 400;
}
input[type=text], input[type=number], input[type=password], textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #dfe3e9; border-radius: 9px;
  background: #fafbfc; color: #1f2329; font-size: 15px; font-family: inherit;
  outline: none; appearance: none;
}
input:focus, textarea:focus { border-color: #2f6bff; background: #fff; }
textarea { resize: vertical; line-height: 1.6; }
.field-error { display: block; margin-top: 6px; color: #d03b3b; font-size: 12px; }
.count { display: block; margin-top: 6px; text-align: right; color: #a0a6af; font-size: 12px; }

.option-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.option {
  flex: 1 1 calc((100% - 18px) / 3); min-width: 88px; padding: 11px 4px;
  border: 1px solid #dfe3e9; border-radius: 9px; background: #fafbfc;
  color: #4a5261; font-size: 14px; text-align: center; cursor: pointer;
}
.option-four { flex: 1 1 calc((100% - 27px) / 4); min-width: 62px; }
.option.active { border-color: #2f6bff; background: #eef3ff; color: #2f6bff; font-weight: 600; }

.upload-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 116px; padding: 16px; border: 1px dashed #c9d3e3;
  border-radius: 10px; background: #fafbfc; color: #4a5261;
  font-size: 14px; text-align: center; cursor: pointer;
}
.upload-plus { font-size: 30px; line-height: 1; color: #2f6bff; }
.upload-sub { margin-top: 6px; font-size: 12px; color: #a0a6af; }
.preview-wrap { position: relative; margin-top: 10px; }
.preview-img { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 9px; background: #f0f2f5; }
.upload-actions { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; }
.link-btn { color: #2f6bff; cursor: pointer; }
.link-btn.danger { color: #d03b3b; }

button {
  font-family: inherit; font-size: 15px; border: none; border-radius: 9px;
  padding: 12px 16px; cursor: pointer;
}
.btn-primary { width: 100%; background: #2f6bff; color: #fff; font-weight: 600; }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-ghost { background: #fff; color: #2f6bff; border: 1px solid #dce6ff; }
.btn-danger { background: #fff1f1; color: #d03b3b; border: 1px solid #f6d4d4; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > button { flex: 1 1 130px; }
.footnote { display: block; margin-top: 14px; color: #a0a6af; font-size: 12px; text-align: center; line-height: 1.6; }

.banner { padding: 11px 13px; border-radius: 9px; font-size: 13px; margin-bottom: 14px; line-height: 1.6; }
.banner-error { background: #fff1f1; color: #b32d2d; }
.banner-ok { background: #eaf7ef; color: #1d7a4c; }
.banner-info { background: #eef3ff; color: #2a4da8; }

.result-box {
  padding: 14px; border: 1px solid #dce6ff; border-radius: 10px;
  background: #f6f9ff; word-break: break-all; user-select: all;
  -webkit-user-select: all; font-size: 15px; color: #1a3a8f; line-height: 1.7;
}
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f2f5; font-size: 13px; }
.summary-row:last-child { border-bottom: none; }
.summary-label { color: #8a9099; flex: 0 0 78px; }
.summary-value { flex: 1; text-align: right; word-break: break-all; }

.lock-card { max-width: 420px; margin: 60px auto; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; padding: 5px; border-radius: 10px; background: #eaeef4; }
.tab { flex: 1; padding: 9px 4px; text-align: center; border-radius: 8px; font-size: 14px; color: #6b7280; cursor: pointer; }
.tab.active { background: #fff; color: #2f6bff; font-weight: 600; }

.pool-row { margin-top: 18px; }
.pool-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 14px; }
.pool-label { font-weight: 600; }
.pool-tag { padding: 1px 7px; border-radius: 5px; background: #fff1d9; color: #a26a08; font-size: 11px; }
.pool-stat { margin-left: auto; color: #8a9099; font-size: 12px; }
.pool-row textarea { min-height: 108px; font-size: 13px; }
.pool-count { margin-top: 6px; color: #8a9099; font-size: 12px; line-height: 1.5; }
.pool-count.warn { color: #c0392b; }

.record { border-bottom: 1px solid #f0f2f5; padding: 14px 0; }
.record:first-child { padding-top: 2px; }
.record:last-child { border-bottom: none; }
.record-head { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.record-name { font-weight: 600; }
.record-time { color: #a0a6af; font-size: 12px; white-space: nowrap; }
.record-line { margin-top: 6px; color: #4a5261; font-size: 13px; word-break: break-all; }
.record-link { margin-top: 8px; padding: 9px 11px; border-radius: 8px; background: #f6f8fc; color: #2f6bff; font-size: 12px; word-break: break-all; }
.record-note { margin-top: 8px; padding: 9px 11px; border-radius: 8px; background: #fafbfc; color: #4a5261; font-size: 13px; word-break: break-all; }
.record-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.record-actions input[type=text] { flex: 1 1 160px; padding: 8px 10px; font-size: 13px; }
.record-actions button { padding: 8px 12px; font-size: 13px; }
.thumb { display: block; width: 92px; height: 92px; object-fit: cover; border-radius: 8px; margin-top: 8px; background: #f0f2f5; }
.empty { padding: 26px 0; text-align: center; color: #8a9099; font-size: 14px; }

.loading { padding: 24px 0; text-align: center; color: #8a9099; font-size: 14px; }
.hidden { display: none !important; }