:root{ --paper:#FBFAF5; --card:#FFFFFF; --ink:#14306F; --ink-deep:#0C1E48; --ink-soft:#62739C;
    --rule:#DDE5F3; --margin:#D98C86; --accent:#A83232; --chip:#EEF2FB; --chip-line:#CBD6EE;
    --display:"Frank Ruhl Libre","David Libre",David,"Times New Roman",serif;
    --body:"Assistant","Heebo","Arial Hebrew","Helvetica Neue",Arial,system-ui,sans-serif; }
  *{box-sizing:border-box} html,body{margin:0;padding:0;min-height:100%}
  body{ background:var(--paper); background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 37px,var(--rule) 37px,var(--rule) 38px);
    background-position:0 30px; color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.5; -webkit-text-size-adjust:100% }
  .wrap{ max-width:720px; margin:0 auto; padding:0 20px 70px; min-height:100vh; border-right:2px solid var(--margin) }
  @media(min-width:560px){ .wrap{ padding-right:36px } }
  .hero{ padding-top:8vh; transition:padding-top .35s ease; text-align:center }
  body.searching .hero{ padding-top:24px }
  .brand h1{ font-family:var(--display); font-weight:700; margin:0; font-size:44px; letter-spacing:1px; color:var(--ink-deep); line-height:1.15 }
  .brand h1 .dot{ color:var(--accent) }
  .tag{ color:var(--ink-soft); font-size:15px; margin:10px 0 22px; letter-spacing:.3px }
  .searchbar{ display:flex; align-items:center; gap:10px; background:var(--card); border:2px solid var(--ink);
    border-radius:40px; padding:8px 10px 8px 18px; box-shadow:0 2px 0 rgba(20,48,111,.12); max-width:560px; margin:0 auto }
  .searchbar input{ flex:1 1 auto; border:0; outline:0; background:transparent; font-family:var(--display);
    font-size:26px; font-weight:700; color:var(--ink-deep); text-align:center; min-width:0; padding:6px 4px }
  .searchbar input::placeholder{ color:#B4BDD2; font-weight:400 }
  .searchbar input::-webkit-search-cancel-button{ -webkit-appearance:none }
  .searchbar .go{ flex:0 0 auto; border:0; cursor:pointer; background:var(--ink); color:#fff; font-family:var(--body); font-weight:700; font-size:16px; border-radius:30px; padding:11px 22px }
  .searchbar:focus-within{ box-shadow:0 0 0 4px rgba(20,48,111,.16) } .go:hover{ background:var(--ink-deep) }
  .modegrid{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:18px auto 0; max-width:620px }
  .modegrid button{ font-family:var(--display); font-size:17px; font-weight:700; color:var(--ink); background:var(--chip);
    border:1.5px solid var(--chip-line); border-radius:6px; padding:8px 14px; cursor:pointer }
  .modegrid button:hover{ border-color:var(--ink) }
  .modegrid button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff }
  .controls{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; margin-top:14px; font-size:14px; color:var(--ink-soft) }
  .controls label{ display:flex; align-items:center; gap:6px }
  .controls label[hidden]{ display:none }
  .controls input{ width:56px; border:1.5px solid var(--chip-line); border-radius:6px; padding:5px 8px; font-family:var(--body); font-size:15px; text-align:center; background:var(--card); color:var(--ink-deep) }
  #results{ margin-top:26px }
  .queryline{ text-align:center; color:var(--ink-soft); font-size:15px; margin-bottom:16px }
  .queryline b{ font-family:var(--display); font-size:22px; color:var(--ink-deep); font-weight:700 }
  .card{ background:var(--card); border:1.5px solid var(--chip-line); border-radius:4px; padding:18px 18px 16px; margin-bottom:18px }
  .card.matches{ border-right:4px solid var(--ink) }
  .chead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--chip-line); padding-bottom:10px; margin-bottom:13px }
  .cname{ font-family:var(--display); font-weight:700; font-size:21px; color:var(--ink-deep) }
  .ctag{ font-size:12.5px; color:var(--ink-soft); text-align:left }
  .totals{ display:flex; flex-wrap:wrap; gap:20px 34px; align-items:flex-end }
  .tot .lbl{ font-size:13px; color:var(--ink-soft); margin-bottom:2px }
  .tot .num{ font-family:var(--display); font-weight:700; font-size:40px; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums }
  .swapword{ font-family:var(--display); font-weight:700; font-size:28px; color:var(--ink-deep); letter-spacing:2px; margin:2px 0 10px }
  .swapword .from{ color:var(--ink-soft); font-size:18px; font-weight:400 }
  .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
  .chip{ display:inline-flex; align-items:center; gap:5px; background:var(--chip); border:1px solid var(--chip-line); border-radius:3px; padding:4px 9px; font-size:15px }
  .chip b{ font-family:var(--display); font-size:18px; color:var(--ink-deep) } .chip span{ color:var(--ink-soft); font-variant-numeric:tabular-nums }
  .matchlist{ display:flex; flex-wrap:wrap; gap:8px }
  .matchlist button{ font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink-deep); background:var(--chip); border:1px solid var(--chip-line); border-radius:4px; padding:6px 13px; cursor:pointer }
  .matchlist button small{ font-family:var(--body); font-weight:400; font-size:12.5px; color:var(--ink-soft); margin-right:6px }
  .matchlist button:hover{ border-color:var(--ink) }
  .moreBtn{ display:block; margin:14px auto 0; font-family:var(--body); font-size:14px; font-weight:700; color:var(--ink); background:var(--card); border:1.5px solid var(--chip-line); border-radius:30px; padding:8px 20px; cursor:pointer }
  .moreBtn:hover{ border-color:var(--ink) }
  .nomatch{ color:var(--ink-soft); font-size:15px; padding:8px 0 }
  .occs{ margin:10px 0 2px; border-top:1px dashed var(--chip-line); padding-top:10px }
  .occ{ padding:7px 2px; border-bottom:1px solid #F1F3F9; font-size:15.5px }
  .occ:last-child{ border-bottom:none }
  .occ .ref{ font-weight:700; color:var(--ink-deep); font-size:13.5px; margin-left:8px; white-space:nowrap }
  .occ .verse{ font-family:var(--display); font-size:18px; color:var(--ink) }
  .occ mark{ background:#FFF1A8; color:inherit; border-radius:2px; padding:0 1px; font-weight:700 }
  .foot{ text-align:center; color:var(--ink-soft); font-size:12.5px; margin-top:26px }