/* ════════════════════════════════════════════════════════════════════════
   RECATOOLS — 中文词语解谜器 — style.css
   Tool-specific overrides. Base: /assets/css/tool-page.css
   ════════════════════════════════════════════════════════════════════════ */

/* ── Chinese font stack ─────────────────────────────────────────────── */
/* Applied to tool card for clean CJK rendering */
.tool-card,
.tool-input,
.zh-result,
.zh-chars,
.zh-pinyin {
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB',
                 'WenQuanYi Micro Hei', 'Noto Sans SC', sans-serif;
}

/* ── Input: allow Chinese characters (no uppercase transform) ──────── */
.tool-input {
    letter-spacing: 0.06em;
    font-size: 1.125rem;
}
.tool-input::placeholder {
    letter-spacing: 0;
}

/* ── Mode selector tabs ─────────────────────────────────────────────── */
.mode-tabs {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 1rem;
}
.mode-tab {
    padding: 0.375rem 1rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg);
    color: var(--muted);
    transition: all 0.1s;
}
.mode-tab.active {
    border-color: var(--accent);
    background: #FFF5F2;
    color: var(--accent);
}

/* ── Result entry ────────────────────────────────────────────────────── */
.zh-result {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.zh-chars {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}
.zh-pinyin {
    font-size: 0.8125rem;
    color: var(--muted);
    font-style: italic;
}
.zh-meaning {
    font-size: 0.8125rem;
    color: var(--muted-lt);
}
.word-chip a.zh-entry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    text-decoration: none;
    padding: 0.375rem 0.625rem;
}
.word-chip a.zh-entry:hover .zh-chars { color: var(--accent); }

/* ── Loading spinner ────────────────────────────────────────────────── */
.loading-spinner {
    display: flex; align-items: center; justify-content: center;
    gap: 0.45rem; margin: 0 auto 1rem; width: fit-content;
}
.loading-spinner::before, .loading-spinner::after, .loading-spinner span {
    content: ''; display: block; width: 10px; height: 10px;
    border-radius: 50%; background: var(--accent);
    animation: ws-pulse 1.1s ease-in-out infinite;
}
.loading-spinner::before { animation-delay: 0s; }
.loading-spinner span    { animation-delay: 0.18s; }
.loading-spinner::after  { animation-delay: 0.36s; }
@keyframes ws-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* ── Language switcher ──────────────────────────────────────────────── */
.lang-switcher {
    display: inline-flex; gap: 0.375rem; align-items: center;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.2rem 0.75rem;
    font-size: 0.8125rem; font-weight: 600;
}
.lang-switcher a   { color: var(--muted); text-decoration: none; }
.lang-switcher a:hover { color: var(--accent); }
.lang-switcher .active { color: var(--accent); pointer-events: none; }
.lang-switcher-sep { color: var(--border); font-weight: 400; }

/* ── Chengyu (成语) badge ────────────────────────────────────────────── */
.chengyu-badge {
    display: inline-block;
    font-size: 0.65rem; font-weight: 700;
    color: #b45309; background: #fffbeb;
    border: 1px solid #fde68a; border-radius: 4px;
    padding: 0.1rem 0.35rem; margin-left: 0.25rem;
    vertical-align: middle;
}

/* cache-buster: 2026-05-24T05:06:05Z */