*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

textarea,
input,
button,
select {
  font: inherit;
  margin: 0;
  box-sizing: border-box;
}

:root { --radius: 14px; }
    body { font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif; background:#f6f7fb; margin:0; }
    .wrap { max-width: 800px; margin: 48px auto; padding: 0 16px; }
    .card { background:#fff; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.06); padding: 20px; }
    h1 { font-size: clamp(20px, 4vw, 28px); margin: 0 0 6px; }
    p.lead { color:#555; margin: 0 0 20px; }
    textarea { width:100%; min-height: 130px; padding:14px; font-size:16px; border:1px solid #e3e6ef; border-radius: var(--radius); outline: none; }
    textarea:focus { border-color:#7c8cff; box-shadow: 0 0 0 4px rgba(124,140,255,.15); }
    .row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:12px; }
    select, button { height:44px; border-radius: 12px; border:1px solid #dfe3f1; background:#fff; padding: 0 12px; font-size:15px; }
    button { background:#111827; color:#fff; border:none; padding:0 18px; cursor:pointer; }
    button[disabled] { opacity:.6; cursor: not-allowed; }
    .results { margin-top:18px; display:none; }
    .result-card { background:#0b1020; color:#e6e8ee; border-radius: var(--radius); padding:16px; }
    .badge { display:inline-block; padding:6px 10px; border-radius:999px; font-weight:600; background:#1f2a5a; }
    .muted { color:#a8b0c7; }
    .list { margin:10px 0 0 18px; }
    footer { margin-top: 28px; text-align:center; color:#7a8297; font-size:13px; }
    .spinner { display:inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; border-top-color: transparent; animation: spin .9s linear infinite; vertical-align: -3px; margin-right:8px; }
    @keyframes spin { to { transform: rotate(360deg) } }