body { background:#f4efe3; margin:0; padding:0; }
.container { max-width:1240px; }
.page-title { color:#111; text-align:center; font-size:1.7rem; font-weight:800; margin:0; }
.page-title-row { display:flex; align-items:center; justify-content:space-between; margin:0 auto 18px; max-width:1000px; }
.page-title-row .page-title { flex:1; }
.signs-back-btn { display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#2c2c2c,#121212); border:none; color:#d4af37; width:42px; height:42px; padding:0; border-radius:10px; cursor:pointer; font-weight:900; font-size:1.2rem; line-height:1; text-align:center; flex-shrink:0; box-shadow:0 3px 6px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1); transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease; text-decoration:none; }
.signs-back-btn span { display:none; }
.signs-back-btn::before { content:""; width:21px; height:21px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 11.2 12 3l9 8.2v9.3a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5v-9.3Zm2 1v6.8h2v-6h10v6h2v-6.8l-7-6.36L5 12.2Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 11.2 12 3l9 8.2v9.3a.5.5 0 0 1-.5.5H15v-6H9v6H3.5a.5.5 0 0 1-.5-.5v-9.3Zm2 1v6.8h2v-6h10v6h2v-6.8l-7-6.36L5 12.2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.signs-back-btn:hover { background:#d4af37; color:#111; transform:translateY(-1px); box-shadow:0 6px 12px rgba(0,0,0,0.22); }
.signs-back-spacer { display:block; width:42px; flex-shrink:0; }
.search-bar { display:block; width:100%; max-width:640px; box-sizing:border-box; margin:0 auto 14px; background:#fff; border:2px solid #eee; border-radius:12px; padding:10px 16px; color:#333; font-size:0.78rem; font-family:inherit; }
.search-bar:focus { outline:none; border-color:#d4af37; }
.search-bar::placeholder { color:#999; }
.tabs { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; max-width:1000px; margin-left:auto; margin-right:auto; }
.tab { padding:6px 14px; border-radius:16px; font-weight:700; font-size:0.75rem; cursor:pointer; white-space:nowrap; background:#fff; border:2px solid var(--tabclr); color:var(--tabclr); transition:all .15s ease; }
.tab:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,0.08); }
.tab.active { background:var(--tabclr); color:var(--tabtxt); border-color:var(--tabclr); }
.info-box { display:none; max-width:760px; margin:0 auto 18px; background:#eef4ff; border-right:5px solid #3b6fd4; border-radius:8px; padding:10px 14px; }
.info-box.show { display:block; }
.info-box .info-title { font-weight:700; font-size:0.8rem; margin-bottom:4px; }
.info-box .info-desc { font-size:0.68rem; color:#333; line-height:1.5; margin-bottom:6px; }
.info-box .info-count { font-weight:700; font-size:0.7rem; color:#111; }
.empty-note { display:none; max-width:760px; margin:0 auto; text-align:center; color:#777; font-size:0.85rem; padding:28px 16px; background:#fff; border-radius:10px; }
.empty-note.show { display:block; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; max-width:1200px; margin:0 auto; }
.sign-card { background:#fff; border-radius:12px; padding:12px; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,0.07); border:1px solid transparent; border-top:3px solid #d4af37; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.sign-card:hover { transform:translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,0.14); border-color:rgba(212,175,55,0.5); border-top-color:#d4af37; }
/* Fixed-height flex container (not just a fixed image width) so every
   icon - tall, wide, or square - occupies the same vertical space and the
   sign-num badge underneath lines up across a row, matching the approach
   used in the Hebrew build. Previously only image width was fixed, so
   icons with different aspect ratios came out at different heights and
   the badges beneath them drifted out of alignment. */
.sign-icon { height:90px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.sign-icon img { max-width:90px; max-height:90px; width:auto; height:auto; }
.sign-num { display:inline-block; background:#fdecec; color:#c0392b; font-weight:700; padding:3px 12px; border-radius:16px; font-size:0.8rem; margin-bottom:8px; }
.sign-meaning { font-size:0.88rem; font-weight:500; color:#111; line-height:1.55; }
@media (min-width:769px) {
  .sign-meaning { font-size:0.95rem; font-weight:600; line-height:1.6; }
}
@media (max-width:768px) {
  .page-title-row { margin-bottom:16px; }
  .page-title { font-size:1.4rem; }
  .signs-back-btn { width:38px; height:38px; }
  .signs-back-btn:active { transform:translateY(1px); box-shadow:0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06); }
  .signs-back-spacer { width:38px; }
  .tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .tab { padding:5px 4px; border-radius:14px; font-size:0.6rem; line-height:1.2; white-space:normal; text-align:center; display:flex; align-items:center; justify-content:center; min-height:32px; border-width:1.5px; }
  .grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .sign-icon { height:56px; margin-bottom:6px; }
  .sign-icon img { max-width:56px; max-height:56px; }
  .sign-card { padding:10px; min-width:0; }
  .sign-meaning { font-size:0.72rem; overflow-wrap:break-word; word-break:break-word; }
  .sign-num { font-size:0.72rem; padding:3px 10px; }
}
@media (hover:none) {
  .sign-card:hover { transform:none; box-shadow:0 4px 10px rgba(0,0,0,0.07); border-color:transparent; border-top-color:#d4af37; }
}