* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f7f8fa; color: #222; line-height: 1.6; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

.site-header { background: #1e3a8a; color: #fff; padding: 16px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { color: #fff; text-decoration: none; font-size: 20px; font-weight: bold; }
.topnav { display: flex; gap: 18px; flex-wrap: wrap; }
.topnav a { color: #dbeafe; text-decoration: none; font-size: 14px; }
.topnav a:hover { text-decoration: underline; }

main { padding: 28px 0 30px; }
h1 { font-size: 32px; margin: 0 0 8px; }
.tagline { font-size: 17px; color: #555; margin: 0 0 22px; max-width: 720px; }

.card { background: #fff; border: 1px solid #e3e6ec; border-radius: 12px; padding: 22px; margin-bottom: 20px; }
.tool { padding: 22px; }
.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .panes { grid-template-columns: 1fr; } }
.pane label { display: flex; justify-content: space-between; font-weight: bold; font-size: 14px; margin-bottom: 6px; }
.pane label .count { font-weight: normal; color: #2563eb; }
textarea {
  width: 100%; padding: 12px; font-size: 15px; font-family: ui-monospace, Menlo, Consolas, monospace;
  border: 2px solid #ddd; border-radius: 8px; resize: vertical; background: #fff;
}
textarea:focus { outline: none; border-color: #2563eb; }
textarea[readonly] { background: #f8fafc; }

.btn-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn {
  padding: 10px 16px; font-size: 14px; font-weight: bold;
  border: 2px solid #ddd; border-radius: 8px; background: #eee; color: #333; cursor: pointer;
}
.btn:hover { background: #e2e2e2; }
.btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn.primary:hover { background: #1d4ed8; }
.file-btn { display: inline-flex; align-items: center; }

.options {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 18px; padding: 14px 16px;
  background: #f1f5f9; border-radius: 8px; font-size: 14px;
}
.options label { cursor: pointer; white-space: nowrap; }
.options select { padding: 4px 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; }

.stats { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.stats div {
  flex: 1 1 0; min-width: 140px; text-align: center;
  border: 1px solid #e3e6ec; border-radius: 8px; padding: 12px 6px;
}
.stats strong { display: block; font-size: 26px; color: #2563eb; line-height: 1.2; }
.stats span { font-size: 13px; color: #666; }

#removed-wrap { margin-top: 16px; }
#removed-wrap label { font-weight: bold; font-size: 14px; display: block; margin-bottom: 6px; }
.copy-msg { color: #15803d; font-weight: bold; margin: 10px 0 0; }
.hidden { display: none; }

.article h2 { margin-top: 24px; font-size: 21px; }
.article h2:first-child { margin-top: 0; }
.article ol, .article ul { padding-left: 22px; }
.article a { color: #2563eb; }
.article .meta { color: #888; font-size: 13px; }

.site-footer { text-align: center; color: #888; font-size: 14px; padding: 10px 0 30px; }
.site-footer a { color: #2563eb; }