/* ---------- tokens ---------- */
:root {
  --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-200:#bae6fd; --sky-300:#7dd3fc;
  --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#0369a1;

  --bg:#f4fbff;
  --bg-soft:#ffffff;
  --panel:rgba(255,255,255,.82);
  --panel-solid:#ffffff;
  --border:rgba(14,165,233,.16);
  --border-strong:rgba(14,165,233,.30);
  --ink:#0b2f45;
  --ink-soft:#3d647c;
  --muted:#46748a;
  --accent:var(--sky-600);
  --accent-text:var(--sky-700);
  --accent-soft:var(--sky-100);
  --ring:rgba(14,165,233,.28);
  --shadow:0 1px 2px rgba(12,74,110,.05), 0 12px 32px -12px rgba(12,74,110,.18);
  --shadow-lg:0 2px 4px rgba(12,74,110,.06), 0 24px 56px -20px rgba(12,74,110,.28);
  --radius:18px;
  --radius-sm:12px;
  --font:"Heebo", "Segoe UI", "Arial Hebrew", system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
  --bg:#05141f;
  --bg-soft:#0a1f2e;
  --panel:rgba(11,35,51,.72);
  --panel-solid:#0b2333;
  --border:rgba(56,189,248,.16);
  --border-strong:rgba(56,189,248,.32);
  --ink:#e6f6ff;
  --ink-soft:#a9cfe4;
  --muted:#6f9cb5;
  --accent:var(--sky-300);
  --accent-text:var(--sky-300);
  --accent-soft:rgba(56,189,248,.14);
  --ring:rgba(56,189,248,.35);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 28px 60px -24px rgba(0,0,0,.8);
}

* { box-sizing:border-box; }

.sr-only {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* soft sky wash behind everything */
.glow {
  position:fixed; inset:-20% -10% auto -10%; height:70vh; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(56,189,248,.22), transparent 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(14,165,233,.14), transparent 70%),
    radial-gradient(45% 45% at 12% 5%, rgba(125,211,252,.18), transparent 70%);
}
:root[data-theme="dark"] .glow { opacity:.55; }

/* ---------- בס"ד ---------- */
.bsd {
  margin:-6px 0 -8px;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--muted);
  text-align:start;
}

/* ---------- topbar ---------- */
.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px clamp(16px, 4vw, 40px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand-mark { width:32px; height:32px; color:var(--sky-500); flex:none; }
:root[data-theme="dark"] .brand-mark { color:var(--sky-300); }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong { font-size:1.02rem; font-weight:800; letter-spacing:-.01em; }
.brand-text small { font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums; }

.theme-toggle {
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:11px; border:1px solid var(--border);
  background:var(--panel); color:var(--ink-soft); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.theme-toggle svg { width:18px; height:18px; }
.theme-toggle:hover { color:var(--accent); border-color:var(--border-strong); }

/* ---------- layout ---------- */
main {
  max-width:1120px; margin:0 auto;
  padding:clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px) 40px;
  display:flex; flex-direction:column; gap:18px;
}

/* ---------- hero + search ---------- */
.hero { text-align:center; margin-bottom:4px; }
.hero h1 {
  margin:0 0 6px; font-size:clamp(1.7rem, 4.2vw, 2.5rem); font-weight:800;
  letter-spacing:-.02em;
  background:linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 62%, var(--sky-600)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead { margin:0 0 20px; color:var(--muted); font-size:.98rem; }

.searchbar {
  position:relative; display:flex; align-items:center; gap:10px;
  max-width:640px; margin:0 auto;
  background:var(--panel-solid);
  border:1px solid var(--border-strong);
  border-radius:999px;
  padding:6px 18px 6px 8px;
  box-shadow:var(--shadow-lg);
  transition:box-shadow .18s, border-color .18s;
}
.searchbar:focus-within {
  border-color:var(--sky-400);
  outline:3px solid var(--sky-600);
  outline-offset:2px;
}
:root[data-theme="dark"] .searchbar:focus-within { outline-color:var(--sky-300); }

:where(a, button, [tabindex]):focus-visible {
  outline:3px solid var(--sky-600);
  outline-offset:2px;
}
:root[data-theme="dark"] :where(a, button, [tabindex]):focus-visible {
  outline-color:var(--sky-300);
}
.search-icon { width:20px; height:20px; color:var(--muted); flex:none; }
.searchbar input {
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:inherit; font-size:1.12rem; font-weight:500; color:var(--ink);
  padding:12px 0; text-align:right;
}
.searchbar input::placeholder { color:var(--muted); font-weight:400; }
.searchbar input::-webkit-search-cancel-button { display:none; }

.live-value {
  flex:none; font-variant-numeric:tabular-nums; font-weight:800; font-size:.92rem;
  color:var(--sky-700); background:var(--accent-soft);
  border:1px solid var(--border-strong);
  padding:5px 12px; border-radius:999px; white-space:nowrap;
  animation:pop .18s ease-out;
}
:root[data-theme="dark"] .live-value { color:var(--sky-300); }
@keyframes pop { from { transform:scale(.88); opacity:0 } to { transform:none; opacity:1 } }

.clear {
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer;
}
.clear svg { width:16px; height:16px; }
.clear:hover { background:var(--accent-soft); color:var(--accent); }

.suggest {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  align-items:center; margin-top:16px; font-size:.86rem; color:var(--muted);
}
.suggest button {
  font-family:inherit; font-size:.86rem; color:var(--ink-soft); cursor:pointer;
  background:var(--panel); border:1px solid var(--border);
  padding:5px 13px; border-radius:999px;
  transition:color .15s, border-color .15s, background .15s, transform .15s;
}
.suggest button:hover {
  color:var(--accent-text); border-color:var(--border-strong);
  background:var(--accent-soft); transform:translateY(-1px);
}

/* ---------- letter strip ---------- */
.letters {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:4px 0 2px;
}
.letter {
  min-width:52px; padding:8px 10px; border-radius:14px;
  background:var(--panel-solid); border:1px solid var(--border);
  box-shadow:var(--shadow); text-align:center;
  animation:rise .26s cubic-bezier(.2,.8,.3,1) backwards;
}
.letter b { display:block; font-size:1.45rem; font-weight:700; line-height:1.1; }
.letter span { display:block; font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.letter.gap { min-width:0; border:0; background:transparent; box-shadow:none; width:10px; }
@keyframes rise { from { opacity:0; transform:translateY(7px) } to { opacity:1; transform:none } }

/* ---------- panels ---------- */
.panel {
  background:var(--panel); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:18px clamp(16px, 3vw, 24px);
  box-shadow:var(--shadow);
}
.panel-title {
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:.95rem; font-weight:700; color:var(--ink-soft); letter-spacing:.01em;
}
.panel-title .dot {
  width:7px; height:7px; border-radius:50%; background:var(--sky-400); flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--sky-400) 18%, transparent);
}
.panel-title .count {
  margin-inline-start:auto; font-weight:600; font-size:.82rem; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- summary ---------- */
.summary { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px, 3vw, 32px); }
.sum-word {
  font-size:clamp(1.9rem, 5vw, 2.9rem); font-weight:800; letter-spacing:-.02em;
  line-height:1.1; margin:0; word-break:break-word;
}
.sum-value {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:116px; padding:12px 20px; border-radius:16px;
  background:linear-gradient(160deg, var(--sky-700), #075985);
  color:#fff; box-shadow:0 10px 26px -12px rgba(2,132,199,.85);
}
.sum-value b { font-size:2.1rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.sum-value span { font-size:.72rem; letter-spacing:.04em; }
.sum-meta { display:flex; flex-wrap:wrap; gap:8px; margin-inline-start:auto; }
.tag {
  font-size:.79rem; font-weight:600; padding:5px 12px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-text);
  border:1px solid var(--border); white-space:nowrap;
}
.tag.warn {
  background:color-mix(in srgb, #f59e0b 14%, transparent);
  color:#92400e; border-color:color-mix(in srgb, #f59e0b 30%, transparent);
}
:root[data-theme="dark"] .tag.warn { color:#fcd34d; }

/* ---------- chips (holy multiples) ---------- */
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 8px 7px 14px; border-radius:999px; cursor:pointer;
  background:var(--panel-solid); border:1px solid var(--border);
  font-family:inherit; font-size:.95rem; color:var(--ink);
  box-shadow:var(--shadow);
  transition:border-color .15s, transform .15s;
}
.chip:hover { border-color:var(--sky-400); transform:translateY(-1px); }
.chip .times {
  font-variant-numeric:tabular-nums; font-weight:800; font-size:.8rem;
  color:#fff; background:var(--sky-700);
  padding:3px 9px; border-radius:999px;
}
:root[data-theme="dark"] .chip .times { color:#06283a; background:var(--sky-300); }
.chip.exact .times { background:linear-gradient(140deg,#b45309,#9a3412); }
:root[data-theme="dark"] .chip.exact .times {
  background:linear-gradient(140deg,#fcd34d,#fbbf24); color:#3b1d00;
}
.chip.exact { border-color:color-mix(in srgb,#f59e0b 40%, transparent); }
.chip .nv { font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---------- word grid ---------- */
.words {
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
}
.word {
  font-family:inherit; font-size:1.02rem; color:var(--ink); cursor:pointer;
  background:var(--panel-solid); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:9px 10px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:border-color .13s, color .13s, transform .13s, background .13s;
}
.word:hover {
  border-color:var(--sky-400); color:var(--sky-700);
  background:var(--accent-soft); transform:translateY(-1px);
}
:root[data-theme="dark"] .word:hover { color:var(--sky-200); }

.more-wrap { display:flex; justify-content:center; }
.more {
  margin-top:16px; font-family:inherit; font-size:.9rem; font-weight:600;
  color:var(--accent-text); background:var(--accent-soft);
  border:1px solid var(--border-strong); border-radius:999px;
  padding:9px 26px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.more:hover { background:var(--sky-500); color:#fff; border-color:var(--sky-500); }
.more:disabled { opacity:.55; cursor:default; }

/* ---------- empty / error ---------- */
.empty { text-align:center; color:var(--muted); padding:34px 20px; }
.empty b { display:block; color:var(--ink-soft); font-size:1.05rem; margin-bottom:4px; }

/* ---------- about (static, crawlable intro copy) ---------- */
.about p { margin:0 0 10px; color:var(--ink-soft); font-size:.92rem; line-height:1.75; }
.about p:last-child { margin-bottom:0; }

/* ---------- skeleton ---------- */
.skeleton { display:flex; flex-direction:column; gap:12px; }
.sk { border-radius:var(--radius-sm); background:var(--panel-solid); border:1px solid var(--border); overflow:hidden; }
.sk-line { height:78px; }
.sk-grid { height:150px; }
.sk::after {
  content:""; display:block; height:100%;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--sky-300) 22%, transparent), transparent);
  animation:shimmer 1.15s infinite;
}
@keyframes shimmer { from { transform:translateX(100%) } to { transform:translateX(-100%) } }

/* ---------- footer ---------- */
footer {
  display:flex; justify-content:center; align-items:center; gap:12px;
  flex-wrap:wrap; padding:6px 20px 44px; font-size:.84rem;
}
footer a {
  color:var(--muted); text-decoration:none; border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
footer a:hover { color:var(--accent-text); border-color:currentColor; }
footer .sep { color:var(--muted); opacity:.5; }

/* ---------- legal pages (terms / privacy / accessibility) ---------- */
.legal-back {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.9rem; font-weight:600; color:var(--accent-text);
  text-decoration:none; margin-bottom:6px;
}
.legal-back svg { width:16px; height:16px; transform:scaleX(-1); }
.legal-back:hover { text-decoration:underline; }

.legal .updated { color:var(--muted); font-size:.82rem; margin:0 0 22px; }
.legal h2 {
  font-size:1.08rem; font-weight:700; color:var(--ink);
  margin:28px 0 8px;
}
.legal h2:first-of-type { margin-top:0; }
.legal p { margin:0 0 10px; color:var(--ink-soft); font-size:.96rem; line-height:1.8; }
.legal ul {
  margin:6px 0 12px; padding-inline-start:22px;
  display:flex; flex-direction:column; gap:6px;
}
.legal li { color:var(--ink-soft); font-size:.96rem; line-height:1.7; }
.legal a { color:var(--accent-text); }

@media (max-width:560px) {
  .sum-meta { margin-inline-start:0; width:100%; }
  .words { grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); }
  .searchbar { padding:5px 14px 5px 6px; }
  .searchbar input { font-size:1.02rem; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::after { animation:none !important; transition:none !important; }
}