.save-item-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px;
    width: 36px; height: 36px; border: 1px solid var(--border-color); border-radius: 10px;
    color: var(--text-secondary); background: var(--bg-secondary); cursor: pointer;
    font: 600 22px/1 var(--font-reading);
}
.save-item-btn.is-saved { color: var(--accent-primary); border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-card)); }
.save-item-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.save-item-btn.is-saved svg { fill: currentColor; }
.save-item-btn:focus-visible, .saved-item-remove:focus-visible, .progress-saved-btn:focus-visible {
    outline: 2px solid var(--accent-primary); outline-offset: 3px;
}
.uses-list .phrase-summary-item:has(.save-item-btn) { box-shadow: inset 0 0 0 1px rgba(var(--accent-phrases-rgb), .18); }
.uses-list .rare-row > .save-item-btn { position: absolute; top: 50%; left: 4px; transform: translateY(-50%); border: 0; border-radius: 50%; background: rgba(var(--accent-phrases-rgb), .06); box-shadow: inset 0 0 0 1px rgba(var(--accent-phrases-rgb), .12); }
.uses-list .rare-row > .save-item-btn.is-saved { color: var(--accent-phrases); background: rgba(var(--accent-phrases-rgb), .12); }
.uses-list .rare-row:has(> .save-item-btn) { min-height: 40px; }
.meaning-row-mwe > .save-item-btn { margin-right: 8px; font-size: 20px; }
.saved-phrase-hit { text-decoration: underline; text-decoration-color: var(--accent-primary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
#savedItemsSection[hidden], #savedItemsToast[hidden], #progressSavedBtn[hidden] { display: none !important; }
#settingsModal #savedItemsSection { margin-top: 16px; border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, var(--border-color)); border-radius: 14px; padding: 0 16px 16px; background: color-mix(in srgb, var(--accent-primary) 4%, var(--bg-card)); scroll-margin-top: 20px; }
#savedWordsTitle:focus { outline: none; }
.saved-device-note { margin: 0 0 14px; color: var(--text-muted); font: 12px/1.5 var(--font-reading); }
.saved-item { padding: 16px 0; border-top: 1px solid var(--border-color); }
.saved-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.saved-item-heading > div { min-width: 0; }
.saved-item-kind { color: var(--text-muted); font: 12px/1.4 var(--font-reading); text-transform: capitalize; }
.saved-item h4 { margin: 5px 0 0; font: 600 18px/1.4 var(--font-reading); color: var(--text-primary); overflow-wrap: anywhere; }
.saved-item p { margin: 8px 0 0; font: 14px/1.6 var(--font-reading); overflow-wrap: anywhere; }
.saved-item-context, .saved-item-translation { color: var(--text-muted); }
.saved-item-example { color: var(--text-primary); }
.saved-item-meaning { color: var(--text-secondary); }
.saved-item-remove { padding: 8px; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font: 12px/1.4 var(--font-reading); cursor: pointer; }
.progress-saved-btn { width: 100%; margin-top: 18px; padding: 12px 16px; min-height: 44px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); font: 600 14px/1.5 var(--font-reading); text-align: left; cursor: pointer; }
#savedItemsToast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px 18px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card); color: var(--text-primary); box-shadow: 0 8px 32px #0004; z-index: 100000; font: 14px/1.5 var(--font-reading); }
#savedItemsToast button { flex-shrink: 0; border: 0; padding: 6px; color: var(--accent-primary); background: transparent; font: 600 14px var(--font-reading); cursor: pointer; }
#savedItemsToast button[hidden] { display: none; }
.saved-confirm-dialog { position: fixed; inset: 0; margin: auto; max-height: calc(100dvh / var(--ui-zoom, 1) - 48px); overflow: auto; width: min(320px, calc(100vw - 48px)); box-sizing: border-box; padding: 24px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-card); color: var(--text-primary); box-shadow: 0 12px 48px #0005; }
.saved-confirm-dialog::backdrop { background: #0006; }
.saved-confirm-dialog h2 { margin: 0; font: 600 20px/1.4 var(--font-reading); }
.saved-confirm-dialog p { margin: 12px 0 20px; overflow-wrap: anywhere; color: var(--text-secondary); font: 15px/1.5 var(--font-reading); }
.saved-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.saved-confirm-actions button { min-height: 44px; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: transparent; color: var(--text-primary); font: 600 13px/1.4 var(--font-reading); cursor: pointer; }
.saved-confirm-actions [data-save-confirm] { background: var(--accent-primary); color: var(--accent-primary-text); border-color: transparent; }
.saved-confirm-actions button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
@media (max-width: 480px) {
    #settingsModal #savedItemsSection { padding-inline: 12px; }
    .save-item-btn { min-width: 40px; min-height: 40px; }
}
