.character-card{

    margin-top:20px;

    padding:22px;

    border:1px solid #e4ebf3;

    border-radius:14px;

    background:#f9fbfd;

    transition:.2s;

}

.character-card:hover{

    border-color:#4da3ff;

    box-shadow:0 10px 25px rgba(77,163,255,.12);

}

.character-card + .character-card{

    margin-top:18px;

}

.character-name{

    font-size:24px;

    font-weight:700;

    color:#1d2d45;

    margin-bottom:18px;

    padding-bottom:15px;

    border-bottom:1px solid #e7edf5;

}

.character-card .server-row{

    padding:12px 0;

}

.character-card .server-row:last-child{

    border-bottom:none;

}

.character-create{

    margin-top:30px;

}

.character-create input{

    margin-bottom:18px;

}

.character-create button{

    margin-top:8px;

}

.character-empty{

    text-align:center;

    padding:35px;

    color:#666;

    font-size:18px;

    border:2px dashed #d8e1eb;

    border-radius:14px;

    background:#fafbfd;

}

.info-box{

    font-size:15px;

    line-height:28px;

    color:#555;

}

.info-box strong{

    color:#1d2d45;

}

.character-card{

    display:flex;

    gap:30px;

    align-items:center;

    cursor:pointer;

}

.character-card:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.character-avatar{

    width:120px;

    flex-shrink:0;

    text-align:center;

}

.character-avatar img{

    height:170px;

    display:block;

    margin:auto;

}

.character-avatar-big{

    text-align:center;

}

.character-avatar-big img{

    height:320px;

}

.character-info{

    flex:1;

}