* { box-sizing: border-box; }
:root { color-scheme: dark; }
body {
  margin: 0;
  padding: 18px;
  min-height: 100vh;
  background: #08111f;
  color: #e5edf8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.page-shell { max-width: 1080px; margin: 0 auto; }
.tool-card, .article section {
  border: 1px solid #263850;
  border-radius: 16px;
  background: #0e1a2b;
}
.tool-card { max-width: 920px; margin: 18px auto 0; padding: clamp(18px, 4vw, 34px); text-align: center; }
.back-link { display: inline-block; margin-bottom: 16px; color: #9cc4ff; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
h1 { margin: 0; color: #fff; font-size: clamp(1.55rem, 4.6vw, 2.3rem); line-height: 1.15; letter-spacing: -.035em; overflow-wrap: anywhere; }
.answer { max-width: 760px; margin: 14px auto 0; color: #d2deed; line-height: 1.55; }
.limits { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.limits li { padding: 7px 10px; border: 1px solid #2b4058; border-radius: 999px; color: #aebed2; background: #111e31; font-size: .78rem; }
.drop-zone { display: flex; flex-direction: column; align-items: center; gap: 7px; max-width: 760px; min-height: 122px; margin: 18px auto 12px; padding: 20px; border: 2px dashed #30425a; border-radius: 14px; background: #111d2f; cursor: pointer; }
.drop-zone:hover, .drop-zone.dragover, .drop-zone:focus-visible { border-color: #4d8dff; background: #14243a; outline: none; }
.drop-zone input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.drop-icon { color: #8da3bd; font-size: 1.6rem; line-height: 1; }
.drop-zone strong { color: #e5edf8; }
.drop-hint { color: #8397b0; font-size: .78rem; }
.button { border: 0; border-radius: 8px; padding: 10px 15px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.button.primary { color: white; background: #367bf5; }
.button.primary:hover:not(:disabled) { background: #2468dc; }
.button.secondary { color: #d5dfeb; background: #27394f; }
.button.secondary:hover:not(:disabled) { background: #354b66; }
.button:disabled { opacity: .48; cursor: not-allowed; }
.privacy-note { margin: 12px 0 0; color: #70e1a1; font-size: .82rem; }
.status { display: none; margin: 14px auto 0; padding: 10px 12px; border: 1px solid #315079; border-radius: 10px; background: #10243f; color: #d8e5f5; text-align: left; line-height: 1.45; overflow-wrap: anywhere; }
.status.visible { display: block; }
.status--success { border-color: #28634b; background: #0c241d; color: #9aebba; }
.status--warning { border-color: #725b24; background: #302710; color: #f0d78a; }
.status--error { border-color: #73363b; background: #2b171c; color: #ffc0c4; }
.results { margin-top: 22px; text-align: left; }
.results[hidden] { display: none; }
.results-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.results-heading h2, .article h2 { margin: 0 0 10px; color: #fff; font-size: 1.22rem; }
.file-summary, .candidate__meta { margin: 0; color: #92a5bc; font-size: .78rem; overflow-wrap: anywhere; }
.selection-warning { margin: 14px 0; padding: 11px 13px; border-left: 3px solid #e0a43b; background: #211d16; color: #e5d4ac; font-size: .84rem; line-height: 1.5; }
.candidate-list { display: grid; gap: 8px; }
.candidate { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid #2a3d55; border-radius: 10px; background: #111e31; cursor: pointer; }
.candidate:hover { border-color: #4d8dff; }
.candidate input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: #4d8dff; }
.candidate__body { display: grid; gap: 5px; min-width: 0; }
.candidate__body strong { color: #e6eef9; overflow-wrap: anywhere; }
.candidate__text { color: #b2c0d1; font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.remove-button { display: block; width: 100%; margin-top: 14px; }
.article { max-width: 850px; margin: 22px auto 0; line-height: 1.7; }
.article section { margin: 17px 0; padding: clamp(17px, 3vw, 24px); }
.article p, .article li { color: #c1cede; margin: 9px 0; }
.article ol { padding-left: 22px; }
.article details { border-top: 1px solid #263850; padding: 12px 0; }
.article summary { color: #e5edf8; cursor: pointer; font-weight: 650; }
.article a { color: #9cc4ff; }
footer { max-width: 1080px; margin: 0 auto; padding: 20px 0 8px; }
@media (max-width: 640px) {
  body { padding: 12px; }
  .tool-card { padding: 18px 14px; }
  .results-heading { align-items: stretch; flex-direction: column; }
  .results-heading .button { width: 100%; }
  .candidate { padding: 10px; }
}