.card{

    background:var(--panel);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:20px;

}

.card-title{

    font-size:18px;

    font-weight:600;

    margin-bottom:18px;

}

button{

    height:48px;

    border-radius:10px;

    background:var(--primary);

    color:white;

    padding:0 24px;

    transition:var(--transition);

}

button:hover{

    transform:translateY(-2px);

}

button:active{

    transform:translateY(0);

}

input{

    width:100%;

    height:48px;

    border-radius:10px;

    background:var(--panel2);

    color:white;

    padding:0 16px;

}

.button-group{

    display:flex;

    gap:12px;

}

.status{

    font-weight:600;

}

.online{

    color:#2ECC71;

}

.offline{

    color:#EB5757;

}
.toast{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:50;
    max-width:360px;
    padding:14px 18px;
    border-radius:10px;
    background:var(--panel2);
    color:var(--text);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(12px);
    pointer-events:none;
    transition:var(--transition);
}

.toast.show{
    opacity:1;
    transform:translateY(0);
}

.toast.success{
    border-color:var(--success);
}

.toast.error{
    border-color:var(--danger);
}

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

body.is-loading::after{
    content:'Đang xử lý...';
    position:fixed;
    inset:auto 24px 24px auto;
    z-index:40;
    background:var(--primary);
    color:white;
    padding:12px 18px;
    border-radius:10px;
    box-shadow:var(--shadow);
    font-weight:700;
}

.empty-state{
    color:var(--text2);
    background:var(--panel2);
    border-radius:10px;
    padding:16px;
}