:root { --bg: #070b14; --glass: rgba(20, 32, 54, .55); --line: rgba(120, 180, 255, .16); --text: #e6eefb; --muted: #8ea2c0;
  --blue: #39b6ff; --blue2: #1d7fd6; --ok: #3ddc97; --bad: #ff8a9b; --mono: ui-monospace, "Cascadia Code", Consolas, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 16px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--text); min-height: 100vh;
  background: radial-gradient(1100px 600px at 15% -10%, rgba(57, 182, 255, .2), transparent 60%),
              radial-gradient(800px 500px at 100% 10%, rgba(29, 127, 214, .16), transparent 60%), var(--bg);
  background-attachment: fixed; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 20, .6); backdrop-filter: blur(12px); }
.brand { color: var(--text); text-decoration: none; display: flex; gap: 8px; align-items: center; font-weight: 600; letter-spacing: .4px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); }
main { max-width: 860px; margin: 0 auto; padding: 32px 20px 60px; display: grid; gap: 34px; }
h1 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 8px; font-weight: 650; }
h2 { font-size: 20px; margin: 0 0 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.search { display: flex; gap: 10px; padding: 10px; margin-top: 18px; }
input, select, button { font: inherit; color: var(--text); background: rgba(8, 14, 26, .7); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.search input { flex: 1; font-family: var(--mono); letter-spacing: 1.5px; font-size: 18px; text-transform: uppercase; }
input:focus, select:focus { outline: 2px solid rgba(57, 182, 255, .45); }
button { cursor: pointer; background: linear-gradient(180deg, var(--blue), var(--blue2)); color: #04121f; border: 0; font-weight: 600; }
#result { margin-top: 16px; display: grid; gap: 10px; }
.msg { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(8, 14, 26, .5); }
.msg.bad { color: var(--bad); }
.found { margin: 0; color: var(--ok); font-weight: 600; }
.list { display: grid; gap: 14px; }
.card { padding: 18px 20px; }
.card.hit { border-color: rgba(61, 220, 151, .55); }
.card h3 { margin: 10px 0 6px; font-size: 19px; }
.card p { margin: 0 0 10px; }
.summary { color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-family: var(--mono); font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: rgba(57, 182, 255, .14); color: var(--blue); }
.chip.on { background: rgba(61, 220, 151, .2); color: var(--ok); }
footer { max-width: 860px; margin: 0 auto; padding: 0 20px 40px; }

/* red/blue 10/11 r2: one very long word must not widen the page */
.card, .summary, .answer, .card h3 { overflow-wrap: anywhere; }