/* =========================================================
   N3 VOCABULARY PAGE
   Header follows n3-exams.html / n3-exams.css.
   ========================================================= */

:root {
  --vocab-bg: #f5f7fb;
  --vocab-surface: #ffffff;
  --vocab-soft: #f8fafc;
  --vocab-border: #e2e8f0;
  --vocab-text: #111827;
  --vocab-muted: #667085;
  --vocab-primary: #38bdf8;
  --vocab-primary-dark: #0284c7;
  --vocab-blue: #2563eb;
  --vocab-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body.n3-vocabulary-page {
  min-height: 100vh;
  margin: 0;
  background: var(--vocab-bg);
  color: var(--vocab-text);
  font-family: Poppins, "Noto Sans JP", sans-serif;
}

.n3-vocabulary-page button,
.n3-vocabulary-page input,
.n3-vocabulary-page select {
  font: inherit;
}

/* Header center logo: same structure as n3-exams, keep 語. */
.n3-vocabulary-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, #7dd3fc, var(--vocab-primary));
  color: #ffffff;
  box-shadow:
    0 9px 19px rgba(2, 132, 199, 0.24),
    inset 1px 1px 0 rgba(255, 255, 255, 0.32);
  font: 900 21px/1 "Noto Sans JP", sans-serif;
}

.n3-vocabulary-shell {
  width: min(1500px, 94%);
  margin: 0 auto;
  padding: 34px 0 58px;
}

.n3-vocabulary-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.n3-vocabulary-title-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  flex: 0 0 68px;
  border: 1px solid #e2e8f0;
  border-radius: 19px;
  background: #ffffff;
  box-shadow:
    0 12px 25px rgba(15, 23, 42, 0.09),
    inset 1px 1px 0 #ffffff;
}

.n3-vocabulary-title-icon img {
  width: 48px;
  height: 48px;
}

.n3-vocabulary-heading p {
  margin: 0 0 5px;
  color: var(--vocab-primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.n3-vocabulary-heading h1 {
  margin: 0;
  color: #111827;
  font-size: 30px;
  line-height: 1.2;
}

.n3-vocabulary-heading > div > span {
  display: block;
  margin-top: 6px;
  color: var(--vocab-muted);
  font-size: 13px;
}

.n3-vocabulary-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.n3-vocabulary-stats article {
  min-height: 118px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--vocab-border);
  border-radius: 19px;
  background: var(--vocab-surface);
  box-shadow: var(--vocab-shadow);
}

.n3-stat-art {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  border-radius: 15px;
  font-size: 22px;
  font-weight: 900;
}

.n3-stat-art.is-total {
  background: #fff1df;
  color: var(--vocab-primary-dark);
}

.n3-stat-art.is-learned {
  background: #e0faee;
  color: #16865d;
}

.n3-stat-art.is-saved {
  background: #fff3d9;
  color: #d88900;
}

.n3-stat-art.is-rate {
  background: #e5f1ff;
  color: #2563eb;
}

.n3-vocabulary-stats small,
.n3-vocabulary-stats article div > span {
  color: var(--vocab-muted);
  font-size: 11px;
}

.n3-vocabulary-stats strong {
  display: block;
  margin: 3px 0 1px;
  color: #111827;
  font-size: 27px;
  line-height: 1;
}

.n3-memory-track {
  width: 100%;
  height: 6px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebf3;
}

.n3-memory-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2494ff, #2563eb);
  transition: width 0.25s ease;
}

.n3-vocabulary-panel {
  overflow: visible;
  border: 1px solid var(--vocab-border);
  border-radius: 20px;
  background: var(--vocab-surface);
  box-shadow: var(--vocab-shadow);
}

.n3-vocabulary-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) minmax(190px, 0.75fr) auto;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--vocab-border);
}

.n3-vocabulary-search,
.n3-vocabulary-filter {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #dce3ee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.95),
    0 5px 14px rgba(38, 52, 83, 0.04);
}

.n3-vocabulary-search svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #475569;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.n3-vocabulary-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
  font-size: 13px;
}

.n3-vocabulary-search input::placeholder {
  color: #8b95a7;
}

.n3-vocabulary-filter {
  position: relative;
  padding-right: 38px;
}

.n3-vocabulary-filter > span {
  display: none;
}

.n3-vocabulary-filter select {
  width: 100%;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: #111827;
  font-size: 13px;
  cursor: pointer;
}

.n3-vocabulary-filter svg {
  position: absolute;
  right: 13px;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #475569;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Bright blue lookup button. */
.n3-vocabulary-lookup {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, #7dd3fc, var(--vocab-primary));
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  box-shadow:
    0 10px 22px rgba(2, 132, 199, 0.26),
    inset 1px 1px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.n3-vocabulary-lookup:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 27px rgba(2, 132, 199, 0.31),
    inset 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.n3-vocabulary-lookup svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.n3-vocabulary-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.n3-vocabulary-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
}

.n3-vocabulary-table th {
  padding: 15px 18px;
  background: #f8fafc;
  color: #111827;
  font-size: 11px;
  text-align: left;
  letter-spacing: 0.02em;
}

.n3-vocabulary-table th:nth-child(1) { width: 16%; }
.n3-vocabulary-table th:nth-child(2) { width: 15%; }
.n3-vocabulary-table th:nth-child(3) { width: 20%; }
.n3-vocabulary-table th:nth-child(4) { width: 39%; }
.n3-vocabulary-table th:nth-child(5) {
  width: 10%;
  text-align: center;
}

.n3-vocabulary-table td {
  padding: 16px 18px;
  border-top: 1px solid #edf0f5;
  vertical-align: middle;
  color: #111827;
  font-size: 12px;
}

.n3-vocabulary-table tbody tr {
  transition: background 0.16s ease;
}

.n3-vocabulary-table tbody tr:hover {
  background: #fffaf4;
}

/* Bold vocabulary column, no red dot. */
.n3-vocabulary-word {
  display: inline-flex;
  align-items: center;
  color: #111827;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 900;
}

.n3-vocabulary-reading {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 650;
  color: #111827;
}

.n3-vocabulary-meaning,
.n3-vocabulary-example {
  display: grid;
  gap: 3px;
}

.n3-vocabulary-meaning strong,
.n3-vocabulary-example strong {
  color: #111827;
  font-size: 12px;
  font-weight: 600;
}

.n3-vocabulary-meaning small,
.n3-vocabulary-example small {
  color: #667085;
  font-size: 10.5px;
  line-height: 1.5;
}

.n3-vocabulary-example strong {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.55;
}

.n3-vocabulary-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.n3-word-action {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #2563eb;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.n3-word-action:hover {
  background: #eaf2ff;
  transform: translateY(-1px);
}

.n3-word-action svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.n3-word-action.is-active {
  background: #2563eb;
  color: #ffffff;
}

.n3-word-action.is-speaking {
  background: #fff0dc;
  color: var(--vocab-primary-dark);
  animation: vocabPulse 0.85s ease infinite alternate;
}

@keyframes vocabPulse {
  to { transform: scale(1.08); }
}

.n3-vocabulary-empty {
  padding: 70px 20px;
  text-align: center;
}

.n3-vocabulary-empty strong {
  display: block;
  color: #111827;
  font-size: 16px;
}

.n3-vocabulary-empty span {
  display: block;
  margin-top: 7px;
  color: var(--vocab-muted);
  font-size: 12px;
}

.n3-vocabulary-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border-top: 1px solid var(--vocab-border);
}

.n3-page-numbers {
  display: flex;
  align-items: center;
  gap: 6px;
}

.n3-vocabulary-pagination button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e1e6ef;
  border-radius: 9px;
  background: #ffffff;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(32, 44, 70, 0.05);
}

.n3-vocabulary-pagination button:hover:not(:disabled) {
  border-color: #93b4ff;
  color: #1d4ed8;
}

/* High-specificity current page style so page 2, 3... always highlights blue. */
body.n3-vocabulary-page
  .n3-vocabulary-pagination
  .n3-page-numbers
  button.is-current {
  border-color: #2563eb !important;
  background: linear-gradient(145deg, #4f7df2, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 17px rgba(37, 99, 235, 0.27) !important;
}

.n3-vocabulary-pagination button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.n3-page-ellipsis {
  min-width: 25px;
  color: #667085;
  text-align: center;
}

.n3-vocabulary-result-summary {
  margin: 0;
  padding: 0 20px 18px;
  color: #667085;
  font-size: 11px;
  text-align: center;
}

.n3-vocabulary-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  max-width: min(360px, calc(100vw - 40px));
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 13px;
  background: rgba(25, 34, 53, 0.96);
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(16, 25, 43, 0.25);
  font-size: 12px;
  font-weight: 700;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.n3-vocabulary-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.vocabulary-card-icon img {
  width: 42px;
  height: 42px;
  display: block;
}

/* =========================================================
   DARK MODE — high contrast, simple text colors.
   ========================================================= */
html.dark body.n3-vocabulary-page,
body.dark.n3-vocabulary-page {
  --vocab-bg: #34383f;
  --vocab-surface: #3f444c;
  --vocab-soft: #484e57;
  --vocab-border: #5c6470;
  --vocab-text: #ffffff;
  --vocab-muted: #d0d5dd;
  --vocab-shadow: 0 14px 34px rgba(19, 23, 29, 0.2);
  background: var(--vocab-bg);
  color: #ffffff;
}

html.dark .n3-vocabulary-heading h1,
body.dark .n3-vocabulary-heading h1,
html.dark .n3-vocabulary-stats strong,
body.dark .n3-vocabulary-stats strong,
html.dark .n3-vocabulary-table th,
body.dark .n3-vocabulary-table th,
html.dark .n3-vocabulary-table td,
body.dark .n3-vocabulary-table td,
html.dark .n3-vocabulary-word,
body.dark .n3-vocabulary-word,
html.dark .n3-vocabulary-reading,
body.dark .n3-vocabulary-reading,
html.dark .n3-vocabulary-meaning strong,
body.dark .n3-vocabulary-meaning strong,
html.dark .n3-vocabulary-example strong,
body.dark .n3-vocabulary-example strong,
html.dark .n3-vocabulary-empty strong,
body.dark .n3-vocabulary-empty strong {
  color: #ffffff;
}

html.dark .n3-vocabulary-heading > div > span,
body.dark .n3-vocabulary-heading > div > span,
html.dark .n3-vocabulary-stats small,
body.dark .n3-vocabulary-stats small,
html.dark .n3-vocabulary-stats article div > span,
body.dark .n3-vocabulary-stats article div > span,
html.dark .n3-vocabulary-meaning small,
body.dark .n3-vocabulary-meaning small,
html.dark .n3-vocabulary-example small,
body.dark .n3-vocabulary-example small,
html.dark .n3-vocabulary-result-summary,
body.dark .n3-vocabulary-result-summary {
  color: #d0d5dd;
}

html.dark .n3-vocabulary-title-icon,
body.dark .n3-vocabulary-title-icon,
html.dark .n3-vocabulary-stats article,
body.dark .n3-vocabulary-stats article,
html.dark .n3-vocabulary-panel,
body.dark .n3-vocabulary-panel {
  border-color: var(--vocab-border);
  background: var(--vocab-surface);
}

html.dark .n3-vocabulary-search,
body.dark .n3-vocabulary-search,
html.dark .n3-vocabulary-filter,
body.dark .n3-vocabulary-filter {
  border-color: #626b77;
  background: #484e57;
}

html.dark .n3-vocabulary-search input,
body.dark .n3-vocabulary-search input,
html.dark .n3-vocabulary-filter select,
body.dark .n3-vocabulary-filter select {
  color: #ffffff;
}

html.dark .n3-vocabulary-search input::placeholder,
body.dark .n3-vocabulary-search input::placeholder {
  color: #c7cdd5;
}

html.dark .n3-vocabulary-table th,
body.dark .n3-vocabulary-table th {
  background: #454b54;
}

html.dark .n3-vocabulary-table td,
body.dark .n3-vocabulary-table td {
  border-color: #59616b;
}

html.dark .n3-vocabulary-table tbody tr:hover,
body.dark .n3-vocabulary-table tbody tr:hover {
  background: #484f59;
}

html.dark .n3-vocabulary-pagination button,
body.dark .n3-vocabulary-pagination button {
  border-color: #626b77;
  background: #484f58;
  color: #ffffff;
}

@media (max-width: 1000px) {
  .n3-vocabulary-stats {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .n3-vocabulary-toolbar {
    grid-template-columns: 1fr 210px;
  }

  .n3-vocabulary-lookup {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .n3-vocabulary-brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 10px;
    font-size: 18px;
  }

  .n3-vocabulary-shell {
    width: min(94%, 680px);
    padding-top: 22px;
  }

  .n3-vocabulary-heading {
    align-items: flex-start;
  }

  .n3-vocabulary-title-icon {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .n3-vocabulary-title-icon img {
    width: 42px;
    height: 42px;
  }

  .n3-vocabulary-heading h1 {
    font-size: 24px;
  }

  .n3-vocabulary-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .n3-vocabulary-stats article {
    min-height: 96px;
    padding: 14px;
  }

  .n3-stat-art {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .n3-vocabulary-stats strong {
    font-size: 22px;
  }

  .n3-vocabulary-toolbar {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .n3-vocabulary-lookup {
    grid-column: auto;
  }

  .n3-vocabulary-table-wrap {
    overflow: visible;
  }

  .n3-vocabulary-table {
    min-width: 0;
    display: block;
  }

  .n3-vocabulary-table thead {
    display: none;
  }

  .n3-vocabulary-table tbody {
    display: grid;
    gap: 12px;
    padding: 12px;
  }

  .n3-vocabulary-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--vocab-border);
    border-radius: 15px;
    background: var(--vocab-surface);
    box-shadow: 0 9px 20px rgba(31, 41, 55, 0.06);
    overflow: hidden;
  }

  .n3-vocabulary-table td {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 0 !important;
  }

  .n3-vocabulary-table td::before {
    content: attr(data-label);
    color: #98a2b3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .n3-vocabulary-table td:nth-child(3),
  .n3-vocabulary-table td:nth-child(4),
  .n3-vocabulary-table td:nth-child(5) {
    grid-column: 1 / -1;
  }

  .n3-vocabulary-actions {
    justify-content: flex-start;
  }

  .n3-vocabulary-pagination {
    flex-wrap: wrap;
    padding: 14px;
  }

  .n3-page-numbers {
    max-width: 100%;
    overflow-x: auto;
  }

  .n3-vocabulary-pagination .is-nav {
    order: 2;
  }
}

@media (max-width: 480px) {
  .n3-vocabulary-stats {
    grid-template-columns: 1fr;
  }

  .n3-vocabulary-heading > div > span {
    font-size: 12px;
  }

  .n3-vocabulary-table tr {
    grid-template-columns: 1fr;
  }

  .n3-vocabulary-table td {
    grid-column: 1 !important;
  }

  .n3-vocabulary-pagination button {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
  }
}
/* =========================================================
   FINAL FIX — DARK HEADER MATCHES OTHER N1 PAGES
   Light mode is intentionally unchanged.
   ========================================================= */

/*
 * N1 badge in the centered header logo.
 */
body.n3-vocabulary-page
  .n3-header-brand
  .n3-brand-level {
  border: 0 !important;

  background:
    linear-gradient(
      145deg,
      #7dd3fc,
      #38bdf8
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 8px 18px
      rgba(2, 132, 199, 0.27),
    inset 1px 1px 0
      rgba(255, 255, 255, 0.30) !important;
}

/*
 * Header dark mode copied to match the visual language
 * of n3-exams and the shared 3D back button.
 */
html.dark
  body.n3-vocabulary-page
  .n3-page-header,
body.dark.n3-vocabulary-page
  .n3-page-header {
  border-bottom:
    1px solid #5c6470 !important;

  background:
    rgba(59, 64, 72, 0.98) !important;

  color: #f4f6f8 !important;

  box-shadow:
    0 14px 34px
      rgba(19, 23, 29, 0.20) !important;

  backdrop-filter:
    blur(14px);
}

/*
 * 3D back button in dark mode.
 */
html.dark
  body.n3-vocabulary-page
  .n3-header-back,
body.dark.n3-vocabulary-page
  .n3-header-back {
  border:
    1px solid #626b77 !important;

  background:
    linear-gradient(
      145deg,
      #555c66,
      #40464e
    ) !important;

  color: #eef4ff !important;

  box-shadow:
    0 9px 18px
      rgba(0, 0, 0, 0.20),
    inset 1px 1px 0
      rgba(255, 255, 255, 0.08),
    inset -1px -1px 0
      rgba(0, 0, 0, 0.10) !important;
}

html.dark
  body.n3-vocabulary-page
  .n3-header-back:hover,
body.dark.n3-vocabulary-page
  .n3-header-back:hover {
  border-color:
    #778291 !important;

  background:
    linear-gradient(
      145deg,
      #626a75,
      #484f58
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 13px 25px
      rgba(0, 0, 0, 0.24),
    inset 1px 1px 0
      rgba(255, 255, 255, 0.10) !important;
}

/*
 * Theme and notification buttons:
 * remove the white outline and match other dark headers.
 */
html.dark
  body.n3-vocabulary-page
  .n3-header-icon-button,
body.dark.n3-vocabulary-page
  .n3-header-icon-button {
  border:
    1px solid #5c6470 !important;

  background:
    linear-gradient(
      145deg,
      #4f5660,
      #424850
    ) !important;

  color: #f4f6f8 !important;

  box-shadow:
    0 8px 17px
      rgba(0, 0, 0, 0.17),
    inset 1px 1px 0
      rgba(255, 255, 255, 0.07) !important;
}

html.dark
  body.n3-vocabulary-page
  .n3-header-icon-button:hover,
body.dark.n3-vocabulary-page
  .n3-header-icon-button:hover {
  border-color:
    #778291 !important;

  background:
    linear-gradient(
      145deg,
      #5b636e,
      #484f58
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 12px 23px
      rgba(0, 0, 0, 0.23),
    inset 1px 1px 0
      rgba(255, 255, 255, 0.09) !important;
}

html.dark
  body.n3-vocabulary-page
  .n3-header-brand,
body.dark.n3-vocabulary-page
  .n3-header-brand {
  color: #ffffff !important;
}

/* =========================================================
   FINAL FIX — BLUE ACTION ICONS
   ========================================================= */

body.n3-vocabulary-page
  .n3-word-action {
  color: #38bdf8;
}

body.n3-vocabulary-page
  .n3-word-action:hover {
  background: #e0f2fe;
  color: #0284c7;
}

body.n3-vocabulary-page
  .n3-word-action.is-active {
  border-color: #38bdf8;

  background:
    linear-gradient(
      145deg,
      #7dd3fc,
      #38bdf8
    );

  color: #ffffff;

  box-shadow:
    0 7px 15px
      rgba(2, 132, 199, 0.24);
}

html.dark
  body.n3-vocabulary-page
  .n3-word-action,
body.dark.n3-vocabulary-page
  .n3-word-action {
  color: #7dd3fc;
}

html.dark
  body.n3-vocabulary-page
  .n3-word-action:hover,
body.dark.n3-vocabulary-page
  .n3-word-action:hover {
  background:
    rgba(56, 189, 248, 0.16);

  color: #7dd3fc;
}

html.dark
  body.n3-vocabulary-page
  .n3-word-action.is-active,
body.dark.n3-vocabulary-page
  .n3-word-action.is-active {
  background:
    linear-gradient(
      145deg,
      #7dd3fc,
      #38bdf8
    );

  color: #ffffff;
}

/* =========================================================
   FINAL FIX — CURRENT PAGE USES N3 BLUE
   ========================================================= */

body.n3-vocabulary-page
  .n3-vocabulary-pagination
  .n3-page-numbers
  button.is-current {
  border-color:
    #38bdf8 !important;

  background:
    linear-gradient(
      145deg,
      #7dd3fc,
      #38bdf8
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 8px 17px
      rgba(2, 132, 199, 0.28) !important;
}

body.n3-vocabulary-page
  .n3-vocabulary-pagination
  button:hover:not(:disabled):not(.is-current) {
  border-color: #7dd3fc;
  color: #0284c7;
}

html.dark
  body.n3-vocabulary-page
  .n3-vocabulary-pagination
  button:hover:not(:disabled):not(.is-current),
body.dark.n3-vocabulary-page
  .n3-vocabulary-pagination
  button:hover:not(:disabled):not(.is-current) {
  border-color: #7dd3fc;
  color: #7dd3fc;
}


/* STATUS FILTER — CUSTOM 3D DROPDOWN */
.n3-vocabulary-filter { position: relative; min-width: 220px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 10px 0 14px; overflow: visible; }
.n3-vocabulary-filter-label { color: #6d7584; font-size: 12px; font-weight: 700; white-space: nowrap; }
.n3-vocabulary-status-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; pointer-events: none !important; }
.n3-vocabulary-status-trigger { min-width: 0; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 0 0; border: 0; background: transparent; color: #172033; font-family: Poppins, "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 750; line-height: 1; text-align: left; cursor: pointer; }
.n3-vocabulary-status-chevron { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: #697386; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease, stroke .18s ease; }
.n3-vocabulary-filter.is-open .n3-vocabulary-status-chevron { transform: rotate(180deg); stroke: #38bdf8; }
.n3-vocabulary-status-menu { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 520; display: grid; gap: 7px; padding: 9px; border: 1px solid #dce3ec; border-radius: 17px; background: linear-gradient(145deg,#fff,#f1f5f9); box-shadow: 0 24px 48px rgba(47,61,89,.19),0 9px 20px rgba(47,61,89,.10),inset 1px 1px 0 rgba(255,255,255,.98),inset -1px -1px 0 rgba(91,108,137,.08); opacity: 0; transform: perspective(850px) rotateX(-8deg) translateY(-8px) scale(.98); transform-origin: top center; transition: opacity .14s ease, transform .18s ease; }
.n3-vocabulary-status-menu[hidden] { display: none !important; }
.n3-vocabulary-status-menu.is-visible { opacity: 1; transform: perspective(850px) rotateX(0) translateY(0) scale(1); }
.n3-vocabulary-status-option { width: 100%; min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; border: 1px solid #e6ebf2; border-radius: 12px; background: #fff; color: #172033; box-shadow: inset 1px 1px 0 rgba(255,255,255,.98),0 5px 12px rgba(48,62,91,.06); font-family: Poppins,"Noto Sans JP",sans-serif; font-size: 13px; font-weight: 730; line-height: 1; text-align: left; cursor: pointer; transition: transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease; }
.n3-vocabulary-status-option:hover,.n3-vocabulary-status-option:focus-visible { border-color: #7dd3fc; background: #f0f9ff; color: #0369a1; outline: none; transform: translateY(-1px); box-shadow: 0 8px 17px rgba(2,132,199,.12),inset 1px 1px 0 rgba(255,255,255,.98); }
.n3-vocabulary-status-option.is-selected { border-color: #7dd3fc; background: linear-gradient(145deg,#f0f9ff,#e0f2fe); color: #0369a1; box-shadow: inset 0 0 0 2px rgba(56,189,248,.12),0 8px 18px rgba(2,132,199,.10); }
.n3-vocabulary-status-check { color: #38bdf8; font-size: 16px; font-weight: 900; opacity: 0; transform: scale(.7); transition: opacity .15s ease,transform .15s ease; }
.n3-vocabulary-status-option.is-selected .n3-vocabulary-status-check { opacity: 1; transform: scale(1); }
html.dark body.n3-vocabulary-page .n3-vocabulary-filter,body.dark.n3-vocabulary-page .n3-vocabulary-filter { border-color: #5b6470; background: linear-gradient(145deg,#4b525c,#3e444c); }
html.dark body.n3-vocabulary-page .n3-vocabulary-filter-label,body.dark.n3-vocabulary-page .n3-vocabulary-filter-label { color: #c9d0da; }
html.dark body.n3-vocabulary-page .n3-vocabulary-status-trigger,body.dark.n3-vocabulary-page .n3-vocabulary-status-trigger { color: #fff; }
html.dark body.n3-vocabulary-page .n3-vocabulary-status-chevron,body.dark.n3-vocabulary-page .n3-vocabulary-status-chevron { stroke: #d8dee7; }
html.dark body.n3-vocabulary-page .n3-vocabulary-status-menu,body.dark.n3-vocabulary-page .n3-vocabulary-status-menu { border-color: #555e69; background: linear-gradient(145deg,#292e35,#171a1f); box-shadow: 0 25px 52px rgba(0,0,0,.36),inset 1px 1px 0 rgba(255,255,255,.05); }
html.dark body.n3-vocabulary-page .n3-vocabulary-status-option,body.dark.n3-vocabulary-page .n3-vocabulary-status-option { border-color: #3e454f; background: #171a1f; color: #fff; box-shadow: inset 1px 1px 0 rgba(255,255,255,.04),0 6px 14px rgba(0,0,0,.20); }
html.dark body.n3-vocabulary-page .n3-vocabulary-status-option:hover,html.dark body.n3-vocabulary-page .n3-vocabulary-status-option:focus-visible,body.dark.n3-vocabulary-page .n3-vocabulary-status-option:hover,body.dark.n3-vocabulary-page .n3-vocabulary-status-option:focus-visible { border-color: #7dd3fc; background: #273b4d; color: #bae6fd; }
html.dark body.n3-vocabulary-page .n3-vocabulary-status-option.is-selected,body.dark.n3-vocabulary-page .n3-vocabulary-status-option.is-selected { border-color: #38bdf8; background: linear-gradient(145deg,#164e63,#0c4a6e); color: #e0f2fe; }
@media (max-width:760px) { .n3-vocabulary-filter { width: 100%; min-width: 0; } }
/* =========================================================
   FINAL FIX — STATUS FIELD FULL CLICK AREA
   ========================================================= */

body.n3-vocabulary-page
  [data-vocabulary-status-select] {
  cursor: pointer;
}

body.n3-vocabulary-page
  [data-vocabulary-status-select]
  .n3-vocabulary-filter-label,
body.n3-vocabulary-page
  [data-vocabulary-status-select]
  .n3-vocabulary-status-trigger {
  pointer-events: none;
}

/*
 * Option vẫn nhận click bình thường.
 */
body.n3-vocabulary-page
  [data-vocabulary-status-select]
  .n3-vocabulary-status-menu,
body.n3-vocabulary-page
  [data-vocabulary-status-select]
  .n3-vocabulary-status-option {
  pointer-events: auto;
}

/* =========================================================
   FINAL FIX — DARK DROPDOWN CONTRAST
   Dropdown sáng hơn nền page để không bị hòa lẫn.
   ========================================================= */

html.dark
  body.n3-vocabulary-page
  [data-vocabulary-status-select],
body.dark.n3-vocabulary-page
  [data-vocabulary-status-select] {
  border-color: #747e8b;

  background:
    linear-gradient(
      145deg,
      #59616c,
      #484f58
    );

  box-shadow:
    inset 1px 1px 0
      rgba(255, 255, 255, 0.09),
    0 8px 18px
      rgba(0, 0, 0, 0.18);
}

html.dark
  body.n3-vocabulary-page
  .n3-vocabulary-status-menu,
body.dark.n3-vocabulary-page
  .n3-vocabulary-status-menu {
  border-color: #7a8491;

  background:
    linear-gradient(
      145deg,
      #626b77,
      #505862
    );

  box-shadow:
    0 26px 54px
      rgba(0, 0, 0, 0.38),
    inset 1px 1px 0
      rgba(255, 255, 255, 0.10),
    inset -1px -1px 0
      rgba(0, 0, 0, 0.16);
}

html.dark
  body.n3-vocabulary-page
  .n3-vocabulary-status-option,
body.dark.n3-vocabulary-page
  .n3-vocabulary-status-option {
  border-color: #7a8490;

  background:
    linear-gradient(
      145deg,
      #697380,
      #59626e
    );

  color: #ffffff;

  box-shadow:
    0 7px 15px
      rgba(0, 0, 0, 0.18),
    inset 1px 1px 0
      rgba(255, 255, 255, 0.11),
    inset -1px -1px 0
      rgba(0, 0, 0, 0.12);
}

html.dark
  body.n3-vocabulary-page
  .n3-vocabulary-status-option:hover,
html.dark
  body.n3-vocabulary-page
  .n3-vocabulary-status-option:focus-visible,
body.dark.n3-vocabulary-page
  .n3-vocabulary-status-option:hover,
body.dark.n3-vocabulary-page
  .n3-vocabulary-status-option:focus-visible {
  border-color: #7dd3fc;

  background:
    linear-gradient(
      145deg,
      #2f5f79,
      #274b63
    );

  color: #e0f2fe;
}

html.dark
  body.n3-vocabulary-page
  .n3-vocabulary-status-option.is-selected,
body.dark.n3-vocabulary-page
  .n3-vocabulary-status-option.is-selected {
  border-color: #7dd3fc;

  background:
    linear-gradient(
      145deg,
      #176b8a,
      #0e5675
    );

  color: #ffffff;

  box-shadow:
    inset 0 0 0 2px
      rgba(56, 189, 248, 0.18),
    0 9px 20px
      rgba(0, 0, 0, 0.22);
}


/* =========================================================
   FIX 2026-07 — N3 PRIMARY FILTER + LIGHT 3D BACK BUTTON
   ========================================================= */

body.n3-vocabulary-page .n3-header-back {
  width: auto !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 0 15px !important;
  border: 1px solid #d8e1ee !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #ffffff, #e8eef7) !important;
  color: #31507f !important;
  box-shadow:
    0 8px 17px rgba(49, 65, 95, 0.11),
    inset 1px 1px 0 rgba(255, 255, 255, 0.92),
    inset -1px -1px 0 rgba(87, 104, 135, 0.08) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.n3-vocabulary-page .n3-header-back:hover {
  border-color: #b8c8dc !important;
  transform: translateX(-3px) translateY(-1px) !important;
  box-shadow:
    0 13px 25px rgba(49, 65, 95, 0.16),
    inset 1px 1px 0 rgba(255, 255, 255, 0.94) !important;
}

body.n3-vocabulary-page
  [data-vocabulary-status-selected] {
  color: #0284c7;
}

body.n3-vocabulary-page
  .n3-vocabulary-status-option.is-selected {
  border-color: #38bdf8 !important;
  background: linear-gradient(145deg, #f0f9ff, #e0f2fe) !important;
  color: #0369a1 !important;
}

html.dark body.n3-vocabulary-page
  [data-vocabulary-status-selected],
body.dark.n3-vocabulary-page
  [data-vocabulary-status-selected] {
  color: #7dd3fc !important;
}

html.dark body.n3-vocabulary-page
  .n3-vocabulary-status-option:hover,
html.dark body.n3-vocabulary-page
  .n3-vocabulary-status-option:focus-visible,
body.dark.n3-vocabulary-page
  .n3-vocabulary-status-option:hover,
body.dark.n3-vocabulary-page
  .n3-vocabulary-status-option:focus-visible {
  border-color: #7dd3fc !important;
  background: linear-gradient(145deg, #355f78, #294c63) !important;
  color: #e0f2fe !important;
}

html.dark body.n3-vocabulary-page
  .n3-vocabulary-status-option.is-selected,
body.dark.n3-vocabulary-page
  .n3-vocabulary-status-option.is-selected {
  border-color: #38bdf8 !important;
  background: linear-gradient(145deg, #176b8a, #0e5675) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0 0 2px rgba(56, 189, 248, 0.18),
    0 9px 20px rgba(0, 0, 0, 0.22) !important;
}

/* FIX 2026-07-06 — N3 VOCABULARY LABEL COLOR + NOTIFICATION DOT */
/* Nhãn đang chọn giữ màu chữ trung tính; màu chủ đạo chỉ dùng cho viền/nền/check. */
body.n3-vocabulary-page [data-vocabulary-status-selected] {
  color: #172033 !important;
}

body.n3-vocabulary-page .n3-vocabulary-status-option.is-selected {
  color: #172033 !important;
}

html.dark body.n3-vocabulary-page [data-vocabulary-status-selected],
body.dark.n3-vocabulary-page [data-vocabulary-status-selected],
html.dark body.n3-vocabulary-page .n3-vocabulary-status-option.is-selected,
body.dark.n3-vocabulary-page .n3-vocabulary-status-option.is-selected {
  color: #ffffff !important;
}

body.n3-vocabulary-page .n3-notification-dot {
  display: none !important;
}

body.n3-vocabulary-page .n3-notification-button.has-unread .n3-notification-dot {
  display: block !important;
}