.vxinf-inline-zone,
.vxinf-fixed{
    --i-info:#0dcaf0;    --i-info-d:#087990;   --i-info-bg:#cff4fc;   --i-info-bd:#9eeaf9;
    --i-success:#198754; --i-success-d:#0f5132; --i-success-bg:#d1e7dd; --i-success-bd:#a3cfbb;
    --i-warning:#ffc107; --i-warning-d:#664d03; --i-warning-bg:#fff3cd; --i-warning-bd:#ffe69c;
    --i-danger:#dc3545;  --i-danger-d:#842029;  --i-danger-bg:#f8d7da;  --i-danger-bd:#f1aeb5;
    --i-primary:#0d6efd; --i-primary-d:#052c65; --i-primary-bg:#cfe2ff; --i-primary-bd:#9ec5fe;
    --i-secondary:#6c757d;--i-secondary-d:#343a40;--i-secondary-bg:#e2e3e5;--i-secondary-bd:#c4c8cb;
    --i-dark:#212529;    --i-dark-d:#000;       --i-dark-bg:#ced4da;   --i-dark-bd:#adb5bd;
    --i-bg:#fff;
}

.vxinf-inline-zone{
        display:flex; flex-direction:column; gap:10px;
        margin:5px;
        text-align:left;
}

.vxinf-fixed{
    position:fixed; z-index:9000;
    display:flex; flex-direction:column; gap:10px;
    max-width:min(420px,92vw);
    pointer-events:none;   
}
.vxinf-fixed .vxi{ pointer-events:auto; }

.vxinf-pos-top{ top:0; left:0; right:0; max-width:none; }
.vxinf-pos-bottom{ bottom:0; left:0; right:0; max-width:none; }
.vxinf-pos-top-left{ top:14px; left:14px; }
.vxinf-pos-top-right{top: 42%;right: 38%;}
.vxinf-pos-bottom-left{ bottom:14px; left:14px; }
.vxinf-pos-bottom-right{ bottom:14px; right:14px; }

.vxinf-pos-top .vxi, .vxinf-pos-bottom .vxi{ border-radius:0; border-left:0; border-right:0; }

.vxi{
    display:flex; align-items:flex-start; gap:9px;
    box-sizing:border-box;
    border:1px solid transparent; border-radius:6px;
    padding:10px 12px; font-size:13px; line-height:1.4;
    position:relative;
}

.vxi.vxinf-closing{ animation:vxinf-out .2s ease forwards; }
@keyframes vxinf-out{ to{ opacity:0; transform:translateY(-6px); height:0; padding:0; margin:0; border-width:0; } }

.vxi-ico{ font-size:15px; line-height:1.3; flex-shrink:0; }
.vxi-content{ flex:1; min-width:0; }
.vxi-title{ font-weight:700; margin-bottom:2px; }
.vxi-body{ font-size:12px; opacity:.92; }
.vxi-actions{ margin-top:7px; }
.vxi-link{ font-weight:600; text-decoration:none; color:inherit; }
.vxi-link:hover{ text-decoration:underline; }
.vxi-link-inline{ display:inline-block; margin-top:6px; }
.vxi-x{
    background:transparent; border:none; cursor:pointer;
    font-size:13px; line-height:1; opacity:.55; padding:0 2px; color:inherit;
}
.vxi-x:hover{ opacity:1; }

.vxi-sz-sm{ padding:7px 9px; font-size:12px; }
.vxi-sz-lg{ padding:14px 16px; font-size:14px; }

.vxi-fill-soft.vxi-v-info{background:var(--i-info-bg);border-color:var(--i-info-bd);color:var(--i-info-d);}
.vxi-fill-soft.vxi-v-success{background:var(--i-success-bg);border-color:var(--i-success-bd);color:var(--i-success-d);}
.vxi-fill-soft.vxi-v-warning{background:var(--i-warning-bg);border-color:var(--i-warning-bd);color:var(--i-warning-d);}
.vxi-fill-soft.vxi-v-danger{background:var(--i-danger-bg);border-color:var(--i-danger-bd);color:var(--i-danger-d);}
.vxi-fill-soft.vxi-v-primary{background:var(--i-primary-bg);border-color:var(--i-primary-bd);color:var(--i-primary-d);}
.vxi-fill-soft.vxi-v-secondary{background:var(--i-secondary-bg);border-color:var(--i-secondary-bd);color:var(--i-secondary-d);}
.vxi-fill-soft.vxi-v-dark{background:var(--i-dark-bg);border-color:var(--i-dark-bd);color:var(--i-dark-d);}

.vxi-fill-solid{ color:#fff !important; }
.vxi-fill-solid.vxi-v-info{background:var(--i-info-d);border-color:var(--i-info-d);}
.vxi-fill-solid.vxi-v-success{background:var(--i-success);border-color:var(--i-success);}
.vxi-fill-solid.vxi-v-warning{background:var(--i-warning);border-color:var(--i-warning);color:#664d03 !important;}
.vxi-fill-solid.vxi-v-danger{background:var(--i-danger);border-color:var(--i-danger);}
.vxi-fill-solid.vxi-v-primary{background:var(--i-primary);border-color:var(--i-primary);}
.vxi-fill-solid.vxi-v-secondary{background:var(--i-secondary);border-color:var(--i-secondary);}
.vxi-fill-solid.vxi-v-dark{background:var(--i-dark);border-color:var(--i-dark);}

.vxi-fill-outline{ background:var(--i-bg); }
.vxi-fill-outline.vxi-v-info{border-color:var(--i-info);color:var(--i-info-d);}
.vxi-fill-outline.vxi-v-success{border-color:var(--i-success);color:var(--i-success-d);}
.vxi-fill-outline.vxi-v-warning{border-color:var(--i-warning);color:var(--i-warning-d);}
.vxi-fill-outline.vxi-v-danger{border-color:var(--i-danger);color:var(--i-danger-d);}
.vxi-fill-outline.vxi-v-primary{border-color:var(--i-primary);color:var(--i-primary-d);}
.vxi-fill-outline.vxi-v-secondary{border-color:var(--i-secondary);color:var(--i-secondary-d);}
.vxi-fill-outline.vxi-v-dark{border-color:var(--i-dark);color:var(--i-dark-d);}

.vxi-card{ flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.vxi-card .vxi-ico{ font-size:18px; }
.vxi-toast{ box-shadow:0 4px 14px rgba(0,0,0,.14); }
.vxi-banner{ width:100%; }

@media (max-width:600px){
    .vxinf-fixed{ left:8px; right:8px; max-width:none; }
}

.vxi-anim-fade        { animation: vxiAnimFade .35s ease both; }
.vxi-anim-slide-down  { animation: vxiAnimDown .4s cubic-bezier(.22,1,.36,1) both; }
.vxi-anim-slide-up    { animation: vxiAnimUp .4s cubic-bezier(.22,1,.36,1) both; }
.vxi-anim-slide-left  { animation: vxiAnimLeft .4s cubic-bezier(.22,1,.36,1) both; }
.vxi-anim-slide-right { animation: vxiAnimRight .4s cubic-bezier(.22,1,.36,1) both; }
.vxi-anim-zoom        { animation: vxiAnimZoom .15s cubic-bezier(.22,1,.36,1) both; }
.vxi-anim-bounce      { animation: vxiAnimBounce .6s cubic-bezier(.28,1.5,.5,1) both; }
.vxi-anim-none        { animation: none; }

@keyframes vxiAnimFade  { from{opacity:0;} to{opacity:1;} }
@keyframes vxiAnimDown  { from{opacity:0;transform:translateY(-18px);} to{opacity:1;transform:none;} }
@keyframes vxiAnimUp    { from{opacity:0;transform:translateY(18px);}  to{opacity:1;transform:none;} }
@keyframes vxiAnimLeft  { from{opacity:0;transform:translateX(-24px);} to{opacity:1;transform:none;} }
@keyframes vxiAnimRight { from{opacity:0;transform:translateX(24px);}  to{opacity:1;transform:none;} }
@keyframes vxiAnimZoom  { from{opacity:0;transform:scale(.88);}        to{opacity:1;transform:scale(1);} }
@keyframes vxiAnimBounce{ 0%{opacity:0;transform:translateY(-20px) scale(.95);} 60%{opacity:1;transform:translateY(6px) scale(1.02);} 100%{transform:none;} }

@media (prefers-reduced-motion: reduce){
    [class*="vxi-anim-"]{ animation:none !important; }
}