:root {
  --bg:#f6f3ee; --card:#fff; --ink:#1c2430; --muted:#5b6777; --line:#e4ddd2;
  --accent:#2f6fed; --accent2:#0f8f6f; --warn:#9a6700; --danger:#b42318;
  --shadow:0 10px 30px rgba(28,36,48,.08);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:"Segoe UI", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  color:var(--ink); background:
    radial-gradient(900px 420px at 0% -10%, #dfeaff 0%, transparent 60%),
    radial-gradient(700px 380px at 100% 0%, #d8f3ea 0%, transparent 55%),
    var(--bg);
  line-height:1.55;
}
a { color:var(--accent); }
.wrap { width:min(880px,92vw); margin:0 auto; }
header { padding:28px 0 8px; }
.brand { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.brand h1 { margin:0; font-size:1.45rem; letter-spacing:.01em; }
.brand p { margin:6px 0 0; color:var(--muted); max-width:40rem; }
.pill { font-size:.75rem; border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 10px; color:var(--muted); }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); padding:18px 18px 16px; margin:14px 0;
}
label { display:block; font-size:.88rem; font-weight:650; margin:0 0 6px; }
.row { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
select, textarea, input[type=text] {
  width:100%; border:1px solid #d5cfc5; border-radius:12px; padding:10px 12px;
  font:inherit; background:#fffdf9; color:var(--ink);
}
textarea { min-height:110px; resize:vertical; }
.hint { color:var(--muted); font-size:.82rem; margin:6px 0 0; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
button.primary {
  appearance:none; border:0; background:linear-gradient(180deg,#3b7bff,#2f6fed);
  color:#fff; font-weight:700; border-radius:12px; padding:11px 16px; cursor:pointer;
}
button.primary:disabled { opacity:.55; cursor:not-allowed; }
button.ghost {
  appearance:none; border:1px solid var(--line); background:#fff; border-radius:12px;
  padding:10px 14px; cursor:pointer; color:var(--ink);
}
.status { font-size:.88rem; color:var(--muted); }
.status.err { color:var(--danger); }
.status.warn { color:var(--warn); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip {
  border:1px solid var(--line); background:#f8fafc; border-radius:999px;
  padding:6px 10px; font-size:.82rem; cursor:pointer; color:var(--ink);
}
.chip:hover { border-color:var(--accent); }
#result { display:none; }
#result.show { display:block; }
.result-head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; }
.result-head h2 { margin:0; font-size:1.15rem; }
.item {
  border-top:1px solid var(--line); padding:14px 0 8px;
}
.item:first-of-type { border-top:0; }
.item h3 { margin:0 0 4px; font-size:1.02rem; }
.meta { color:var(--muted); font-size:.82rem; margin:0 0 8px; }
.item p { margin:0 0 8px; }
.tag {
  display:inline-block; font-size:.72rem; padding:2px 8px; border-radius:999px;
  background:#eef5ff; color:#1e4fb8; margin-right:6px;
}
.notice {
  background:#fff8e8; border:1px solid #f0dfb0; color:#6a4b00;
  border-radius:12px; padding:10px 12px; font-size:.86rem; margin-top:8px;
}
.future {
  margin-top:12px; padding:12px; border-radius:12px; background:#f3faf7;
  border:1px dashed #b7e0d2; color:#0f5d4a; font-size:.88rem;
}
footer {
  margin:28px 0 48px; color:var(--muted); font-size:.82rem;
  border-top:1px solid var(--line); padding-top:18px;
}
footer code { font-size:.78rem; }
@media print {
  header .pill, .chips, .actions, .future, #form-card { display:none !important; }
  body { background:#fff; }
  .card { box-shadow:none; border-color:#ddd; }
}
