/* ═══════════════════════════════════════════════════════════════
   Toast Notifications — всплывающие уведомления
   Извлечено из checklist_operational.css строки 4928–5086
   ═══════════════════════════════════════════════════════════════ */

        /* ===== TOAST NOTIFICATIONS ===== */
        .toast-container {
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            z-index: 10000;
            pointer-events: none;
            max-width: calc(100vw - 40px);
        }
        .toast {
            pointer-events: auto;
            display: flex;
            align-items: flex-start;
            gap: var(--space-2);
            min-width: 260px;
            max-width: 420px;
            padding: var(--space-3);
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-left: 4px solid var(--color-text-secondary);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
            font-size: var(--text-sm);
            color: var(--color-text);
            opacity: 0;
            transform: translateX(30px);
            transition: opacity 0.22s ease, transform 0.22s ease;
        }
        .toast--visible {
            opacity: 1;
            transform: translateX(0);
        }
        .toast--leaving {
            opacity: 0;
            transform: translateX(30px);
        }
        .toast-ico {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-sm);
            font-weight: 700;
            color: var(--color-surface);
            background: var(--color-text-secondary);
            margin-top: 1px;
        }
        .toast-msg {
            flex: 1;
            line-height: 1.4;
            word-break: break-word;
        }
        .toast-close {
            flex-shrink: 0;
            background: transparent;
            border: none;
            color: var(--color-gray-400);
            font-size: var(--text-lg);
            line-height: 1;
            cursor: pointer;
            padding: 0 2px;
            border-radius: var(--radius-xs);
            transition: color 0.12s, background 0.12s;
        }
        .toast-close:hover { color: var(--color-text-strong); background: var(--color-gray-100); }

        .toast--success { border-left-color: var(--color-success-500); }
        .toast--success .toast-ico { background: var(--color-success-500); }

        .toast--error { border-left-color: var(--color-danger-500); }
        .toast--error .toast-ico { background: var(--color-danger-500); }

        .toast--warning { border-left-color: var(--color-warning); }
        .toast--warning .toast-ico { background: var(--color-warning); }

        .toast--info { border-left-color: var(--color-primary-400); }
        .toast--info .toast-ico { background: var(--color-primary-400); }

        @media (max-width: 480px) {
            .toast-container {
                right: 10px;
                left: 10px;
                bottom: 10px;
            }
            .toast { min-width: 0; max-width: 100%; }
        }
        .announce-avatar {
            width: 44px; height: 44px; border-radius: 50%;
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-500));
            color: var(--color-surface); display: flex; align-items: center;
            justify-content: center; font-weight: 700;
            font-size: var(--text-base); flex-shrink: 0;
        }

        .announce-card {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-3xl);
            padding: var(--space-5);
            box-shadow: 0 4px 18px rgba(15,23,42,0.05);
            transition: box-shadow 0.2s;
        }
        .announce-card:hover { box-shadow: 0 6px 24px rgba(15,23,42,0.1); }

        .announce-card-head {
            display: flex; align-items: center;
            justify-content: space-between; margin-bottom: 14px;
        }
        .announce-card-author {
            display: flex; align-items: center; gap: var(--space-3);
        }
        .announce-card-name { font-weight: 700; font-size: var(--text-base); color: var(--color-text); }
        .announce-card-time { font-size: var(--text-xs); color: var(--color-gray-400); margin-top: 2px; }

        .announce-type-badge {
            display: inline-flex; align-items: center; gap: var(--space-1);
            padding: 4px 12px; border-radius: var(--radius-pill);
            font-size: var(--text-xs); font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.4px;
        }
        .type-news { background: var(--color-primary-50); color: var(--color-primary-strong); }
        .type-alert { background: var(--color-danger-50); color: var(--color-danger-700); }
        .type-reminder { background: var(--color-warning-50); color: #b45309; }

        .announce-card-title {
            font-weight: 700; font-size: var(--text-md);
            color: var(--color-text); margin-bottom: 8px;
        }
        .announce-card-text {
            font-size: var(--text-base); line-height: 1.65;
            color: var(--color-text-strong); white-space: pre-wrap;
        }
        .announce-card-footer {
            display: flex; align-items: center;
            justify-content: space-between;
            margin-top: 14px; padding-top: 12px;
            border-top: 1px solid var(--color-bg-subtle);
        }
        .announce-card-del {
            border: none; background: none; color: var(--color-border-strong);
            font-size: var(--text-lg); cursor: pointer; padding: 0 4px;
            transition: color 0.2s; line-height: 1;
        }
        .announce-card-del:hover { color: var(--color-danger); }

        .announce-empty {
            text-align: center; padding: 56px 24px;
            color: var(--color-gray-400); font-size: var(--text-base);
            border: 2px dashed var(--color-border);
            border-radius: var(--radius-3xl); background: var(--color-surface);
        }
        .announce-empty span { font-size: 40px; display: block; margin-bottom: 12px; }