feat(reader): multi-word and phrasal verb detector in reader (Task 14)

app/static/css/style.css

@@ -3847,10 +3847,71 @@ body {
     padding: 4px;
 }
 
-.popup-close-btn:hover {
+/* Phrasal Verb & Collocation Card in Word Popup */
+.popup-phrasal-card {
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.08));
+    border: 1px solid rgba(99, 102, 241, 0.35);
+    border-radius: var(--radius-sm);
+    padding: 8px 10px;
+    margin-bottom: 10px;
+    animation: fadeIn 0.15s ease-out;
+}
+
+.phrasal-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.phrasal-tag {
+    font-size: 10px;
+    font-weight: 700;
+    color: var(--primary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.phrasal-term-row {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-bottom: 2px;
+}
+
+.phrasal-term {
+    font-size: 14px;
     color: var(--text-main);
 }
 
+.phrasal-raw {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-style: italic;
+}
+
+.phrasal-translation {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--success);
+    margin-bottom: 6px;
+    line-height: 1.35;
+}
+
+.phrasal-card-actions {
+    display: flex;
+    gap: 6px;
+    margin-top: 4px;
+}
+
+.phrasal-action-btn {
+    font-size: 11px;
+    padding: 3px 8px;
+    width: 100%;
+    justify-content: center;
+}
+
 .popup-translation {
     font-size: 15px;
     font-weight: 600;