* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f5f6f8;
  color: #1f2328;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 24px 16px 60px; }
header h1 { margin: 0 0 8px; font-size: 22px; }
.meta { color: #57606a; font-size: 12px; display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.meta b { color: #1f2328; margin-right: 4px; }

.partner-bar { background: #fff; border: 1px solid #d0d7de; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; }
.partner-bar label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #57606a; margin: 0; }
.partner-bar span { font-weight: 600; color: #1f2328; }
.partner-bar select { flex: 1; padding: 5px 8px; }
.partner-bar code { background: #f6f8fa; padding: 1px 4px; border-radius: 4px; font-size: 11px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid #d0d7de; margin-bottom: 14px; }
.tab {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  border-radius: 6px 6px 0 0; padding: 8px 16px; cursor: pointer;
  font: inherit; color: #57606a; font-weight: 500;
}
.tab.active {
  background: #fff; border-color: #d0d7de; color: #1f2328;
  position: relative; top: 1px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

form { background: #fff; border: 1px solid #d0d7de; border-radius: 8px; padding: 16px; }
fieldset { border: none; border-top: 1px solid #eaeef2; margin: 0; padding: 14px 0; }
fieldset:first-of-type { border-top: none; padding-top: 0; }
legend { font-weight: 600; color: #1f2328; padding: 0 6px 0 0; font-size: 13px; }

label { display: block; margin: 8px 0; font-size: 13px; color: #57606a; }
label.radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; color: #1f2328; }
label.radio code { background: #f6f8fa; padding: 1px 4px; border-radius: 4px; font-size: 12px; }

input[type=text], input[type=number], input:not([type]), select, textarea {
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  font: inherit;
  background: #fff;
}
textarea { resize: vertical; }

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }

.actions { margin-top: 14px; display: flex; gap: 10px; }
button {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #1f6feb;
  background: #1f6feb;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
button[type=button] { background: #fff; color: #1f6feb; }
button:disabled { opacity: 0.6; cursor: progress; }

.result { margin-top: 18px; background: #fff; border: 1px solid #d0d7de; border-radius: 8px; padding: 16px; }
.result h2 { margin: 0 0 8px; font-size: 16px; }
.status-line { font-size: 12px; color: #57606a; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.result pre { background: #0d1117; color: #c9d1d9; padding: 12px; border-radius: 6px; overflow: auto; font-size: 12px; margin: 6px 0 0; }
.result.error pre { color: #ffa198; }
.raw-wrap > summary { cursor: pointer; font-size: 12px; color: #57606a; user-select: none; padding: 4px 0; }

.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.badge-ok  { background: #dafbe1; color: #116329; }
.badge-idem{ background: #ddf4ff; color: #0969da; }
.badge-err { background: #ffebe9; color: #82071e; }

.summary {
  margin: 8px 0 10px;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 4px;
  font-size: 13px;
  background: #f6f8fa;
  border: 1px solid #eaeef2;
  border-radius: 6px;
  padding: 10px 12px;
}
.summary dt { color: #57606a; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; }
.summary dd { margin: 0; color: #1f2328; word-break: break-all; }

.hidden { display: none !important; }
.hint { display: block; margin-top: 4px; color: #9a6700; font-size: 11px; }
.file-preview { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: #57606a; }
.file-preview li { margin: 2px 0; }
.file-preview li.too-big { color: #cf222e; }

.ticket-list .list-head { font-size: 12px; color: #57606a; margin-bottom: 8px; }
.ticket-list .empty { color: #57606a; font-size: 13px; }

.ticket-card {
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ticket-card > header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.ticket-card .tid {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 600;
  font-size: 14px;
}
.ticket-card .progress { margin-top: 8px; }
.ticket-card .progress h4 { font-size: 12px; color: #57606a; margin: 6px 0 4px; font-weight: 600; }
.ticket-card .progress-item {
  font-size: 12px; color: #1f2328; padding: 4px 0; border-top: 1px dashed #eaeef2;
}
.ticket-card .progress-item .when { color: #57606a; font-family: ui-monospace, monospace; margin-right: 6px; }
.ticket-card .progress-item .who  { color: #0969da; margin-right: 6px; }

.gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gallery a {
  display: block; width: 100px; height: 100px; overflow: hidden;
  border: 1px solid #d0d7de; border-radius: 6px;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; background: #f6f8fa; }

.location-banner {
  background: #ddf4ff;
  border: 1px solid #80ccff;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0 0 12px;
  font-size: 13px;
  color: #0550ae;
}
.location-banner small { color: #57606a; margin-left: 6px; font-weight: 400; }

/* JWT exp countdown */
.exp-ok { color: #1a7f37; font-size: 11px; }
.exp-warn { color: #cf222e; font-size: 11px; font-weight: 600; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px);
  background: #1f2328; color: #fff; padding: 8px 16px; border-radius: 20px;
  font-size: 13px; opacity: 0; transition: opacity 0.2s, transform 0.2s;
  pointer-events: none; z-index: 1000; max-width: 80vw;
}
.toast.show { opacity: 0.95; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Uploaded list (BFF) */
.uploaded-list { list-style: none; margin: 10px 0 0; padding: 0; }
.uploaded-list li.empty { color: #57606a; font-size: 12px; padding: 4px 0; }
.uploaded-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; margin-bottom: 6px;
  background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px;
}
.uploaded-item .thumb {
  width: 48px; height: 48px; object-fit: cover; border-radius: 4px;
  background: #eaeef2; flex-shrink: 0;
}
.uploaded-item .url {
  flex: 1; font-size: 11px; color: #57606a; word-break: break-all;
  background: transparent; padding: 0;
}
.uploaded-item button {
  flex-shrink: 0; padding: 4px 10px; font-size: 12px;
  background: #fff; color: #1f6feb; border: 1px solid #1f6feb;
}
.uploaded-item button.btn-danger { color: #cf222e; border-color: #cf222e; }

/* Result actions row */
.result-actions { margin: 8px 0; display: flex; gap: 8px; }
.result-actions button {
  padding: 6px 12px; font-size: 12px;
  background: #fff; color: #1f6feb; border: 1px solid #1f6feb;
}

.advanced-images { margin-top: 8px; }
.advanced-images > summary { cursor: pointer; font-size: 11px; color: #57606a; padding: 4px 0; }
.advanced-images textarea { margin-top: 4px; }

/* Mobile responsive */
@media (max-width: 600px) {
  .wrap { padding: 12px 8px 60px; }
  header h1 { font-size: 18px; }
  .meta { font-size: 11px; gap: 8px; }
  .row { grid-template-columns: 1fr; }
  fieldset { padding: 10px 0; }
  legend { font-size: 12px; }
  label { font-size: 12px; }
  input, select, textarea { font-size: 16px; }  /* 防 iOS Safari 输入时自动 zoom */
  .ticket-card { padding: 10px; }
  .gallery a { width: 80px; height: 80px; }
  .tabs { overflow-x: auto; }
  .tab { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
  .uploaded-item { flex-wrap: wrap; }
  .uploaded-item .url { width: 100%; }
}

.bind-bar { margin-bottom: 14px; }
.bind-bar form, .bind-bar fieldset { background: #fffdf6; border: 1px solid #d4ad53; border-radius: 8px; padding: 12px 16px; }
.bind-bar legend { color: #9a6700; }
.bind-state { margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.bind-state.ok { background: #dafbe1; color: #116329; border: 1px solid #aceebb; }
.bind-state code { background: #f6f8fa; padding: 1px 4px; border-radius: 3px; font-size: 11px; }

/* 多房产候选列表 */
.candidates {
  margin-top: 10px;
  border: 1px solid #d4ad53;
  border-radius: 6px;
  background: #fff;
}
.candidates .cands-head {
  padding: 6px 10px;
  background: #fff8e0;
  border-bottom: 1px solid #eaeef2;
  font-size: 12px;
  color: #9a6700;
}
.cand-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #eaeef2;
  font-size: 13px;
}
.cand-item:last-child { border-bottom: none; }
.cand-item.active { background: #ddf4ff; }
.cand-item .cand-name { font-weight: 600; color: #1f2328; min-width: 60px; }
.cand-item .cand-addr { color: #57606a; flex: 1; }
.cand-item .cand-upid code { background: #f6f8fa; padding: 1px 4px; border-radius: 3px; font-size: 11px; }
.cand-item .cand-tag {
  background: #0969da; color: #fff; padding: 2px 8px;
  border-radius: 10px; font-size: 11px;
}
.cand-item .cand-switch {
  padding: 3px 10px; font-size: 12px;
  background: #fff; color: #1f6feb; border: 1px solid #1f6feb;
}
.meta a { color: #1f6feb; text-decoration: none; }
.meta a:hover { text-decoration: underline; }