:root {
  --bg: #f1f6fb;
  --line: #d7e3ef;
  --text: #1f2d3d;
  --muted: #5d7085;
  --card: #ffffff;
  --accent: #086d66;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
}
.bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 560px at -10% -20%, #dff3ff, transparent 60%);
  pointer-events: none;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 18px; position: relative; z-index: 1; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
h1 { margin: 0; font-size: 1.5rem; }
h2 { margin: 0 0 10px; font-size: 1.1rem; }
p { color: var(--muted); }
label { color: var(--muted); font-size: 0.9rem; }
input, select, textarea, button {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}
textarea { resize: vertical; }
button { cursor: pointer; }
button.primary { background: #e5f8f4; border-color: #9adfce; color: #0b5f57; font-weight: 600; }
button.warn { background: #fff2f0; border-color: #f2b5ad; color: #8f2f22; }
.row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.row > * { flex: 1; }
.output {
  min-height: 90px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px;
  white-space: pre-wrap;
  background: #f8fbff;
  color: #35506b;
}
.records { display: grid; gap: 6px; max-height: 220px; overflow: auto; margin-bottom: 8px; }
.record-item {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  cursor: pointer;
  background: #fbfdff;
}
.record-item:hover { border-color: #7fb1e5; }
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
}