/*==================================================
HOME CSS
Forever Official Customer Portal
==================================================*/

/*==================================================
CSS VARIABLES
==================================================*/

:root{

--home-bg:#070b14;

--home-surface:#0d1524;

--home-surface-2:#131d31;

--home-border:#1e2a43;

--home-border-hover:#34548f;

--home-primary:#2f80ff;

--home-primary-hover:#5598ff;

--home-success:#22c55e;

--home-danger:#ef4444;

--home-warning:#f59e0b;

--home-text:#f8fafc;

--home-text-soft:#c3cfdf;

--home-text-muted:#8d9aad;

--home-radius:14px;

--home-radius-sm:10px;

--home-shadow:

0 10px 35px rgba(0,0,0,.28);

--home-transition:.25s ease;

--home-container:1180px;

}



/*==================================================
RESET
==================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:

'Inter',

sans-serif;

background:

var(--home-bg);

color:

var(--home-text);

font-size:13px;

line-height:1.5;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

}



img{

display:block;

max-width:100%;

}

.searchbtn{
    display: flex;
    justify-content: flex-end;
}

button,

input{

font-family:inherit;

}



button{

cursor:pointer;

border:none;

background:none;

}



a{

text-decoration:none;

color:inherit;

}



ul{

list-style:none;

}



/*==================================================
PAGE
==================================================*/

.home-page{

display:flex;

flex-direction:column;

}



.home-main{

flex:1;

padding:34px 0 60px;

}



.home-container{

width:100%;

max-width:var(--home-container);

margin:auto;

padding:0 22px;

}



h2{

font-size:15px;

font-weight:500;

}



h3{

font-size:13px;

font-weight:500;

}



p{

color:

var(--home-text-soft);

font-size:10px;

line-height:1.7;

    text-align: center;

}



small{

font-size:10px;

color:

var(--home-text-muted);

}



/*==================================================
HEADER
==================================================*/

.home-header{

position:sticky;

top:0;

z-index:500;

background:

rgba(7,11,20,.94);

backdrop-filter:blur(16px);

border-bottom:

1px solid var(--home-border);

}



.home-header .home-container{

display:flex;

align-items:center;

justify-content:space-between;

height:72px;

gap:20px;

}



/*==================================================
LOGO
==================================================*/

.home-logo{

display:flex;

align-items:center;

gap:12px;

flex-shrink:0;

}



.home-logo img{

height:42px;

width:auto;

}



/*==================================================
NAVIGATION
==================================================*/

.home-nav{

display:flex;

align-items:center;

gap:8px;

}



.home-nav a{

display:flex;

align-items:center;

gap:8px;

padding:

10px 14px;

border-radius:

10px;

font-size:13px;

font-weight:500;

color:

var(--home-text-soft);

transition:

var(--home-transition);

}



.home-nav a svg{

width:18px;

height:18px;

opacity:.9;

}



.home-nav a:hover{

background:

rgba(255,255,255,.04);

color:

var(--home-text);

}



.home-nav a.active{

background:

rgba(47,128,255,.12);

color:

#ffffff;

border:

1px solid rgba(47,128,255,.28);

}



/*==================================================
HEADER ACTIONS
==================================================*/

.home-actions{

display:flex;

align-items:center;

gap:12px;

}



.home-login{

display:flex;

align-items:center;

gap:10px;

padding:

10px 16px;

background: #34548f;

color:#fff;

border-radius:

10px;

font-size:13px;

font-weight:600;

transition:

var(--home-transition);

}



.home-login:hover{

background:

var(--home-primary-hover);

}



.home-login svg{

width:18px;

height:18px;

}



/*==================================================
MOBILE MENU BUTTON
==================================================*/

.home-menu-btn{

display:none;

align-items:center;

justify-content:center;

width:42px;

height:42px;

border-radius:10px;

background:

var(--home-surface);

border:

1px solid var(--home-border);

color:

var(--home-text);

transition:

var(--home-transition);

}



.home-menu-btn:hover{

border-color:

var(--home-border-hover);

background:

var(--home-surface-2);

}



.home-menu-btn svg{

width:20px;

height:20px;

}



/*==================================================
MOBILE NAVIGATION
==================================================*/

.home-mobile-nav{

display:none;

padding:18px 22px;
margin: 10px 20px;
background:#181818;

border:

1px solid #262626;
    border-radius: 10px;
}



.home-mobile-nav a{

display:flex;

align-items:center;

gap:10px;

padding:12px 0;

font-size:13px;

font-weight:500;

color:

var(--home-text-soft);

border-bottom:

1px solid rgba(255,255,255,.05);

}



.home-mobile-nav a:last-child{

border-bottom:none;

}



.home-mobile-nav a.active{

color:

#ffffff;

}



.home-mobile-nav svg{

width:18px;

height:18px;

}
/*==================================================
VERIFY SECTION
==================================================*/

.home-verify{

display:grid;

grid-template-columns:1.45fr .9fr;

gap:24px;

align-items:start;

margin-bottom:28px;

}



/*==================================================
VERIFY CARD
==================================================*/

.home-verify-card{

background:var(--home-surface);

border:1px solid var(--home-border);

border-radius:var(--home-radius);

padding:28px;

box-shadow:var(--home-shadow);

}



.home-card-head{

margin-bottom:24px;

}



.home-card-head h1 {
    display: flex;
    justify-content: center;   /* Horizontal center */
    align-items: center;       /* Vertical center */
    gap: 5px;

    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 500;
    color: #f5f9ff;
    font-family: monospace;
    letter-spacing: 1px;
    text-align: center;
}

.home-card-head h1 {
    width: 100%;
}

.home-verifyu{
     max-width: 600px;
    margin: 0 auto;
    margin-top: 30px;
}
#validationResult{
  max-width: 800px;
margin: 30px auto;
}
/*==================================================
FORM
==================================================*/

.home-form{

display:flex;

flex-direction:column;

gap:18px;

}



/*==================================================
FIELD
==================================================*/

.home-field{

display:flex;

flex-direction:column;

gap:10px;

}



.home-field label{

font-size:12px;

font-weight:600;

color:var(--home-text);

letter-spacing:.02em;

}



/*==================================================
INPUT GROUP
==================================================*/

.home-input-group{

display:grid;

grid-template-columns:1fr auto auto;

gap:12px;

align-items:center;

}



/*==================================================
INPUT
==================================================*/

.home-input-wrap{

display:flex;

align-items:center;

height:54px;

background:var(--home-bg);

border:1px solid var(--home-border);

border-radius:12px;

overflow:hidden;

transition:var(--home-transition);

}



.home-input-wrap:hover{

border-color:var(--home-border-hover);

}



.home-input-wrap:focus-within{

border-color:var(--home-primary);

box-shadow:0 0 0 3px rgba(47,128,255,.12);

}



.home-input-icon{

width:52px;

height:100%;

display:flex;

align-items:center;

justify-content:center;

color:var(--home-text-muted);

border-right:1px solid var(--home-border);

flex-shrink:0;

}



.home-input-icon svg{

width:20px;

height:20px;

}



.home-input-wrap input{

flex:1;

height:100%;

background:transparent;

border:none;

outline:none;

padding:0 18px;

font-size:15px;

font-weight:600;

letter-spacing:1px;

color:var(--home-text);

}



.home-input-wrap input::placeholder{

font-size:13px;

font-weight:400;

letter-spacing:0;

color:var(--home-text-muted);

}



/*==================================================
MEDIA BUTTONS
==================================================*/

.home-media-btn{

display:flex;

align-items:center;

justify-content:center;

gap:8px;

height:54px;

padding:0 18px;

background:var(--home-surface-2);

border:1px solid var(--home-border);

border-radius:12px;

color:var(--home-text);

font-size:12px;

font-weight:600;

transition:var(--home-transition);

white-space:nowrap;

}



.home-media-btn:hover{

border-color:var(--home-primary);

background:rgba(47,128,255,.08);

}



.home-media-btn svg{

width:18px;

height:18px;

}



/*==================================================
VERIFY BUTTON
==================================================*/

.home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 20px;
    height: 44px;
    width: fit-content;
    background: #34548f;
    border-radius: 7px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    transition: var(--home-transition);
}



.home-btn:hover{

background:var(--home-primary-hover);

transform:translateY(-1px);

}



.home-btn:disabled{

opacity:.7;

cursor:not-allowed;

transform:none;

}



.home-btn svg{

width:19px;

height:19px;

}



/*==================================================
SECURITY NOTE
==================================================*/

.home-note{

display:flex;

align-items:flex-start;

gap:10px;

margin-top:20px;

padding:14px 16px;

background:rgba(34,197,94,.08);

border:1px solid rgba(34,197,94,.20);

border-radius:12px;

}



.home-note svg{

width:18px;

height:18px;

color:var(--home-success);

flex-shrink:0;

margin-top:1px;

}



.home-note span{

font-size:12px;

line-height:1.6;

color:var(--home-text-soft);

}



/*==================================================
HOW IT WORKS
==================================================*/

.home-guide{

background:var(--home-surface);

border:1px solid var(--home-border);

border-radius:var(--home-radius);

padding:26px;

box-shadow:var(--home-shadow);

}



.home-guide h2{

margin-bottom:22px;

}



/*==================================================
STEPS
==================================================*/

.home-steps{

display:flex;

flex-direction:column;

gap:18px;

}



.home-step{

display:flex;

align-items:flex-start;

gap:14px;

padding-bottom:18px;

border-bottom:1px solid rgba(255,255,255,.06);

}



.home-step:last-child{

padding-bottom:0;

border-bottom:none;

}



.home-step-icon{

display:flex;

align-items:center;

justify-content:center;

width:44px;

height:44px;

background:rgba(47,128,255,.10);

border:1px solid rgba(47,128,255,.20);

border-radius:12px;

color:var(--home-primary);

flex-shrink:0;

}



.home-step-icon svg{

width:20px;

height:20px;

}



.home-step-content{

display:flex;

flex-direction:column;

gap:4px;

}



.home-step-content strong{

font-size:13px;

font-weight:600;

color:var(--home-text);

}



.home-step-content span{

font-size:12px;

line-height:1.6;

color:var(--home-text-soft);

}
/*==================================================
RESULT AREA
==================================================*/

.home-result-section{

margin-bottom:28px;

}



.home-result{

display:none;

}



.home-result.show{

display:block;

animation:homeFade .25s ease;

}



/*==================================================
LOADING CARD
==================================================*/

.home-loading{

background:var(--home-surface);

border:1px solid var(--home-border);

border-radius:var(--home-radius);

padding:26px;

box-shadow:var(--home-shadow);

}



.home-result-title{

font-size:16px;

font-weight:700;

margin-bottom:18px;

color:var(--home-text);

}



.home-progress{

height:8px;

background:rgba(255,255,255,.06);

border-radius:999px;

overflow:hidden;

margin-bottom:12px;

}



.home-progress-bar{

width:0;

height:100%;

background:linear-gradient(90deg,#2f80ff,#64a8ff);

transition:width .25s linear;

}



.home-loading span{

display:block;

font-size:12px;

font-weight:600;

margin-bottom:8px;

color:var(--home-primary);

}



.home-loading p{

font-size:12px;

}



/*==================================================
SUCCESS CARD
==================================================*/

.home-device{


padding:26px;

background:var(--home-surface);

border:1px solid rgba(34,197,94,.25);

border-radius:var(--home-radius);

box-shadow:var(--home-shadow);

}



.home-device-image{

display:none;

align-items:center;

justify-content:center;

background:rgba(255,255,255,.02);

border:1px solid var(--home-border);

border-radius:14px;

padding:18px;

}



.home-device-image img{

max-height:150px;

object-fit:contain;

}



.home-device-info{

display:grid;

grid-template-columns:repeat(2,minmax(0,1fr));

gap:14px;

}



.home-info{

background:var(--home-bg);

border:1px solid var(--home-border);

border-radius:12px;

padding:14px;

display:flex;

flex-direction:column;

gap:5px;

}



.home-info span{

font-size:11px;

color:var(--home-text-muted);

text-transform:uppercase;

letter-spacing:.08em;

}



.home-info strong{

font-size:13px;

font-weight:600;

color:var(--home-text);

word-break:break-word;

}



/*==================================================
ACTION
==================================================*/

.home-action{

margin-top:18px;

display:flex;

justify-content:flex-end;

}


/*==================================================
RESULT : ERROR
==================================================*/

.home-result.error{

    border:1px solid rgba(239,68,68,.25);

    background:linear-gradient(
        180deg,
        rgba(127,29,29,.18),
        rgba(17,24,39,.96)
    );

    box-shadow:
        0 10px 30px rgba(239,68,68,.08);

}

.home-result.error .home-result-title{

    text-align: center;
    color: #fca5a5;
    font-size: 13px;
    text-transform: capitalize;
    margin-top: 10px;

}

.home-result.error .home-result-title::before{

    content:"⚠";

    font-size:20px;

}

.home-result.error p{

    color:#d1d5db;

    font-size:14px;

    line-height:1.6;

    text-align:center;

    margin:0 0 20px;

}
.home-result.error .home-action{

    margin-top:20px;
    margin-bottom: 20px;

}

.home-result.error .home-btn{
background:linear-gradient(
        135deg,
        #dc2626,
        #b91c1c
    );

    border:1px solid rgba(255,255,255,.08);
    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:260px;

    margin:0 auto;

}


.home-result.error .home-btn:hover{

    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );

    transform:translateY(-2px);

}

/*==================================================
FEATURES
==================================================*/

.home-features{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

margin:30px 0;

}



.home-feature{

display:flex;

gap:14px;

padding:18px;

background:var(--home-surface);

border:1px solid var(--home-border);

border-radius:14px;

transition:var(--home-transition);

}



.home-feature:hover{

border-color:var(--home-border-hover);

transform:translateY(-2px);

}



.home-feature-icon{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(47,128,255,.10);

border-radius:12px;

color:var(--home-primary);

flex-shrink:0;

}



.home-feature-icon svg{

width:20px;

height:20px;

}



.home-feature-content{

display:flex;

flex-direction:column;

gap:4px;

}



.home-feature-content strong{

font-size:13px;

font-weight:600;

}



.home-feature-content span{

font-size:12px;

line-height:1.6;

color:var(--home-text-soft);

}



/*==================================================
OCR SECTION
==================================================*/

.home-ocr{

margin:34px 0;

}



.home-section-title{

margin-bottom:20px;

}



.home-section-title span{

font-size:11px;

font-weight:700;

letter-spacing:.12em;

text-transform:uppercase;

color:var(--home-text-muted);

}



.home-ocr-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(210px,1fr));

gap:16px;

}



.home-ocr-card{

background:var(--home-surface);

border:1px solid var(--home-border);

border-radius:14px;

padding:18px;

transition:var(--home-transition);

}



.home-ocr-card:hover{

border-color:var(--home-border-hover);

}



.home-ocr-card strong{

display:block;

font-size:13px;

margin-bottom:8px;

}



.home-ocr-card small{

display:block;

margin-bottom:10px;

line-height:1.5;

}



.home-ocr-card b{

font-size:12px;

font-weight:600;

color:var(--home-success);

}



/*==================================================
EXAMPLE
==================================================*/

.home-example{

display:flex;

align-items:center;

gap:22px;

margin-top:34px;

padding:22px;

background:var(--home-surface);

border:1px solid var(--home-border);

border-radius:var(--home-radius);

}



.home-example-image{

width:210px;

flex-shrink:0;

}



.home-example-image img{

width:100%;

border-radius:10px;

border:1px solid var(--home-border);

}



.home-example-info{

display:flex;

flex-direction:column;

gap:8px;

}



.home-example-info span{

font-size:11px;

text-transform:uppercase;

letter-spacing:.12em;

color:var(--home-text-muted);

}



.home-example-info strong{

font-size:20px;

font-weight:700;

letter-spacing:.08em;

}



.home-example-info small{

font-size:12px;

color:var(--home-text-soft);

}



/*==================================================
ANIMATION
==================================================*/

@keyframes homeFade{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*==================================================
FOOTER
==================================================*/

.home-footer{

margin-top:60px;

border-top:1px solid var(--home-border);

background:#050912;

}



.home-footer-top{

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

padding:32px 0;

}



.home-footer-brand{

display:flex;

align-items:center;

gap:14px;

}



.home-footer-brand img{

width:42px;

height:42px;

object-fit:contain;

}



.home-footer-brand div{

display:flex;

flex-direction:column;

gap:3px;

}



.home-footer-brand strong{

font-size:14px;

font-weight:700;

}



.home-footer-brand span{

font-size:11px;

color:var(--home-text-muted);

text-transform:uppercase;

letter-spacing:.08em;

}



.home-footer-nav{

display:flex;

align-items:center;

gap:22px;

flex-wrap:wrap;

}



.home-footer-nav a{

font-size:13px;

color:var(--home-text-soft);

transition:var(--home-transition);

}



.home-footer-nav a:hover{

color:#fff;

}



.home-footer-bottom{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

padding:18px 0 28px;

border-top:1px solid rgba(255,255,255,.05);

font-size:12px;

color:var(--home-text-muted);

}



/*==================================================
OCR LOADING
==================================================*/

.home-ocr-loading{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.75);

backdrop-filter:blur(5px);

opacity:0;

visibility:hidden;

transition:.25s;

z-index:5000;

}



.home-ocr-loading.show{

opacity:1;

visibility:visible;

}



.home-ocr-box{

width:320px;

background:var(--home-surface);

border:1px solid var(--home-border);

border-radius:18px;

padding:30px;

text-align:center;

}



.home-ocr-box strong{

display:block;

margin-bottom:8px;

font-size:15px;

}



.home-ocr-box span{

font-size:12px;

color:var(--home-text-soft);

line-height:1.7;

}



/*==================================================
SPINNER
==================================================*/

.home-ocr-spinner{

width:46px;

height:46px;

margin:0 auto 18px;

border:3px solid rgba(255,255,255,.08);

border-top-color:var(--home-primary);

border-radius:50%;

animation:homeSpin .8s linear infinite;

}



@keyframes homeSpin{

to{

transform:rotate(360deg);

}

}



/*==================================================
TOAST
==================================================*/

.home-toast{

    position:fixed;

    left:50%;

    bottom:24px;

    transform:translateX(-50%) translateY(20px);

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:fit-content;

    max-width:min(90vw,420px);


    min-height:48px;

    padding:12px 18px;

    border-radius:14px;

    background:#111827;

    color:#fff;

    white-space:nowrap;

    box-shadow:0 12px 30px rgba(0,0,0,.35);

    opacity:0;

    visibility:hidden;

    transition:.25s ease;

    z-index:9999;

}

.home-toast.show{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

.home-toast-text{

    white-space:normal;

    word-break:break-word;

}


/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1100px){

.home-verify{

grid-template-columns:1fr;

}

.home-features{

grid-template-columns:repeat(2,1fr);

}

.home-device{

grid-template-columns:1fr;

}

.home-device-image{

max-width:240px;

margin:auto;

}

}



@media (max-width:900px){

.home-nav{

display:none;

}
.home-login{
    display:none;
}
.home-menu-btn{

display:flex;

}
.home-footer-brand{
    display:block;
}
.home-mobile-nav.show{

display:block;

}

.home-footer-top{

flex-direction:column;

align-items:flex-start;

}

.home-footer-bottom{

flex-direction:column;

align-items:flex-start;

}

}



@media (max-width:768px){

.home-main{

padding:24px 0 40px;

}
.home-guide{
    display:none;
}
.home-verify-card,

.home-guide{

padding:20px;

}

.home-input-group{

grid-template-columns:1fr;

}

.home-media-btn,

.home-btn{

width:100%;

}

.home-device-info{

grid-template-columns:1fr;

}

.home-features{

grid-template-columns:1fr;

}

.home-example{

flex-direction:column;

align-items:flex-start;

}

.home-example-image{

width:100%;

}

}



@media (max-width:480px){

.home-container{

padding:0 16px;

}

h1{

font-size:14px;

}

.home-header .home-container{

height:66px;

}

.home-logo img{

height:36px;

}

.home-login{

padding:10px 14px;

font-size:12px;

}

.home-login span{

display:none;

}

.home-footer-nav{

gap:14px;

}

.home-footer-nav a{

font-size:12px;

}

.home-ocr-box{

width:92%;

padding:24px;

}

}

/*==================================================
OCR PREVIEW
==================================================*/

.home-preview{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.88);

    z-index:9999;

}

.home-preview.show{

    display:flex;

}

.home-preview-box{

    position:relative;

    width:min(92vw,420px);

    border-radius:18px;

    overflow:hidden;

    background:#111827;

    box-shadow:0 20px 60px rgba(0,0,0,.55);

}

.home-preview-box img{

    display:block;

    width:100%;

    opacity:.45;

    filter:blur(1px);

}

/*====================================
Overlay
====================================*/

.home-preview-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.20);

    backdrop-filter:blur(3px);

}

/*====================================
Scanner Line
====================================*/

.scan-line{

    position:absolute;

    left:8%;

    width:84%;

    height:3px;

    border-radius:999px;

    background:#22c55e;

    box-shadow:

    0 0 8px #22c55e,

    0 0 20px #22c55e,

    0 0 40px rgba(34,197,94,.8);

    animation:scanMove 2.2s ease-in-out infinite;

}

.scan-line::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:-22px;

    height:45px;

    background:linear-gradient(

    to bottom,

    transparent,

    rgba(34,197,94,.25),

    transparent

    );

}

@keyframes scanMove{

    0%{

        top:14%;

    }

    50%{

        top:86%;

    }

    100%{

        top:14%;

    }

}

/*====================================
Scanner Corners
====================================*/

.scan-corner{

    position:absolute;

    width:34px;

    height:34px;

    border-color:#22c55e;

    box-shadow:0 0 10px #22c55e;

}

.scan-corner.tl{

    top:18px;

    left:18px;

    border-top:3px solid;

    border-left:3px solid;

}

.scan-corner.tr{

    top:18px;

    right:18px;

    border-top:3px solid;

    border-right:3px solid;

}

.scan-corner.bl{

    bottom:18px;

    left:18px;

    border-bottom:3px solid;

    border-left:3px solid;

}

.scan-corner.br{

    bottom:18px;

    right:18px;

    border-bottom:3px solid;

    border-right:3px solid;

}

/*====================================
Status
====================================*/

.scan-status{

    position:absolute;

    left:50%;

    bottom:65px;

    transform:translateX(-50%);

    width:85%;

    padding:18px;

    border-radius:14px;

    background:rgba(17,24,39,.82);

    backdrop-filter:blur(12px);

    text-align:center;

    color:#fff;

}

.scan-status h3{

    margin:10px 0 4px;

    font-size:16px;

    font-weight:700;

}

.scan-status p{

    margin:0;

    font-size:10px;

    color:#cbd5e1;

}

/*====================================
Spinner
====================================*/

.scan-spinner{

    width:42px;

    height:42px;

    margin:auto;

    border:3px solid rgba(255,255,255,.18);

    border-top-color:#22c55e;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}
.home-toast.toast-success{

    background:linear-gradient(135deg,#16a34a,#15803d);

    border-left:4px solid #86efac;

}

.home-toast.toast-error{

    background:linear-gradient(135deg,#dc2626,#991b1b);

    border-left:4px solid #fca5a5;

}

.home-toast.toast-warning{

    background:linear-gradient(135deg,#d97706,#b45309);

    border-left:4px solid #fde68a;

}

.home-toast.toast-info{

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    border-left:4px solid #93c5fd;

}