:root { --bg:#0b0e11; --card:#151a21; --text:#e8f0fe; --muted:#9db0d1; --accent:#6ea8fe; }
*{ box-sizing:border-box; }
html{ direction:rtl; }
body{
  margin:0;
  font-family:system-ui,"Noto Sans Hebrew","Rubik","Heebo",Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
.container{ max-width:640px; margin:0 auto; padding:20px; }
h1{ margin:8px 0 4px; font-size:1.6rem; text-align:center; }
.sub{ color:var(--muted); margin:0 0 16px; text-align:center; line-height:1.5; }
.field{ margin-bottom:16px; position:relative; }
label{ display:block; margin:0 0 6px; color:var(--muted); font-size:1rem; font-weight:600; }
input{
  width:100%; padding:12px 14px;
  border-radius:12px; border:1px solid #253043;
  background:#0f1319; color:var(--text); outline:none;
  text-align:right;
}
button{
  width:100%; padding:12px; border:none; border-radius:12px;
  background:var(--accent); color:#031633; font-weight:700; cursor:pointer;
}
button:active{ transform:translateY(1px); }

.card{ background:var(--card); border:1px solid #273142; border-radius:16px; padding:14px; margin-top:16px; }
.hidden{ display:none; }

.suggestions{
  list-style:none; margin:6px 0 0; padding:0;
  position:absolute; width:100%;
  background:#0f1319; border:1px solid #273142; border-radius:12px;
  max-height:220px; overflow:auto; z-index:2; text-align:right;
}
.suggestions li{ padding:10px 12px; cursor:pointer; }
.suggestions li:hover{ background:#19202b; }

.rel-line{ display:flex; align-items:center; gap:8px; font-weight:700; justify-content:center; }
.name{ padding:4px 8px; background:#0f1319; border:1px solid #273142; border-radius:8px; }
.arrow{ color:var(--muted); }
.rel-text{ margin-top:8px; font-size:1.15rem; text-align:center; }

.path{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.path .node{ padding:6px 10px; background:#0f1319; border:1px solid #273142; border-radius:999px; font-size:0.95rem; }
.path .via{ color:var(--muted); margin:0 2px; }
/* iOS: prevent zoom on focus by using >=16px text in inputs */
@media (max-width: 480px) {
  input[type="text"],
  input[type="search"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;    /* key line */
    line-height: 1.3;
  }
}

html {
  -webkit-text-size-adjust: 100%; /* avoid unexpected zooming/scaling */
}