:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; padding: 22px; max-width: 880px; margin-inline: auto; line-height: 1.35; color:#0b1220; }
a { color: inherit; }
h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -0.3px; }
p.sub { margin: 0 0 18px; color: #4b5563; }
.row { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0 14px; }
label { font-weight: 650; font-size: 13px; color:#111827; display:block; margin-bottom:6px; }
input { width: 100%; padding: 12px 12px; font-size: 16px; border: 1px solid #d1d5db; border-radius: 12px; outline:none; }
input:focus { border-color:#9ca3af; }
.suggest { margin-top:8px; border: 1px solid #e5e7eb; border-radius: 12px; overflow:hidden; display:none; }
.suggest .item { padding: 10px 12px; cursor: pointer; border-top: 1px solid #f3f4f6; background:#fff; }
.suggest .item:first-child { border-top:none; }
.suggest .item:hover { background:#f9fafb; }
.card { border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; margin-top: 14px; background:#fff; }
.big { font-size: 18px; font-weight: 800; }
.muted { color: #4b5563; margin-top: 8px; }
.status { display: inline-block; padding: 8px 12px; border-radius: 999px; font-weight: 800; margin-top: 12px; border:1px solid transparent; }
.status.good { background: #e7f7ee; border-color: #bfe7cf; }
.status.maybe { background: #fff7e6; border-color: #ffe0a3; }
.status.bad { background: #ffecec; border-color: #ffc2c2; }
.links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid #e5e7eb; border-radius: 999px; padding: 8px 10px; cursor: pointer; user-select: none; background:#fff; }
.chip:hover { background:#f9fafb; }
.grid2 { display:grid; grid-template-columns: 1fr; gap: 12px; }
hr { border:none; border-top:1px solid #f3f4f6; margin: 16px 0; }
footer { margin-top: 22px; color: #6b7280; font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap; }
small.note { color:#6b7280; display:block; margin-top:10px; }
kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; background:#f3f4f6; padding:2px 6px; border-radius:6px; }
@media (min-width: 720px) { .row { grid-template-columns: 1fr 1fr; } .grid2{grid-template-columns:1fr 1fr;} }

.togglebar{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.toggle{ border:1px solid #e5e7eb; border-radius:999px; padding:8px 10px; cursor:pointer; background:#fff; font-weight:700; font-size:13px; }
.toggle[aria-pressed="true"]{ background:#f3f4f6; }
.inline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.button{ border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; cursor:pointer; background:#fff; font-weight:800; }
.button:hover{ background:#f9fafb; }
.codebox{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12px; background:#f3f4f6; padding:10px 12px; border-radius:12px; overflow:auto; }