.toast-region {
    --toast-surface: #fff; --toast-text: #17263a; --toast-muted: #526176; --toast-border: #dce2e9;
    --toast-error: #b42338; --toast-error-bg: #fff0f1; --toast-success: #166534; --toast-success-bg: #edf9f0;
    --toast-warning: #854d0e; --toast-warning-bg: #fff8df; --toast-info: #215ec8; --toast-info-bg: #eef4ff;
    position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 60; display: flex; flex-direction: column; gap: 12px; width: min(420px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px); overflow-y: auto; padding: 4px; pointer-events: none;
    font-family: inherit; font-size: 14px; line-height: 1.5;
}
.dark .toast-region {
    --toast-surface: #192333; --toast-text: #f3f5f8; --toast-muted: #c4cedc; --toast-border: #425167;
    --toast-error: #ffb4bb; --toast-error-bg: #4b2330; --toast-success: #9de5b2; --toast-success-bg: #173b2b;
    --toast-warning: #f9d77c; --toast-warning-bg: #493820; --toast-info: #a9c8ff; --toast-info-bg: #233b5d;
}
.service-toast { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--toast-border);
    border-radius: 12px; background: var(--toast-surface); color: var(--toast-text); box-shadow: 0 8px 28px #17263a1a;
    pointer-events: auto; animation: toast-enter .18s ease-out; flex-shrink: 0; }
.toast-icon { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; font-weight: 700;
    background: var(--toast-info-bg); color: var(--toast-info); }
[data-kind="error"] .toast-icon { background: var(--toast-error-bg); color: var(--toast-error); }
[data-kind="warning"] .toast-icon { background: var(--toast-warning-bg); color: var(--toast-warning); }
[data-kind="success"] .toast-icon { background: var(--toast-success-bg); color: var(--toast-success); }
.toast-copy { flex: 1; min-width: 0; }
.toast-copy strong { font-weight: 600; }
.toast-copy p { margin: 4px 0 0; color: var(--toast-muted); overflow-wrap: anywhere; }
.service-toast .toast-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: -8px -8px 0 0;
    border: 0; border-radius: 8px; padding: 0; background: transparent; color: var(--toast-muted); font: inherit; font-size: 24px; cursor: pointer; }
.service-toast .toast-close[hidden] { display: none; }
.toast-close:hover { background: var(--toast-info-bg); }
.toast-close:focus-visible { outline: 3px solid var(--toast-info); outline-offset: 2px; }
@keyframes toast-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .service-toast { animation: none; } }
@media (max-width: 480px) { .toast-region { font-size: 16px; } }