/* Vui Học Tiếng Trung v2.5.9 - Dictionary Pro + fast WASM handwriting */
.dictionary-pro { display: grid; gap: 14px; }
.dictionary-mode-tabs { display: flex; gap: 8px; padding: 5px; width: fit-content; max-width: 100%; border: 1px solid #dce5f1; background: #f5f8fc; border-radius: 14px; }
.dictionary-mode-tabs button { border: 0; background: transparent; color: #607089; padding: 10px 16px; border-radius: 10px; font-weight: 800; cursor: pointer; min-height: 44px; }
.dictionary-mode-tabs button.active { color: #0d4f98; background: #fff; box-shadow: 0 4px 14px rgba(25, 61, 102, .10); }
.dictionary-search-pro { align-items: stretch; }
.dictionary-search-pro input { min-width: min(420px, 50vw); }
.dictionary-live-hint { margin-top: 7px; color: #77869d; font-size: 12px; }
.dictionary-search-status { min-height: 20px; color: #63738a; font-size: 13px; font-weight: 700; }

.handwriting-layout { display: grid; grid-template-columns: minmax(260px, 390px) minmax(220px, 1fr); gap: 12px 18px; align-items: start; }
.handwriting-board-wrap { grid-row: span 4; position: relative; width: min(100%, 390px); aspect-ratio: 1; border: 2px solid #d6e1ee; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #fff, #fbfdff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 12px 30px rgba(17, 49, 84, .08); }
.handwriting-board { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; user-select: none; }
.handwriting-board.is-drawing { cursor: grabbing; }
.handwriting-hint { position: absolute; inset: auto 12px 10px; text-align: center; color: #91a0b3; font-size: 12px; pointer-events: none; }
.handwriting-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.handwriting-controls button, .handwriting-query-strip button { border: 1px solid #d8e2ef; background: #fff; color: #31445f; border-radius: 11px; padding: 9px 12px; min-height: 42px; font-weight: 800; cursor: pointer; }
.handwriting-controls button.primary { background: #125aa7; color: #fff; border-color: #125aa7; }
.handwriting-status { min-height: 22px; color: #52647d; font-weight: 700; }
.handwriting-candidates { display: grid; grid-template-columns: repeat(6, minmax(50px, 1fr)); gap: 8px; min-height: 72px; transition: opacity .18s ease; }
.handwriting-candidates.is-loading { opacity: .48; }
.handwriting-candidates button { display: grid; place-items: center; gap: 1px; min-height: 70px; padding: 6px 3px; border: 1px solid #dce5f0; border-radius: 13px; background: #fff; cursor: pointer; box-shadow: 0 5px 16px rgba(19, 51, 89, .06); }
.handwriting-candidates button:hover, .handwriting-candidates button:focus-visible { border-color: #4b8bd2; transform: translateY(-1px); }
.handwriting-candidates strong { font-family: KaiTi, STKaiti, "Kaiti SC", "Noto Serif CJK SC", serif; font-size: 34px; line-height: 1; color: #12243e; }
.handwriting-candidates small { font-size: 9px; color: #8a98aa; }
.handwriting-note { margin: 0; color: #7b889a; font-size: 12px; line-height: 1.55; }
.handwriting-query-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #e0e8f2; background: #f8fbff; border-radius: 13px; }
.handwriting-query-strip > span { color: #75849a; font-size: 12px; }
.handwriting-query-strip strong { min-width: 50px; font-family: KaiTi, STKaiti, "Kaiti SC", serif; font-size: 24px; color: #10213d; }

@media (max-width: 900px) {
  .dictionary-mode-tabs { width: 100%; }
  .dictionary-mode-tabs button { flex: 1; }
  .dictionary-search-pro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .dictionary-search-pro input { grid-column: 1 / -1; min-width: 0; width: 100%; }
  .dictionary-search-pro select { min-width: 0; }
  .handwriting-layout { grid-template-columns: 1fr; }
  .handwriting-board-wrap { grid-row: auto; justify-self: center; width: min(100%, 420px); }
  .handwriting-controls { justify-content: center; }
  .handwriting-candidates { grid-template-columns: repeat(6, minmax(44px, 1fr)); }
  .handwriting-candidates button { min-height: 62px; }
  .handwriting-candidates strong { font-size: 30px; }
}

@media (max-width: 480px) {
  .dictionary-pro { gap: 10px; }
  .dictionary-mode-tabs button { padding-inline: 8px; font-size: 13px; }
  .handwriting-board-wrap { border-radius: 15px; }
  .handwriting-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .handwriting-controls button.primary { grid-column: 1 / -1; }
  .handwriting-candidates { grid-template-columns: repeat(4, minmax(52px, 1fr)); gap: 7px; }
  .handwriting-query-strip button { flex: 1; }
}


/* V2.5.9 handwriting recognizer states */
.handwriting-v259 .handwriting-status { display: flex; align-items: center; gap: 7px; }
.handwriting-v259 .handwriting-candidates.is-loading::before { content: ""; width: 20px; height: 20px; border: 2px solid #cbd8e7; border-top-color: #236ab7; border-radius: 50%; animation: handwriting-spin .7s linear infinite; align-self: center; justify-self: center; }
.handwriting-v259 .handwriting-candidates.is-loading:empty { display: grid; place-items: center; }
.handwriting-v259 .handwriting-candidates button { contain: layout paint; }
@keyframes handwriting-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .handwriting-v259 .handwriting-candidates.is-loading::before { animation-duration: 1.4s; } }