.icon{font-size:2.5rem;line-height:1}

/* Theme-aware dropdown */
.lang-select{
  appearance:none;
  padding:.55rem .9rem;
  border-radius:.75rem;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.dark .lang-select,
.dim .lang-select{
  background:#020617;
  border-color:#374151;
  color:#e5e7eb;
}

.lang-wrap{display:flex;gap:.5rem;align-items:center}
.lang-badge{font-size:.75rem;color:#6b7280}
.dark .lang-badge,.dim .lang-badge{color:#9ca3af}



body.dim .nav {
    backdrop-filter: blur(16px);
   border-top: 1px solid rgba(0,0,0,.08);
   background-color: #1f29374b;
}


body.dark .nav {
    backdrop-filter: blur(16px);
   border-top: 1px solid rgba(0,0,0,.08);
   background-color: #17202c4b;
}


/* --------- bookmark ------*/

/* =========================
   VOCAB ITEM (CARD)
   ========================= */

.vocab-item {
  position: relative;
  padding: 1.1rem 1.3rem;
  border-radius: 1.1rem;
  background: #ffffff;
  box-shadow: 0 6px 22px rgba(0,0,0,0.06);

  transition:
    background-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;

  will-change: transform;
  scroll-margin-top: 120px;
}

/* Hover lift */
.vocab-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}

/* Dark / Dim */
body.dark .vocab-item,
body.dim .vocab-item {
  background: rgba(255,255,255,0.05);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* Hover in dark */
body.dark .vocab-item:hover,
body.dim .vocab-item:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}


/* =========================
   MARKED VOCAB ITEM
   ========================= */

.vocab-item.marked {
  background: rgba(59,130,246,0.09);
  border: 1px solid rgba(59,130,246,0.35);
}

body.dark .vocab-item.marked,
body.dim .vocab-item.marked {
  background: rgba(59,130,246,0.14);
}





/* =========================
   VOCAB BOOKMARK ICON
   ========================= */

.vocab-bookmark {
  position: absolute;
  right: .6rem;
  top: 1.5rem;
  width: 26px;
  height: 26px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Default (unmarked) */
.vocab-bookmark svg {
  width: 100%;
  height: 100%;
  fill: rgba(59,130,246,0.32);
  transition:
    fill 0.25s ease,
    filter 0.25s ease,
    transform 0.2s ease;
}

/* Marked */
.vocab-item.marked .vocab-bookmark svg {
  fill: rgb(59,130,246);
  filter: drop-shadow(0 0 6px rgba(59,130,246,0.45));
}

/* Press feedback */
.vocab-bookmark:active svg {
  transform: scale(0.92);
}


/* =========================
   GO TO VOCAB BOOKMARK BTN
   ========================= */

#goToVocabBookmarkBtn {
  position: fixed;
  right: 1.1rem;
  bottom: 6.8rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(59,130,246,0.14);
  box-shadow: 0 12px 28px rgba(59,130,246,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 999;
}

#goToVocabBookmarkBtn:hover {
  transform: scale(1.08);
}

#goToVocabBookmarkBtn svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: #ffffff;
  fill: none;
}




/* --------bookmark end -----*/