/* Feedback v2 (AB#517, AB#521, AB#519) */
.toast-root { position: fixed; top: 72px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-card, 18px); background: var(--raised); border: 1px solid var(--line); box-shadow: 0 16px 40px rgb(18 26 47 / .14); animation: toastIn 240ms var(--ease, ease) both; transition: opacity 240ms var(--ease, ease), transform 240ms var(--ease, ease); }
.toast.toast-undo, .toast.toast-error { padding: 8px 12px 8px 16px; }
.toast.toast-exit { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.toast-msg { flex: 1; min-width: 0; color: var(--ink); }
.toast-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; }
.toast-ic-ok { background: var(--ok-bg); color: var(--ok); }
.toast-ic-bad { background: var(--bad-bg); color: var(--bad); }
.toast-ic-warn { background: var(--warn-bg); color: var(--warn); }
.toast-ic-neutral { background: var(--inset); color: var(--text2); }
@media (max-width: 767px) { .toast-root { top: 68px; right: 16px; left: 16px; width: auto; } .toast { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.offline-banner { position: fixed; top: 72px; left: 50%; transform: translate(-50%, -8px); z-index: 9990; display: none; align-items: center; gap: 8px; width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 14px; background: var(--warn-bg); color: var(--warn); font-size: 14px; line-height: 20px; font-weight: 600; box-shadow: 0 8px 24px rgb(18 26 47 / .08); opacity: 0; }
.offline-banner.show { display: flex; transform: translate(-50%, 0); opacity: 1; }
.offline-banner[hidden] { display: none; }
@media (max-width: 767px) { .offline-banner { top: 68px; } }

@keyframes sk-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--inset) 0, var(--line) 50%, var(--inset) 100%); background-size: 400px 100%; animation: sk-shimmer 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.reduce-motion .sk, .reduce-motion .toast { animation: none; }

.state-card { align-items: center; text-align: center; gap: 12px; padding: 32px 24px; }
.state-art { width: 160px; height: 120px; border-radius: 22px; }
.state-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--bad-bg); color: var(--bad); }

.dlg-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgb(18 26 47 / .55); }
.dlg-card { width: min(440px, 100%); gap: 16px; padding: 24px; border-radius: 22px; box-shadow: 0 24px 70px rgb(18 26 47 / .3); max-height: calc(100vh - 32px); overflow: auto; }
.dlg-title { font-size: 19px; font-weight: 700; }
.dlg-actions { gap: 8px; justify-content: flex-end; }