.fn-notice {
    --fn-surface:  var(--color-bg-card, var(--bg-card, #ffffff));
    --fn-soft:     var(--color-bg-page-soft, var(--bg-card-muted, #f4f6f9));
    --fn-border:   var(--color-border, var(--bs-border-color, #e6e9ef));
    --fn-text:     var(--color-text-secondary, var(--text-2, #5b6675));
    --fn-title:    var(--color-text-title, var(--text-1, #1f2937));
    --fn-danger:   var(--color-danger, #e0464f);
    --fn-success:  var(--color-success, #1f9d6b);
    --fn-accent:   var(--color-accent, #638cff);
}

.fn-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 0;
    padding: 11px 14px;
    border: 1px solid var(--fn-border);
    border-radius: var(--radius-card);
    background: var(--fn-soft);
    color: var(--fn-text);
    font-size: 13px;
    line-height: 1.6;
}
.fn-notice-icon { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; }
.fn-notice-text { flex: 1; min-width: 0; word-break: break-word; }


.fn-notice + .fn-notice { margin-top: 8px; }


.fn-notice a {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}


.fn-notice--error {
    border-color: color-mix(in srgb, var(--fn-danger) 45%, transparent);
    background: color-mix(in srgb, var(--fn-danger) 10%, transparent);
    
    color: color-mix(in srgb, var(--fn-danger) 45%, var(--fn-title));
}



.fn-notice--success {
    position: relative;
    padding: 13px 16px 13px 20px;
    font-size: 14px;
    font-weight: 500;
    border-color: color-mix(in srgb, var(--fn-success) 55%, transparent);
    background: color-mix(in srgb, var(--fn-success) 16%, transparent);
    
    color: color-mix(in srgb, var(--fn-success) 45%, var(--fn-title));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--fn-success) 18%, transparent);
}
.fn-notice--success::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--fn-success);
}
.fn-notice--success .fn-notice-icon { width: 19px; height: 19px; }


.fn-notice--info {
    border-color: color-mix(in srgb, var(--fn-accent) 40%, transparent);
    background: color-mix(in srgb, var(--fn-accent) 10%, transparent);
    color: color-mix(in srgb, var(--fn-accent) 35%, var(--fn-title));
}

@keyframes fnNoticeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.fn-notice { animation: fnNoticeIn .24s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .fn-notice { animation: none; }
}


.fn-toast-wrap {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 2147483000;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: min(92vw, 460px);
    pointer-events: none;
}
.fn-toast-wrap .fn-notice {
    margin: 0;
    width: auto;
    max-width: 100%;
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--fn-surface);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--fn-title) 22%, transparent);
    pointer-events: auto;
    cursor: pointer;
    animation: fnToastIn .26s cubic-bezier(.22, .8, .3, 1) both;
}

.fn-toast-wrap .fn-notice--error {
    background: color-mix(in srgb, var(--fn-danger) 14%, var(--fn-surface));
}
.fn-toast-wrap .fn-notice--success {
    padding: 11px 16px;
    font-size: 13.5px;
    background: color-mix(in srgb, var(--fn-success) 18%, var(--fn-surface));
    box-shadow: 0 8px 26px color-mix(in srgb, var(--fn-success) 26%, transparent);
}
.fn-toast-wrap .fn-notice--success::before { display: none; }
.fn-toast-wrap .fn-notice--info {
    background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-surface));
}
.fn-toast--out { animation: fnToastOut .2s ease-in both; }

@keyframes fnToastIn {
    from { opacity: 0; transform: translateY(-10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes fnToastOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-8px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
    .fn-toast-wrap .fn-notice { animation: none; }
    .fn-toast--out { animation: none; opacity: 0; }
}