/**
 * Vocab Popup CSS v6
 * Layout: word + phon + pos on one line | definition in large box below
 * No background highlight on words
 */
:root {
    --vp-blue: #3b82f6;
    --vp-green: #22c55e;
    --vp-bg: #ffffff;
    --vp-text: #1f2937;
    --vp-muted: #6b7280;
    --vp-radius: 16px;
    --vp-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    --vp-z: 99999;
}
.vp-popup {
    position: fixed; z-index: var(--vp-z);
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (max-width: 639px) {
    .vp-popup {
        left: 0; right: 0; bottom: 0; top: auto;
        max-height: 70vh;
        background: var(--vp-bg);
        border-radius: var(--vp-radius) var(--vp-radius) 0 0;
        box-shadow: var(--vp-shadow);
        transform: translateY(100%); opacity: 0;
    }
    .vp-popup.vp-popup--visible { transform: translateY(0); opacity: 1; }
    .vp-popup-inner { padding: 12px 16px 28px; }
    .vp-drag-handle { text-align: center; padding: 8px 0 2px; cursor: grab; }
    .vp-drag-handle span { display: inline-block; width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; }
    .vp-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 24px; color: var(--vp-muted); cursor: pointer; line-height: 1; padding: 4px; }
}
@media (min-width: 640px) {
    .vp-popup { background: var(--vp-bg); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; min-width: 260px; max-width: 320px; }
    .vp-popup.vp-popup--visible { opacity: 1; pointer-events: auto; }
    .vp-popup-inner { padding: 16px; }
    .vp-drag-handle { display: none; }
    .vp-close { position: absolute; top: 6px; right: 10px; background: none; border: none; font-size: 20px; color: var(--vp-muted); cursor: pointer; line-height: 1; padding: 4px; }
}
.vp-word-line { overflow: hidden;  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; padding-right: 32px; }
.vp-word { font-size: 1.5em; font-weight: 700; color: var(--vp-text); line-height: 1.2; }
.vp-phon { font-size: 0.85em; color: var(--vp-muted); }
.vp-pos { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;  font-size: 0.78em; color: var(--vp-blue); background: #eff6ff; padding: 1px 7px; border-radius: 4px; line-height: 1.6; }
.vp-def-box { background: #f3f4f6; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; overflow: hidden; }
.vp-def { font-size: 0.95em; color: var(--vp-text); line-height: 1.7; word-break: break-word; overflow-wrap: break-word; }
.vp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 14px; border-radius: 8px; font-size: 0.85em; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: all 0.2s; min-width: 90px; }
.vp-btn:active { transform: scale(0.96); }
.vp-btn-wordbook { background: var(--vp-blue); color: #fff; }
.vp-btn-wordbook:hover { background: #2563eb; }
.vp-btn-wordbook.vp-btn--added { background: var(--vp-green); }
.vp-btn-wordbook.vp-btn--added:hover { background: #16a34a; }
.vp-btn-search { background: #f3f4f6; color: var(--vp-text); }
.vp-btn-search:hover { background: #e5e7eb; }
.vp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: calc(var(--vp-z) - 1); display: none; }
.vocab-highlight { color: #60a5fa; cursor: pointer; transition: color 0.15s; }
.vocab-highlight:hover { color: #3b82f6; text-decoration: underline; }